News新闻

业界新闻动态、技术前沿
Who are we?

您的位置：首页      网站知识      基于jQuery的上下无缝滚动应用(单行或多行)

基于jQuery的上下无缝滚动应用(单行或多行)

发布日期：2013-10-09 00:00:00 933

基于JQUERY的无缝滚动实例
 

  <!doctype html>
  <html>
  <head>
  <meta charset="gbk"/>
  <title>基于jQuery的上下无缝滚动应用(单行或多行)@Mr.Think</title>
  <link rel="stylesheet" href="css*/
  #demo h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px}
  #demo ul.line,#demo ul.mulitline{width:500px; height:30px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000}
  #demo ul.mulitline{height:90px}
  #demo li{height:30px;text-indent:15px; font-size:12px; line-height:30px;list-style:none}
  </style>
  <script>
  /*******************************
  * @author Mr.Think
  * @author blog http://mrthink.net/
  * @2010.08.08
  * @可自由转载及使用,但请注明版权归属
  *******************************/
  $(function(){
  //单行应用@Mr.Think
  var _wrap=$('ul.line');//定义滚动区域
  var _interval=2000;//定义滚动间隙时间
  var _moving;//需要清除的动画
  _wrap.hover(function(){
  clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
  },function(){
  _moving=setInterval(function(){
  var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
  var _h=_field.height();//取得每次滚动高度
  _field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
  _field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
  })
  },_interval)//滚动间隔时间取决于_interval
  }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
  });
  $(function(){
  //多行应用@Mr.Think
  var _wrap=$('ul.mulitline');//定义滚动区域
  var _interval=3000;//定义滚动间隙时间
  var _moving;//需要清除的动画
  _wrap.hover(function(){
  clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
  },function(){
  _moving=setInterval(function(){
  var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
  var _h=_field.height();//取得每次滚动高度
  _field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
  _field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
  })
  },_interval)//滚动间隔时间取决于_interval
  }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
  });
  </script>
   
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  </head>
  <body>
  <div id="d_head">
  <h1><a title="返回Mr.Think的博客" href="http://mrthink.net/">Mr.Think的博客</a><em>可自由转载及使用,但请注明出处.</em></h1>
  <h2><span><a title="订阅Mr.Think的博客" href="http://mrthink.net/feed/">RSS Feed</a></span>@专注Web前端技术, 热爱PHP, 崇尚简单生活的凡夫俗子.</h2>
  </div>
  <div class="return">返回文章页:<a href="http://mrthink.net/js-jq-autoscroll-updown/">基于jQuery的上下无缝滚动应用(单行或多行)</a></div>
  <!--DEMO start-->
  <div id="demo">
  <h2>单行应用</h2>
  <ul class="line">
  <li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
  <li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
  <li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
  <li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
  <li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
  </ul>
  <!--//jQ版本//-->
  <h2>多行应用</h2>
  <ul class="mulitline">
  <li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
  <li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
  <li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
  <li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
  <li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
  </ul>
  <!--//多行应用//-->
  </div>
  <!--DEMO end-->
  <!--@Mr.Think的统计及广告代码,使用样例请勿复制:)-->
  <div class="clear"></div>
  <div id="adsense"><script type="text/javascript"><!--
  google_ad_client = "ca-pub-1796085922030119";
  /* 样例演示页底部 */
  google_ad_slot = "9091786784";
  google_ad_width = 728;
  google_ad_height = 90;
  //-->
  </script>
  <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script></div>
  <script>
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script>
  try {
  var pageTracker = _gat._getTracker("UA-15924173-1");
  pageTracker._trackPageview();
  } catch(err) {}
  </script>
  <!--@end-->
  </body>
  </html>

相关文章