js 实现多物体动画效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>ul,li{list-style: none;}ul li{width: 200px;height: 100px;background: yellow;//设置背景颜色margin-bottom: 20px;}</style><script>window.onload=function(){var aLi=document.getElementsByTagName('li');for(var i=0;i<aLi.length;i++){aLi[i].onmouseover=function(){startMove(this,400);}aLi[i].onmouseout=function(){startMove(this,200);}}}var timer=null;//设置定时器function startMove(obj,iTarget){clearInterval(timer);timer=setInterval(function(){var speed=(iTarget-obj.offsetWidth)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(obj.offsetWidth==iTarget){clearInterval(timer);}else{obj.style.width=obj.offsetWidth+speed+'px';}},30)}</script></head><body><ul><li></li><li></li><li></li></ul></body>
</html>

js 实现多物体动画效果相关推荐

js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
html盒子移动动画代码,js实现盒子移动动画效果
本文实例为大家分享了js实现盒子移动动画效果的具体代码,供大家参考,具体内容如下 content="width=device-width, user-scalable=no, initial ...
babylon.js小人快跑动画效果
babylon.js小人快跑动画效果 var createScene = function () {// This creates a basic Babylon Scene object (non- ...
html5行星环绕,Two.js实现星球环绕动画效果
Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁.本文主要介绍了基于Two ...
js闭包-实现打字机动画效果
简介闭包就是能够读取其他函数内部变量的函数.例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成"定义在一个函数内部的函数".在本质上,闭包是将 ...
js添加到购物车动画效果实现
方法一: 用js控制购车的的位置实现原理解析: 通过js动态生成一个过度元素(就是一个可以移动的小球),并控制该元素的位置移动,从点击按钮dom元素移动到购物车的dom元素,实现添加到购物车的动态效 ...
JS实现css属性动画效果
html代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
原生JS实现网页烟花动画效果——前端工程师必备技能！
原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现! CSS代码: [html] view plain copy *{ padding: 0px; margin: 0 ...
html盒子移动动画代码,js实现盒子滚动动画效果
Document *{ margin: 0; padding: 0; } .box1{ /* 必须加定位才可以动 */ position: absolute; left: 0; width: 50px ...

js 实现多物体动画效果

js 实现多物体动画效果相关推荐

最新文章

热门文章