囯产香蕉97碰碰碰视频在线观看-午夜人在线观看完整版-999久久久精品国产消防器材-亚洲精品国产av现线


News新聞

業界新聞動態、技術前沿
Who are we?

您的位置：首頁      網站知識      基于jQuery的上下無縫滾動應用(單行或多行)

基于jQuery的上下無縫滾動應用(單行或多行)

標簽： 發布日期：2013-10-09 00:00:00 1906

基于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-->
  <[email protected]的統計及廣告代碼,使用樣例請勿復制:)-->
  <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>