motion5

作者: Jadon7 | 来源:发表于2018-10-21 20:58 被阅读0次

motion5

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script>
    window.onload=function(){
        var aDiv=document.getElementsByTagName('div');
        for (let i = 0; i < aDiv.length; i++) {
            aDiv[i].timer=null;
            aDiv[i].onmouseover=function(){
                startMover(aDiv[i], 400,3)
            } 
            aDiv[i].onmouseout=function(){
                startMover(aDiv[i], 100,20)
            }  
        }
    }

    function startMover(acr,iTaget,sd){
        clearInterval(acr.timer);
        acr.timer=setInterval(function(){
            var spead=0;
            spead=(iTaget-acr.offsetWidth)/sd;
            spead=spead>0?Math.ceil(spead):Math.floor(spead);
            if (acr.offsetWidth==iTaget) {
                clearInterval(acr.timer);
            } else {
                acr.style.width=acr.offsetWidth+spead+'px';
            }
        },17)
    }
</script>
<style>
    div{
        width: 100px;
        height: 20px;
        background: rgb(0, 255, 136);
        margin: 10px;
    }
</style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>