逐行新闻滚动效果 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>非常不错的逐行新闻滚动效果</title> 
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312"> 
  6. <!--把下面代码加到<head>与</head>之间--> 
  7. <style type="text/css"> 
  8. a{ 
  9.  display:block; 
  10.  font-size:12px; 
  11.  line-height:18px; 
  12.  text-decoration:none; 
  13.  color:#333; 
  14.  font-family:Arial; 
  15. } 
  16. .shell{ 
  17.  background:url(http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081209192557.gif) no-repeat 4px 5px; 
  18.  border:1px solid #aaa; 
  19.  width:400px; 
  20.  padding:3px 2px 2px 20px; 
  21. } 
  22. #div1{ 
  23.  height:18px; 
  24.  overflow:hidden; 
  25. } 
  26. </style> 
  27. </head> 
  28. <body> 
  29. <!--把下面代码加到<body>与</body>之间--> 
  30. <div class="shell"> 
  31.   <div id="div1"> 
  32.     <a href="javascript:">请教高手帮我看下这段代码：FLASH显示不了</a> 
  33.     <a href="javascript:">请教在UTF-8编辑下的符号显示问题</a> 
  34.     <a href="javascript:">jquery做的一个滑动效果，不知如何增加延迟，现在太灵敏了</a> 
  35.     <a href="javascript:">技术研究：QQ2009版按钮渐显渐隐的由来</a> 
  36.     <a href="javascript:">Javascript读取Json数据并分页显示，支持键盘和滚轮翻页</a> 
  37.     <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a> 
  38.     <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件</a> 
  39.   </div>  
  40. </div> 
  41. <script language="javascript"> 
  42. var box=document.getElementById("div1"),can=true; 
  43. box.innerHTML+=box.innerHTML; 
  44. box.onmouseover=function(){can=false}; 
  45. box.onmouseout=function(){can=true}; 
  46. new function (){ 
  47.  var stop=box.scrollTop%18==0&&!can; 
  48.  if(!stop)box.scrollTop==parseInt(box.scrollHeight/2)?box.scrollTop=0:box.scrollTop++; 
  49.  setTimeout(arguments.callee,box.scrollTop%18?10:1500); 
  50. }; 
  51. </script> 
  52. </body> 
  53. </html> 

 

 

posted @ 2014-08-10 10:06  商商-77  阅读(119)  评论(0)  编辑  收藏  举报