HTML元素动画实现-优快云博客


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>
        tt
    </title>
    <style type="text/css">
        div#top {
            position: relative;
            top: 50px;
            left: 200px;
            z-index: 10;
            width: 200px;
            height: 200px;
            background-color: red;
        }

        div#top button {
            margin-left: 50px;
        }
    </style>
</head>

<body style="aqua;overflow-x:hidden;">
<script type="text/javascript">
    var left1 = -280;
    var left2 = -280;
    var top = 40;
    var i = 0;
    var j = 0;
    var set;
    var set2;
    function dong() {
        document.getElementById("img1").style.left = (left1 + i) + 'px';
        i = i + 10;
        set = setTimeout('dong();', 100);
        if (i == 1010) {
            other();
        }
        if (i == 1280) {
            clearTimeout(set);
            document.getElementById("img1").style.left = left1 + 'px';
            i = 0;
        }
    }

    function other(type) {
        document.getElementById("img2").style.left = (left2 + j) + 'px';
        j = j + 10;
        set2 = setTimeout('other();', 100);
        if (j == 1010) {
            dong();
        }
        if (j == 1280) {
            clearTimeout(set2);
            document.getElementById("img2").style.left = left2 + 'px';
            j = 0;
        }

    }
    function zanting() {
        clearTimeout(set);
        clearTimeout(set2);
    }
    function stop() {
        clearTimeout(set);
        clearTimeout(set2);
        i = 0;
        j = 0;
        document.getElementById("img2").style.left = left2 + 'px';
        document.getElementById("img1").style.left = left1 + 'px';
    }
    function jixu() {
        if (j > 0) {
            set2 = setTimeout('other();', 100);
        }
        if (i > 0) {
            set = setTimeout('dong();', 100);
        }

    }


</script>
<div id="top">
    <button type="button" onclick="dong();">click me</button>
    <button type="button" onclick="stop();">stop me</button>
</div>
<div id="img1" style="position:absolute;top:300px;left:-280px;border:1px solid black;z-index:10;">
    <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" onmouseover="zanting();" onmouseout="jixu();"/>
</div>
<div id="img2" style="position:absolute;top:300px;left:-280px;border:1px solid black;z-index:10;">
    <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" onmouseover="zanting();" onmouseout="jixu();"/>
</div>
</body>
</html>

修改后


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>
        tt
    </title>
    <style type="text/css">
        div#top {
            position: relative;
            top: 50px;
            left: 200px;
            z-index: 10;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div#top button {
            margin-left: 50px;
        }
    </style>
</head>

<body style="overflow-x:hidden;width:1280px;">
<script type="text/javascript">
    var left1 =0;
    var i = 0;
    var set;
    function dong() {
        document.getElementById("img").style.left = (left1 + i) + 'px';
        i = i + 10;
        set = setTimeout('dong();', 100);
        if (i == 1010) {
            document.getElementById("img").style.left=0+'px';
            i=0;
        }
    }
</script>
<div id="top">
    <button type="button" onclick="dong();">click me</button>
</div>
<div id="img" style="position:absolute;top:300px;left:0px;height:300px;">
<div id="img1" style="position:absolute;top:0px;left:0px;border:1px solid black;">
    <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" />
</div>
<div id="img2" style="position:absolute;top:0px;left:-1010px;border:1px solid red;">
    <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" />
</div>
</div>
</body>
</html>

运动雏形