网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JavaScript代码实现左右上下自动晃动自动移动
内容
    最近几天做了一个项目，原来是用css3动画做的，由于不兼容IE，改成用js做了，特此分享给大家，供大家参考，代码有bug欢迎提出，写的不好还请见谅!
    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>float left and top</title>
    <style type="text/css">
    .w1000{position:relative;width:1000px;margin:0 auto;}
    .positionpub{position:absolute;}
    .positionpub p{width:50px;height:50px;background:#333;color:#fff;line-height:50px;text-align:center;position:absolute;}
    .ad_Float{top:50px;left:50px;}
    .ad_Float1{top:150px;left:250px;}
    .ad_Float2{top:250px;left:450px;}
    </style>
    </head>
    <body>
    <div>
    <div>
    <p id="ad_Float">left</p>
    </div>
    <div>
    <p id="ad_Float1">right</p>
    </div>
    <div>
    <p id="ad_Float2">down</p>
    </div>
    </div>
    <script type="text/javascript">
    var x = 0, y = 0 , x1 = 0;
    var xin = true, yin = true;
    var step = 1,step2 = 2;
    var delay = 10;
    var obj = document.getElementById("ad_Float");
    var obj1 = document.getElementById("ad_Float1");
    var obj2 = document.getElementById("ad_Float2");
    function ad_Float() {
    var L = 0;
    var R = 100;
    obj.style.left = x + document.documentElement.scrollLeft + "px";
    x = x + step * (xin ? 1 : -1);
    if (x < L) {
    xin = true;
    x = L;
    }
    if (x > R) {
    xin = false;
    x = R;
    }
    };
    function ad_Float1() {
    var L1 = 0;
    var R1 = 100;
    obj1.style.left = x1 + document.documentElement.scrollLeft + "px";
    x1 = x1 + step * (xin ? 1 : -1);
    if (x1 < L1) {
    xin = true;
    x1 = L1;
    }
    if (x1 > R1) {
    xin = false;
    x1 = R1;
    }
    };
    function ad_Float2() {
    var T = 0;
    var B = 150;
    obj2.style.top = y + document.documentElement.scrollTop + "px";
    y = y + step2 * (yin ? 1 : -1);
    if (y < T) {
    yin = true;
    y = T;
    }
    if (y > B) {
    yin = false;
    y = B;
    }
    };
    var itl = setInterval("ad_Float()", delay);
    var itl1 = setInterval("ad_Float1()", delay);
    var itl2 = setInterval("ad_Float2()", delay);
    </script>
    </body>
    </html>
    代码到此结束了，希望对大家有所帮助！
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/21 14:22:59