javascript實(shí)現(xiàn)的上下無(wú)縫滾動(dòng)效果

更新時(shí)間：2016年09月19日 16:25:13 作者：朱羽佳

這篇文章主要介紹了javascript實(shí)現(xiàn)的上下無(wú)縫滾動(dòng)效果,具有無(wú)縫滾動(dòng)及響應(yīng)鼠標(biāo)滑過(guò)停止?jié)L動(dòng)的功能,簡(jiǎn)便實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)的上下無(wú)縫滾動(dòng)效果。分享給大家供大家參考，具體如下：

前面介紹了JS左右無(wú)縫滾動(dòng)效果，現(xiàn)在做下無(wú)縫滾動(dòng)——上下的效果。其他代碼和左右的差不多，只是改變的是 offsetTop 的值，并且不需要計(jì)算 ul 整體的寬度了。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>無(wú)縫滾動(dòng)——上下</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  li{list-style:none;}
  img{border:0;}
  #scroll{width:178px;margin:50px auto;position:relative;}
  .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;}
  .up{background:url(images/up.gif);}
  .down{background:url(images/down.gif);}
  .content{margin:10px 0;height:440px;overflow:hidden;position:relative;}
  .content ul{position:absolute;top:0;left:0;}
  .content li{height:110px;}
  </style>
</head>
<body>
  <div id="scroll">
    <a href="javascript:;" id="up" class="btn up"></a>
    <div class="content">
      <ul>
        <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li>
        <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li>
        <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li>
        <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li>
      </ul>
    </div>
    <a class="btn down" href="javascript:;" id="down"></a>
  </div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.getElementById('scroll');
  var btnUp = document.getElementById('up');
  var btnDown = document.getElementById('down');
  var oUl = oDiv.getElementsByTagName('ul')[0];
  var timer = null;
  var speed = -1;
  oUl.innerHTML += oUl.innerHTML;
  setTimeout(move,1500);
  btnUp.onclick = function(){
    clearInterval(timer);
    speed = -1;
    move();
  };
  btnDown.onclick = function(){
    clearInterval(timer);
    speed = 1;
    move();
  };
  oUl.onmouseover = function(){
    clearInterval(timer);
  };
  oUl.onmouseout = function(){
    move();
  };
  function move(){
    timer = setInterval(function(){
      oUl.style.top = oUl.offsetTop + speed + 'px';
      if(oUl.offsetTop <= - oUl.offsetHeight / 2){
        oUl.style.top = '0';
      }else if(oUl.offsetTop >= 0){
        oUl.style.top = - oUl.offsetHeight / 2 + 'px';
      };
    },30);
  };
};
</script>

如果要改變移動(dòng)速度，修改 speed 的值即可，初始默認(rèn)為向上移動(dòng)，即速度為負(fù)數(shù)。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS正則表達(dá)式驗(yàn)證數(shù)字代碼
本篇文章主要是對(duì)JS正則表達(dá)式驗(yàn)證數(shù)字的代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)效果，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
2016-07-07
這篇文章主要介紹了JS實(shí)現(xiàn)的5級(jí)聯(lián)動(dòng)Select下拉選擇框,涉及javascript數(shù)組調(diào)用及遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08

JavaScript包裝對(duì)象使用介紹

這篇文章主要介紹了JavaScript中包裝對(duì)象的一些知識(shí)點(diǎn)，包括內(nèi)置對(duì)象等

2013-08-08

JS實(shí)現(xiàn)canvas簡(jiǎn)單小畫(huà)板功能

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)canvas簡(jiǎn)單小畫(huà)板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2020-06-06

JavaScript導(dǎo)出Excel實(shí)例詳解

這篇文章主要介紹了JavaScript導(dǎo)出Excel的方法,以實(shí)例形式詳細(xì)分析了javascript將WEB頁(yè)面導(dǎo)出為EXCEL文檔的方法及相關(guān)的技巧說(shuō)明,對(duì)于深入了解javascript編程原理有一定的借鑒價(jià)值,需要的朋友可以參考下

2014-11-11