js变速运动特效-CSDN博客

本文链接：https://blog.csdn.net/iteye_15064/article/details/82613224

以下代码为简单特例:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>  
<script type="text/javascript">  
//1.向上取整,有小数就整数部分加1
//Math.ceil(5/2)  3
//2、向下取整（值不变的状态，防止动画效果出现中止的状态，例如：出现小数点时进行向下取整时）
//Math.floor(5/2)  2
    $(function(){
        $("#movebar").mouseover(function(){
            operatemove($(this),1000);
        });
    })
    var endTag = null;
    function operatemove(obj,targetWidth){
        if($(obj).width()<targetWidth){
            clearInterval(endTag);//防止启动多次Interval，出现停顿状态
            endTag = setInterval(function(){
                var width =$(obj).width();
                width+=Math.ceil((targetWidth-width)/280);
                if(width<=targetWidth){
                    $(obj).css("width",width+"px");
                    $(obj).html(width+"%");
                }else{
                    clearInterval(endTag);
                }
            },10);
        }
    }
</script>  
</head>  
<body>  
 鼠标移上变色div<br/>
    <div style="border:1px solid gray;width:1000px;">
        <div style="width:100px;height:30px;background-color: green;text-align:center;color:yellow;" id="movebar"></div>
    </div>
</body>