javascript中,如何让一个元素(比如div)运动起来呢?
设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 );
<style> div { width: 100px; height: 100px; background: red; position: absolute; left: 0px; } </style>
基本的结构:
<input type="button" value="动起来"/> <div id="box"></div>
当我们点击,这个按钮的时候,要让div运动起来,其实就是让div的left值持续变化,那么div就会产生运动效果,我们先让left改变,再让他持续改变
window.onload = function(){ var oBtn = document.querySelector( "input" ), oBox = document.querySelector( '#box' ); oBtn.onclick = function(){ oBox.style.left = oBox.offsetLeft + 10 + 'px'; } }
那么每当我点击按钮的时候,div的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px,也可以达到效果
function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } window.onload = function () { var oBtn = document.querySelector("input"), oBox = document.querySelector('#box'); oBtn.onclick = function () { oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px'; } }
offsetLeft与获取非行间样式left的值 有什么区别呢?
offsetLeft没有px单位,而left是有px单位的
oBtn.onclick = function () { // alert( css( oBox, 'left' ) ); //0px alert( oBox.offsetLeft ); //0 }
现在div是点击一下动一下,我们让他持续动起来,怎么做? 加上定时器
oBtn.onclick = function () { setInterval( function(){ oBox.style.left = oBox.offsetLeft + 10 + 'px'; }, 1000 / 16 ); }
当我们点击按钮时候,div就会不停的向左运动,怎么让他停下来呢?停下来,肯定是需要条件的,比如,我们让他跑到500px的时候停下来
var timer = null; oBtn.onclick = function () { timer = setInterval( function(){ if ( oBox.offsetLeft == 500 ) { clearInterval( timer ); }else { oBox.style.left = oBox.offsetLeft + 10 + 'px'; } }, 1000 / 16 ); }
这样,我们就可以让div停在500px的位置,这里如果我们把步长10 改成 7或者8,你会发现停不下来了,为什么呢?因为会跳过500px这个判断条件