溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript怎么實(shí)現(xiàn)長(zhǎng)圖滾動(dòng)效果

發(fā)布時(shí)間：2021-04-29 14:27:32 來(lái)源：億速云 閱讀：278 作者：小新 欄目：開(kāi)發(fā)技術(shù)

小編給大家分享一下JavaScript怎么實(shí)現(xiàn)長(zhǎng)圖滾動(dòng)效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

JavaScript是什么

JavaScript是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

JavaScript之長(zhǎng)圖滾動(dòng)的具體內(nèi)容如下

長(zhǎng)圖的滾動(dòng)會(huì)涉及定時(shí)器：

我們先來(lái)回顧下定時(shí)器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定時(shí)器回顧</title>
</head>
<body>
    <button id="start">開(kāi)啟</button>
    <button id="stop">關(guān)閉</button>
    <script type="text/javascript">
        var start = document.getElementById("start");
        var stop = document.getElementById("stop");
        var num = 0,timer = null;

        start.onclick = function (){
            // 使用定時(shí)器的時(shí)候 先清除原有定時(shí)器 再開(kāi)啟定時(shí)器 可以試著將下邊的clearInterval(timer);注釋掉然后多次點(diǎn)擊開(kāi)啟按鈕對(duì)比效果
            clearInterval(timer);
            timer = setInterval(function (){
                num++;
                console.log(num);
            },1000)
        }
        stop.onclick = function (){
            clearInterval(timer);
        }
    </script>
</body>
</html>

溫習(xí)完定時(shí)器內(nèi)容后，來(lái)看長(zhǎng)圖滾動(dòng)的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>長(zhǎng)圖滾動(dòng)效果</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
   background-color: #000;
  }
        #box{
   width: 658px;
   height: 400px;
   border: 1px solid #ff6700;
   margin: 100px auto;
   overflow: hidden;
   position: relative;
  }
        #box img{
   position: absolute;
   top: 0;
   left: 0;
  }
        #box span{
            position: absolute;
            width: 100%;
            height: 50%;
            left: 0;
            cursor: pointer;
        }
        #box #top{
   top: 0;
  }
  #box #bottom{
   bottom: 0;
  }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/timer.jpeg" alt="">
        <span id="top"></span>
        <span id="bottom"></span>
    </div>
    <script type="text/javascript">
        // 1.獲取事件源
        var box = document.getElementById('box');
  var pic = document.getElementsByTagName('img')[0];
  var divTop = document.getElementById('top');
  var divBottom = document.getElementById('bottom');

        // 2.添加事件
        var num = 0,timer = null;
        divBottom.onmouseover  = function  () {
            // 清除之前的加速效果
   clearInterval(timer);
   //  讓圖片向下滾動(dòng)
   timer = setInterval(function  () {
     num -= 10;
     // 這個(gè)-3666是根據(jù)圖片自己調(diào)控的
    if(num >= -3666){
     pic.style.top = num + 'px';
    }else{
     clearInterval(timer);
    }
   },50);
  }
  divTop.onmouseover  = function  () {
   clearInterval(timer);
   //  讓圖片向上滾動(dòng)
   timer = setInterval(function  () {
     num += 10;
    if(num <= 0){
     pic.style.top = num + 'px';
    }else{
     clearInterval(timer);
    }
   },100);
  }
  // 鼠標(biāo)移開(kāi)則停止?jié)L動(dòng)
  box.onmouseout = function () {
   clearInterval(timer);
  }
    </script>
</body>
</html>

這里不放效果圖了，需要可以自己試試（記得找長(zhǎng)圖）

看完了這篇文章，相信你對(duì)“JavaScript怎么實(shí)現(xiàn)長(zhǎng)圖滾動(dòng)效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手