JS-多物体运动2(不同物体做不同的运动)
2017-08-29 17:29
253 查看
效果描述:当鼠标放在第一个Li上时,高度由200Px变成400PX,当鼠标移开高度恢复成之前的;
当鼠标放在第二个LI上时,宽度由100PX变成400PX,当鼠标移开宽度恢复成之前的。
代码如下:
当鼠标放在第二个LI上时,宽度由100PX变成400PX,当鼠标移开宽度恢复成之前的。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS多物体动画</title> <style> body{ margin: 0; padding: 0; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid; } </style> <script> /* ---用此方法基本功能能实现,但是代码有太多的冗余,所以第二种方法代码更加简化----- window.onload = function () { var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover =function () { startMove(this,400); } Li1.onmouseout = function () { startMove(this,100); } Li2.onmouseover =function () { startMove1(this,400); } Li2.onmouseout = function () { startMove1(this,200); } } function getStyle(obj,attr) { //currentStyle针对IE浏览器 if(obj.currentStyle){ return obj.currentStyle[sttr]; } //getComputedStyle针对firefox浏览器 else{ return getComputedStyle(obj,false)[attr]; } } //var timer = null; function startMove(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { //var icur = parseInt(getStyle(obj,'width')); var icur = parseInt(getStyle(obj,'height')); var speed = (iTarget-icur)/8; speed = speed >0?Math.ceil(speed):Math.floor(speed); if(icur == iTarget){ clearInterval(obj.timer); } else { //obj.style.width = icur+speed+'px'; obj.style['height'] = icur+speed+'px'; } 4000 },30) } function startMove1(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { //var icur = parseInt(getStyle(obj,'width')); var icur = parseInt(getStyle(obj,'width')); var speed = (iTarget-icur)/8; speed = speed >0?Math.ceil(speed):Math.floor(speed); if(icur == iTarget){ clearInterval(obj.timer); } else { //obj.style.width = icur+speed+'px'; obj.style['width'] = icur+speed+'px'; } },30) }*/ //功能完全相同的代码,只需要把不同的参数传进去便好,因此只需要添加一个attr属性,就可以把上面代码简化成为如下 window.onload = function () { var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover =function () { startMove(this,'height',400); } Li1.onmouseout = function () { startMove(this,'height',100); } Li2.onmouseover =function () { startMove(this,'width',400); } Li2.onmouseout = function () { startMove(this,'width',200); } } function getStyle(obj,attr) { //currentStyle针对IE浏览器 if(obj.currentStyle){ return obj.currentStyle[sttr]; } //getComputedStyle针对firefox浏览器 else{ return getComputedStyle(obj,false)[attr]; } } //var timer = null; function startMove(obj,attr,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var icur = parseInt(getStyle(obj,attr)); var speed = (iTarget-icur)/8; speed = speed >0?Math.ceil(speed):Math.floor(speed); if(icur == iTarget){ clearInterval(obj.timer); } else { obj.style[attr] = icur+speed+'px'; } },30) } </script> </head> <body> <ul> <li id="li1"></li> <li id="li2"></li> </ul> </body> </html>
相关文章推荐
- Js运动动画系列7--多物体运动-设置样式属性做不同的运动
- js实现多物体不同运动框架
- js多物体不同运动框架(标签样式)
- js多物体不同运动
- js物体运动-图标向上运动再从下方出现运动到原位置
- js完美多物体运动框架(缓冲运动)
- 用js实现同一页面多个不同运动效果2
- JS-多物体运动(所有物体做相同的运动)
- js-多物体运动框架
- js多个物体运动问题2
- js多物体运动框架
- Js运动动画系列5--多物体运动-透明度
- (36)JS运动之使物体向右运动
- 学习js运动多个物体宽度变化笔记
- js动画---多物体运动
- js多物体任意值运动
- JS运动之多物体框架--多个div变宽
- js运动技术--多物体同时运动
- 不同物体分步运动
- 简单的JS多物体的运动---运动和透明度的变化