利用JS定时器让元素实现移动 |
您所在的位置：网站首页 › vb用定时器控制标签移动 › 利用JS定时器让元素实现移动 |
利用JS定时器让元素实现移动
|
利用JS定时器做一个元素做一个有移动效果的方法，实现思路：首先声明一个变量存放元素距离左侧的边距，然后我们在声明一个变量存放每次元素需要移动的距离，然后再给这个方法一个完成时间就可以了。需要注意的是获取到的值如果不是数值型的数据需要装换，否则不能进行判断。再判断一下该元素移动到某个位置之后，步长给它一个负值，该元素就会往回跑了。 大家还可以想一想元素移动到左右侧的时候如何实现转身效果。 *{margin: 0;padding: 0;} body{position: relative;} #box{ width: 120px;height: 120px;background: green; position: absolute;top: 100px; /* 此处可以引入一个背景图作为移动的目标, */ /* background: url(img/paobu_huaban.png) 0 0/100% 100%; */ } 点我移动 var Button = document.getElementById("Button"); var box = document.getElementById("box"); // 每次移动多少像素，step表示步长 var step = 5; Button.onclick = function(){ var timer = setInterval(function(){ //获取box的left值,转成整数，一定要转化为数值行在做运算， // parseInt表示将获取到的字符串转化为字符型 var o_left = parseInt(box.style.left); //想要元素走的更快可以改变加大每次移动的距离或者是减少完成时间也可以 //但是减少完成时间这样的效果要好一点 var n_left = o_left+step; //每次向右移动10px box.style.left = n_left+"px"; if ( n_left>500) { //如果移动的距离大于400px就往回跑 step = -5; }else if(n_left==0){ step = 5; }; },100); };运行结果如下： |
【本文地址】
今日新闻 |
推荐新闻 |