`
jiajunli
  • 浏览: 6298 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

js变速运动特效

 
阅读更多 
以下代码为简单特例:

<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>

 

 

分享到：
| 页面中多个倒计时（仿电商列表页面产品倒计 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics