您好,登錄后才能下訂單哦!
這篇文章主要介紹了JS如何實(shí)現(xiàn)可用滑塊滑動(dòng)的緩動(dòng),具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
嘗試模仿京東的“發(fā)現(xiàn)好貨”模塊的可用滑塊滑動(dòng)的緩動(dòng)圖
JS代碼
function $(id) { return document.getElementById(id); } //緩動(dòng)輪播圖 var fhTimer; var fhNum = 0; var barNum = 0; fhTimer = setInterval(marquee, 20); function marquee() { fhNum--; barNum = fhNum; if(fhNum < -2400) { fhNum = 0; } $("fhc_ul").style.left = fhNum + "px"; if(fhNum < -2400) { barNum = fhNum + 2400; } $("fhc_dBar").style.left = -(barNum / 2.75) + "px"; } $("fhcShow").onmouseover = function() { $("fhc_d_box").style.display = "block"; clearInterval(fhTimer); } $("fhc_d_box").onmouseover = function() { $("fhc_d_box").style.display = "block"; } $("fhcShow").onmouseout = function() { $("fhc_d_box").style.display = "none"; fhTimer = setInterval(marquee, 20); } //鼠標(biāo)懸浮在標(biāo)題也在暫停滾動(dòng) $("fhTit").onmouseover = function() { clearInterval(fhTimer); } $("fhTit").onmouseout = function() { fhTimer = setInterval(marquee, 20); } //滑塊 $("fhc_dBar").onmousedown = function(event) { var event = event || window.event; var leftValue = event.clientX - this.offsetLeft; document.onmousemove = function(event) { var evt = event || window.event; var locationX = evt.clientX - leftValue; if(locationX < 0) { locationX = 0; } else if(locationX > 960 - 99) { locationX = 960 - 99; } $("fhc_dBar").style.left = locationX + "px"; fhNum = -locationX * 2.75; //如果選中了,就取消選中,防止出現(xiàn)bug window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } document.onmouseup = function() { document.onmousemove = null;//取消注冊(cè)的這個(gè)事件 } }
HTML代碼
<div class="fxhh_ctt"> <div class="fh_c_show" id="fhcShow"> <ul class="fh_c_under" id="fhc_ul"> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品1</p> <img src="" alt=""> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="" alt=""> <p class="botTit">商品2</p> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品3</p> <img src="" alt=""> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="" alt=""> <p class="botTit">商品4</p> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品5</p> <img src="" alt=""> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="" alt=""> <p class="botTit">商品6</p> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品7</p> <img src="" alt=""> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="" alt=""> <p class="botTit">商品8</p> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品9</p> <img src="" alt=""> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="" alt=""> <p class="botTit">商品10</p> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品11</p> <img src="" alt=""> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="" alt=""> <p class="botTit">商品12</p> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品1</p> <img src="" alt=""> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="" alt=""> <p class="botTit">商品2</p> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品3</p> <img src="" alt=""> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="" alt=""> <p class="botTit">商品4</p> </a></li> <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <p class="topTit">商品5</p> <img src="" alt=""> </a></li> </ul> </div> <!-- 滑塊 --> <div class="fhc_box" id="fhc_d_box"> <div class="fhc_drop" id="fhc_dBar"></div> </div> <!-- 滑塊end --> </div> CSS代碼 .fxhh .fxhh_ctt { width: 990px; background-color: #fff; float: left; } .fxhh .fxhh_ctt .fh_c_show .fh_c_under img { width: 150px; height: 150px; } .fxhh .fxhh_ctt .fh_c_show { width: 990px; height: 260px; background-color: #fff; overflow: hidden; position: relative; } .fxhh .fxhh_ctt .fh_c_show .fh_c_under { width: 2000%; position: absolute; } .fxhh .fxhh_ctt .fh_c_show .fh_c_under li { float: left; text-align: center; width: 150px; height: 180px; margin-top: 40px; margin-right: 50px; } .fxhh .fxhh_ctt .fh_c_show .fh_c_under li .topTit { margin-bottom: 10px; } .fxhh .fxhh_ctt .fh_c_show .fh_c_under li .botTit { margin-top: 10px; } .fxhh .fxhh_ctt .fhc_box { display: none; width: 960px; height: 4px; background-color: #f3f3f3; margin: 0 auto; position: absolute; top: 250px; left: 210px; } .fxhh .fxhh_ctt .fhc_drop { width: 99px; height: 9px; border-radius: 4px; background-color: #d8d8d8; position: absolute; top: -3px; }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JS如何實(shí)現(xiàn)可用滑塊滑動(dòng)的緩動(dòng)”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(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)容。