js动画-速度变化

最新推荐文章于 2022-03-23 21:00:08 发布

weixin_30374009

最新推荐文章于 2022-03-23 21:00:08 发布

阅读量131

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lexie/p/6667609.html

版权

HTML部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312"/>
<title>js动画-速度变化</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
</head>
<body>

    <div id="box">
        <span>移动</span>
    </div>

</body>
</html>

CSS部分：

 * {
            margin: 0;
            padding: 0;
            font-family:"微软雅黑"
        }
        #box{
            height:100px;
            width:100px;
            background-color:#0099CC;
            margin-top:200px;
            position:relative;
            /*速速变化*/
            left:-100px;
        }
        span{
            display:block;
            color:blue;
            width:25px;
            height:100px;
            background-color:#FFFF99;
            position:absolute;
            left:100px;
        }

JS部分：

window.οnlοad=function(){
    var div1=document.getElementById("box");
    div1.οnmοuseοver=function(){
        startMove(0);
    }
    div1.οnmοuseοut=function(){
        startMove(-100);
        
    }
}
    var timer=null;
    function startMove(itarget){
        clearInterval(timer);
        var div1=document.getElementById("box");
        timer=setInterval(function(){
            var speed=0;
            if(div1.offsetLeft>itarget){
                speed=-10;
            }else{
                speed=10;
            }
            if(div1.offsetLeft==itarget){
                clearInterval(timer);    
            }else{
                div1.style.left=div1.offsetLeft+speed+"px";
            }
        },30)
    }

转载于:https://www.cnblogs.com/lexie/p/6667609.html

weixin_30374009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动画-速度变化

HTML部分：<!DOCTYPE html><html><head><meta charset="gb2312"/><title>js动画-速度变化</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"&...
复制链接

扫一扫