上一篇 | 这是最后一篇日志下一篇
JQuery/JS 订阅所有JQuery/JS的日志

Jquery 文字向左无缝滚动-仿新浪微薄正在热议滚动

作者:biezhiyinan 日期:2011-02-28

字体大小: 小 中 大

 

XML/HTML代码
  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.   
  4.   
  5.  <head>  
  6.  <base href="http://www.feiqiao.net/blog/"  target="_blank"/>  
  7.  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
  8.  <title>Jquery 文字向左无缝滚动-仿新浪微薄正在热议滚动  
  9. </title>  
  10.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
  11.  <script type="text/javascript">  
  12.  $(document).ready(function(){  
  13. var speed=30; //数字越大速度越慢  
  14. var $tab=$("#hotTopic");  
  15. var $tab1=$("#talking");  
  16. var $tab2=$("#scroll");  
  17. $tab2.html($tab1.html());  
  18. function Marquee(){  
  19.  if($tab2[0].offsetWidth-$tab[0].scrollLeft<=0)  
  20.  $tab[0].scrollLeft-=$tab[0].offsetWidth;  
  21.  else{  
  22.  $tab[0].scrollLeft++;  
  23.  }  
  24.  }  
  25. var MyMar=setInterval(Marquee,speed); //数字越大速度越慢  
  26. $tab.hover(function(){  
  27.         clearInterval(MyMar);  
  28.         },function(){  
  29.         MyMar=setInterval(Marquee,speed)  
  30.             })  
  31.      })  
  32.    
  33.  </script>  
  34.  <style type="text/css">  
  35.  ul,li{margin:0;padding:0;list-style:none;}  
  36.  #hotTopic {background: beige;overflow:hidden;border: 1px dashed #CCC;width: 500px;}  
  37.  .wrap{float: left;width: 1000px;}  
  38.  #talking,#scroll{float: left;}  
  39.  #talking li,#scroll li{float:left;margin-right:20px;}  
  40.  </style>  
  41.  </head>  
  42.  <body>  
  43. Jquery 文字向左无缝滚动-仿新浪微薄正在热议滚动  
  44.  <div id="hotTopic">  
  45.    <div class="wrap">  
  46.   <ul id="talking">  
  47.     <li><a href="default.asp?cateID=4">asp</a></li>  
  48.     <li><a href="default.asp?cateID=1/">php</a></li>  
  49.     <li><a href="default.asp?cateID=6"># JQuery/JS</a></li>  
  50.     <li><a href="default.asp?cateID=19">css</a></li>  
  51.     <li><a href="default.asp?cateID=7">english</a></li>  
  52.     <li><a href="/">飞桥工作室FeiQiao Studio </a></li>  
  53.   </ul>  
  54.      <ul id="scroll"></ul>  
  55.    </div>  
  56.  </div>  
  57.   
  58. </body>  
  59.  </html>  

 




[本日志由 biezhiyinan 于 2011-02-28 08:51 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.