JS實(shí)現(xiàn)可用滑塊滑動的緩動圖代碼
更新時間：2019年09月01日 08:50:54 作者：鱈魚堡
這篇文章主要介紹了JS實(shí)現(xiàn)可用滑塊滑動的緩動圖代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
嘗試模仿京東的“發(fā)現(xiàn)好貨”模塊的可用滑塊滑動的緩動圖
JS代碼
function $(id) { return document.getElementById(id); }
//緩動輪播圖
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)題也在暫停滾動
$("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;//取消注冊的這個事件
}
}
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;
}
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)可用滑塊滑動的緩動圖代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
behaviors是用于組件間代碼共享的特性, 類似一些編程語言中的'mixin'或者'traits',這篇文章主要介紹了微信小程序中的behaviors,需要的朋友可以參考下2024-08-08
JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級下拉菜單
我們在淘寶、搜狐等大型網(wǎng)站上都可以看到使用的一些二級下拉菜單，比如下面這張圖片。那么如何實(shí)現(xiàn)導(dǎo)航菜單欄中的二級下拉菜單呢？下面小編給大家分享JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級下拉菜單，感興趣的朋友一起看看吧2016-10-10
基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動態(tài)可視化
這篇文章主要介紹了基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動態(tài)可視化,文中給出了詳細(xì)的代碼,它適用于需要展示顏色信息或數(shù)據(jù)分布情況的場景,如設(shè)計、數(shù)據(jù)分析和教育領(lǐng)域,感興趣的朋友可以參考下2024-06-06
Bootstrap項目實(shí)戰(zhàn)之首頁內(nèi)容介紹（全）
本文分為兩部分介紹Bootstrap首頁內(nèi)容介紹的實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-04-04
vscode錄音及語音實(shí)時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記！
以目前的vscode版本來說，作者并沒有開放訪問本地媒體權(quán)限，所以插件市場里面的所有語音相關(guān)插件也并沒有直接獲取vscode的媒體權(quán)限，這篇文章主要介紹了vscode錄音及語音實(shí)時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記！,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)工作時間段選擇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了解決js中的setInterval清空定時器不管用問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
今天小編就為大家分享一篇layer彈出層自定義提交取消按鈕的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS是一門計算機(jī)編程語言，是一門動態(tài)語言也稱為腳本語言，是解析型編程語言。需要了解跟多2012-11-11
使用Math.max,Math.min獲取數(shù)組中的最值實(shí)例
下面小編就為大家?guī)硪黄褂肕ath.max,Math.min獲取數(shù)組中的最值實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04