JS实现可用滑块滑动的缓动图

JS实现可用滑块滑动的缓动图

尝试模仿京东的“发现好货”模块的可用滑块滑动的缓动图

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);
}
//鼠标悬浮在标题也在暂停滚动
$("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