這篇文章主要介紹了JS如何實現(xiàn)可用滑塊滑動的緩動，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計,響應(yīng)式網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:13518219792
嘗試模仿京東的“發(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代碼
