求大神帮忙看看为什么没有移动进去?

来源:2-1 JS速度动画

奶油面包

2016-04-15 18:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
body{margin:0px;
padding:0px;}
#div1{
    width:200px;
    height:300px;
    background-color:red;
    position:relative;
    left:-200px;
    top:75px;}
    #div1 span{
        background-color:blue;
        position:absolute;
        left:200px;
        top:175px;}
</style>
<script>
    window.onload=function(){
        var ddiv=document.getElementById("div1");
        ddiv.onmouseover=function(){
            startMove();}
        }
        var timer=null;
        function startMove(){
            clearInterval(timer);
            var ddiv=document.getElementById("div1");
            timer=setInterval(function(){
                if(ddiv.offsetLeft==0){
                    clearInterval(timer);}
                    else{
                ddiv.style.left=ddiv.offsetLeft+10+"px";
                    }
                    },30);
        }
    ddiv.onmouseout=function(){
        startMove1();}
        function startMove1(){
            clearInterval(timer);
            var ddiv=document.getElementById("div1");
            timer=setInterval(function(){
                if(ddiv.offsetLeft==-200){
                    clearInterval(timer);}
                    else{
                ddiv.style.left=ddiv.offsetLeft-10+"px";
                    }
                    },30);
        }
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id='div1'><span id='share'>分享</span></div>
</body>
</html>

写回答 关注

2回答

  • 奶油面包
    2016-04-15 18:47:32

    我的计时器触发没有放到window.onload里面去。

  • 奶油面包
    2016-04-15 18:46:28

    已经发现问题

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113931 学习 · 1443 问题

查看课程

相似问题