您正在使用IPV4(34.204.180.223)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 建军节 3
2021年 七夕节 16
2022年 元 旦 156
2022年 春 节 187
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    利用JS定时器实现元素移动
    内容摘要: !DOCTYPEhtmlhtmlheadmetacharset='UTF-8'title/titlestyletype='text/css'*{margin:0;padding:0;}body{position:relative;}#box{width:120px;height:120px;background:green;position:absolute......
    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <title></title>

    <styletype="text/css">

    *{margin:0;padding:0;}

    body{position:relative;}

    #box{

    width:120px;height:120px;background:green;

    position:absolute;top:100px;

    /*此处可以引入一个背景图作为移动的目标,*/

    /*background:url(img/paobu_huaban.png)00/100%100%;*/

    }

    </style>

    </head>

    <body>

    <buttontype="button"id="Button">点我移动</button>

    <divid="box"style="left:0px;"></div>


    <scripttype="text/javascript">

    varButton=document.getElementById("Button");

    varbox=document.getElementById("box");

    //每次移动多少像素,step表示步长

    varstep=5;

    Button.onclick=function(){


    vartimer=setInterval(function(){


    //获取box的left值,转成整数,一定要转化为数值行在做运算,

    //parseInt表示将获取到的字符串转化为字符型

    varo_left=parseInt(box.style.left);

    //想要元素走的更快可以改变加大每次移动的距离或者是减少完成时间也可以

    //但是减少完成时间这样的效果要好一点

    varn_left=o_left+step;//每次向右移动10px

    box.style.left=n_left+"px";

    if(n_left>500){//如果移动的距离大于400px就往回跑

    step=-5;

    }elseif(n_left==0){

    step=5;

    };

    },100);

    };


    </script>

    </body>

    </html>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:vue实现同时设置多个倒计时 下一篇:JavaScript定时器实现无缝滚动图片
    发布日期:2021/7/21
    手机扫二维码直达本页
    发布时间:15:29:26
    点击:67
    录入:齐天大圣
    相关文章
    Baidu

    YiJiaCMS V5.9 Build 21.7.20(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021