JS realizes the slow motion diagram of sliding block

Time:2019-11-5

Try to imitate the slow motion diagram of the sliders available in the “find good” module of JD

JS code

function $(id) { return document.getElementById(id); }
//Slow motion carousel
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);
}
//Hovering over the title also pauses scrolling
$("fhTit").onmouseover = function() {
    clearInterval(fhTimer);
}
$("fhTit").onmouseout = function() {
    fhTimer = setInterval(marquee, 20);
}
// slider
$("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;
        //If checked, uncheck to prevent bugs
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
    document.onmouseup = function() {
        Document.onmousemove = null; // unregister this event
    }
}

HTML code

Commodity 1
                
            
            
                
                Commodity 2
            
            
                Commodity 3
                
            
            
                
                Commodity 4
            
            
                Commodity 5
                
            
            
                
                Commodity 6
            
            
                Commodity 7
                
            
            
                
                Commodity 8
            
            
                Commodity 9
                
            
            
                
                Commodity 10
            
            
                Commodity 11
                
            
            
                
                Commodity 12
            
            
                Commodity 1
                
            
            
                
                Commodity 2
            
            
                Commodity 3
                
            
            
                
                Commodity 4
            
            
                Commodity 5

CSS code

.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;
}

Recommended Today

The way of nonlinear optimization

Mathematical knowledge 1、 Nonlinear functionLinear function is another name of a function of first degree, then nonlinear function means that the function image is not a function of a straight line.Nonlinear functions include exponential function, power function, logarithmic function, polynomial function and so on. 2、 Taylor expansion1. Taylor formula:Taylor’s formula is to add a_ The […]