JS實現滑鼠移上去圖片停止滾動移開恢複滾動效果

標籤：地方   cti   blog   images   over   UI   滾動效果   function   調整   

這是在做個人站的時候展示項目成果，因為不光需要展示，還需要介紹詳細內容，就在滾動展示的地方做了這個效果以便於點開想要看的項目。

首先，要做的是一個需要滾動的地區。我前邊寫過一個關於圖片迴圈滾動的樣本，那個是一塊塊的的滾動==>實現圖片的迴圈滾動 .

這次我們就做捲動區域是平滑迴圈滾動效果。

下邊是布局的HTML代碼，原理是在要展示地區的div(.ban_img)裡加一個能包含所有需要展示的圖的大div(.in_img),

<div class=" ban_img">        <div class="in_img">            <div class="inside inside1"></div>            <div class="inside inside2"></div>            <div class="inside inside3"></div>            <div class="inside inside4"></div>            <div class="inside inside5"></div>            <div class="inside inside6"></div>            <div class="inside inside1"></div>            <div class="inside inside2"></div>            <div class="inside inside3"></div>            <div class="inside inside4"></div>                                    </div></div>

下邊是CSS樣式，我加的是背景圖，可跟實際情況選擇（圖片路徑根據實際位置修改）

.ban_img{    height: 400px;    .in_img{        width: 3000px;        background-color: blue;        .inside{            width: 300px;            float: left;            height: 400px;            background-repeat: no-repeat;            background-size: cover;            box-sizing: border-box;            border: 3px solid #108A77;        }        .inside1{            background-image: url(../img/binzhilang.png);        }        .inside2{            background-image: url(../img/zhihui.png);        }        .inside3{            background-image: url(../img/jredu.png);        }        .inside4{            background-image: url(../img/sanyi.png);        }        .inside5{            background-image: url(../img/cimply.png);        }        .inside6{            background-image: url(../img/xingbake.png);        }    }}

實現迴圈滾動的JS很簡單，為div（.in_img）加一個定時器就可以了,每10毫秒調整它的marginleft-1px,迴圈完一遍，計數器num清零

var scroll=document.getElementsByClassName("in_img");var num=0;var time=setInterval(function(){    num--;    scroll[0].style.marginLeft=num+"px";    if(num<=-1800){                num=0;            }},10);

這樣一來，平滑連續滾動的效果就可以實現了.

那麼怎麼實現標題所述效果呢？這也很簡單，為div(.in_img)綁定兩個事件來控制定時器就可以了。

首先添加滑鼠移上去事件，來清除定時器

scroll[0].addEventListener("mouseover",function(){    clearInterval(time);});

然後添加滑鼠移走事件，再恢複定時器

scroll[0].addEventListener("mouseout",function(){    time=setInterval(function(){        num--;        scroll[0].style.marginLeft=num+"px";        if(num<=-1800){                    num=0;                }    },10);})

這樣一來，大功告成！

功能簡單，代碼不難，但很實用。人工手打，辛苦給點個推薦吧^_^

 

JS實現滑鼠移上去圖片停止滾動移開恢複滾動效果