我想慢慢地将图像(或元素)从其实际的 X、Y 位置移动到 X1、Y1。
当。。。的时候distanceX 和 X1 之间is equalY 和 Y1 之间的那个很容易。
但是,如果 X 差异为 100 像素,Y 差异为 273 像素怎么办?
作为 Javascript 新手,我不想重新发明轮子!
此外,由于我正在学习,我不想使用 jQuery 或类似的东西。我想要纯JavaScript。
请提供简单的脚本:-)
一种解决方案:
function translate( elem, x, y ) {
var left = parseInt( css( elem, 'left' ), 10 ),
top = parseInt( css( elem, 'top' ), 10 ),
dx = left - x,
dy = top - y,
i = 1,
count = 20,
delay = 20;
function loop() {
if ( i >= count ) { return; }
i += 1;
elem.style.left = ( left - ( dx * i / count ) ).toFixed( 0 ) + 'px';
elem.style.top = ( top - ( dy * i / count ) ).toFixed( 0 ) + 'px';
setTimeout( loop, delay );
}
loop();
}
function css( element, property ) {
return window.getComputedStyle( element, null ).getPropertyValue( property );
}
现场演示: http://jsfiddle.net/qEVVT/1/ http://jsfiddle.net/qEVVT/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)