国产精品成人VA在线观看,亚洲日韩在线中文字幕综合,亚洲AV电影天堂男人的天堂,久久人人爽人人爽人人av东京热


News新聞

業(yè)界新聞動(dòng)態(tài)、技術(shù)前沿
Who are we?

您的位置：首頁(yè)      網(wǎng)站知識(shí)      基于jQuery的上下無(wú)縫滾動(dòng)應(yīng)用(單行或多行)

基于jQuery的上下無(wú)縫滾動(dòng)應(yīng)用(單行或多行)

標(biāo)簽： 發(fā)布日期：2013-10-09 00:00:00 1508

基于JQUERY的無(wú)縫滾動(dòng)實(shí)例
 

  <!doctype html>
  <html>
  <head>
  <meta charset="gbk"/>
  <title>基于jQuery的上下無(wú)縫滾動(dòng)應(yīng)用(單行或多行)@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
  * @可自由轉(zhuǎn)載及使用,但請(qǐng)注明版權(quán)歸屬
  *******************************/
  $(function(){
  //單行應(yīng)用@Mr.Think
  var _wrap=$('ul.line');//定義滾動(dòng)區(qū)域
  var _interval=2000;//定義滾動(dòng)間隙時(shí)間
  var _moving;//需要清除的動(dòng)畫
  _wrap.hover(function(){
  clearInterval(_moving);//當(dāng)鼠標(biāo)在滾動(dòng)區(qū)域中時(shí),停止?jié)L動(dòng)
  },function(){
  _moving=setInterval(function(){
  var _field=_wrap.find('li:first');//此變量不可放置于函數(shù)起始處,li:first取值是變化的
  var _h=_field.height();//取得每次滾動(dòng)高度
  _field.animate({marginTop:-_h+'px'},600,function(){//通過(guò)取負(fù)margin值,隱藏第一行
  _field.css('marginTop',0).appendTo(_wrap);//隱藏后,將該行的margin值置零,并插入到最后,實(shí)現(xiàn)無(wú)縫滾動(dòng)
  })
  },_interval)//滾動(dòng)間隔時(shí)間取決于_interval
  }).trigger('mouseleave');//函數(shù)載入時(shí),模擬執(zhí)行mouseleave,即自動(dòng)滾動(dòng)
  });
  $(function(){
  //多行應(yīng)用@Mr.Think
  var _wrap=$('ul.mulitline');//定義滾動(dòng)區(qū)域
  var _interval=3000;//定義滾動(dòng)間隙時(shí)間
  var _moving;//需要清除的動(dòng)畫
  _wrap.hover(function(){
  clearInterval(_moving);//當(dāng)鼠標(biāo)在滾動(dòng)區(qū)域中時(shí),停止?jié)L動(dòng)
  },function(){
  _moving=setInterval(function(){
  var _field=_wrap.find('li:first');//此變量不可放置于函數(shù)起始處,li:first取值是變化的
  var _h=_field.height();//取得每次滾動(dòng)高度
  _field.animate({marginTop:-_h+'px'},600,function(){//通過(guò)取負(fù)margin值,隱藏第一行
  _field.css('marginTop',0).appendTo(_wrap);//隱藏后,將該行的margin值置零,并插入到最后,實(shí)現(xiàn)無(wú)縫滾動(dòng)
  })
  },_interval)//滾動(dòng)間隔時(shí)間取決于_interval
  }).trigger('mouseleave');//函數(shù)載入時(shí),模擬執(zhí)行mouseleave,即自動(dòng)滾動(dòng)
  });
  </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>可自由轉(zhuǎn)載及使用,但請(qǐng)注明出處.</em></h1>
  <h2><span><a title="訂閱Mr.Think的博客" href="http://mrthink.net/feed/">RSS Feed</a></span>@專注Web前端技術(shù), 熱愛(ài)PHP, 崇尚簡(jiǎn)單生活的凡夫俗子.</h2>
  </div>
  <div class="return">返回文章頁(yè):<a href="http://mrthink.net/js-jq-autoscroll-updown/">基于jQuery的上下無(wú)縫滾動(dòng)應(yīng)用(單行或多行)</a></div>
  <!--DEMO start-->
  <div id="demo">
  <h2>單行應(yīng)用</h2>
  <ul class="line">
  <li><a title="簡(jiǎn)易的點(diǎn)擊展開(kāi)/關(guān)閉效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">簡(jiǎn)易的點(diǎn)擊展開(kāi)/關(guān)閉效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
  <li><a title="getElementsByTagName的簡(jiǎn)寫方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的簡(jiǎn)寫方式</a> 2010年06月24日 (4)</li>
  <li><a title="一個(gè)簡(jiǎn)單的鼠標(biāo)劃過(guò)切換效果" href="http://mrthink.net/script-mousechange-simple/">一個(gè)簡(jiǎn)單的鼠標(biāo)劃過(guò)切換效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類</a> 2010年05月05日 (5)</li>
  <li><a title="一個(gè)簡(jiǎn)單的縱橫向動(dòng)畫效果類" href="http://mrthink.net/javascrip-dom-slide-simple/">一個(gè)簡(jiǎn)單的縱橫向動(dòng)畫效果類</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的簡(jiǎn)寫方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的簡(jiǎn)寫方式</a> 2010年04月18日 (1)</li>
  <li><a title="兩種簡(jiǎn)單實(shí)現(xiàn)菜單高亮顯示的JS類" href="http://mrthink.net/javascript-highlight-menu-twoway/">兩種簡(jiǎn)單實(shí)現(xiàn)菜單高亮顯示的JS類</a> 2010年04月17日 (10)</li>
  </ul>
  <!--//jQ版本//-->
  <h2>多行應(yīng)用</h2>
  <ul class="mulitline">
  <li><a title="一個(gè)簡(jiǎn)單的鼠標(biāo)劃過(guò)切換效果" href="http://mrthink.net/script-mousechange-simple/">一個(gè)簡(jiǎn)單的鼠標(biāo)劃過(guò)切換效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類</a> 2010年05月05日 (5)</li>
  <li><a title="getElementsByTagName的簡(jiǎn)寫方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的簡(jiǎn)寫方式</a> 2010年06月24日 (4)</li>
  <li><a title="兩種簡(jiǎn)單實(shí)現(xiàn)菜單高亮顯示的JS類" href="http://mrthink.net/javascript-highlight-menu-twoway/">兩種簡(jiǎn)單實(shí)現(xiàn)菜單高亮顯示的JS類</a> 2010年04月17日 (10)</li>
  <li><a title="簡(jiǎn)易的點(diǎn)擊展開(kāi)/關(guān)閉效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">簡(jiǎn)易的點(diǎn)擊展開(kāi)/關(guān)閉效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
  <li><a title="一個(gè)簡(jiǎn)單的縱橫向動(dòng)畫效果類" href="http://mrthink.net/javascrip-dom-slide-simple/">一個(gè)簡(jiǎn)單的縱橫向動(dòng)畫效果類</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的簡(jiǎn)寫方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的簡(jiǎn)寫方式</a> 2010年04月18日 (1)</li>
  </ul>
  <!--//多行應(yīng)用//-->
  </div>
  <!--DEMO end-->
  <!--@Mr.Think的統(tǒng)計(jì)及廣告代碼,使用樣例請(qǐng)勿復(fù)制:)-->
  <div class="clear"></div>
  <div id="adsense"><script type="text/javascript"><!--
  google_ad_client = "ca-pub-1796085922030119";
  /* 樣例演示頁(yè)底部 */
  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>