JS运动特效之任意值添加运动的方法分析

本文实例讲述了射流研究…运动特效之任意值添加运动的方法。分享给大家供大家参考，具体如下：

回顾一下上个例子射流研究…实现多物体运动的方法：

脚本窗口。onload=function(){ var liTags=document。getelementsbytagname(' Li ')；for(var I=0；军事集团。长度；i ){ liTags[i].定时器=null/给每个里都添加一个定时器理想国.onmouseover=function(){ startMove(this，400)；} liTags[i].onmouseout=function(){ startMove(this，200)；} } }函数getStyle(obj，attr){返回getComputedStyle？getComputedStyle(obj，false)[attr]: obj。current style[attr]；}函数startMove(obj，iTarget){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var objWidth=parsent(getStyle(obj，' width '))))；//因为是通过[]调用属性，所以宽度必须加单引号//var iSpeed=(itar get-obj。offset withts)/10；//因为objWidth存放的就是当前对象的宽，所以直接写objWidth而不是物体。objWidth var iSpeed=(itar get-objWidth)/10；iSpeed=iSpeed0？数学。最高时速：楼层(I速)；if(ObjWidth==itar get){ ClearInterval(obj。计时器)；} else { obj。风格。width=Objwidth isPeed ' px} },30);}/脚本如果此时需求有变化，让第2个里鼠标移入，高度变化，第三个里鼠标依然边框，第四个里鼠标移入背景变化。一种办法就是复制几分开始移动函数，分别把之前宽度变化改成高度，边框宽度，和不透明透明度变化；但是这样显然浪费，可以把他们合并成一个函数，把变化的属性作为参数传进去就好了。

1.函数开始移动函数里新增属性参数2.调用参数的方式：由风格。属性名变成风格属性名]3.需要分别为每个里添加事件

脚本窗口。onload=function(){ var liTags=document。getelementsbytagname(' Li ')；for(var I=0；军事集团。长度；i ){ liTags[i].定时器=null/给每个里都添加一个定时器liTags[0].onmouseover=function(){ startMove(this，' width '，400)；} liTags[0].onmouseout=function(){ startMove(this，' width '，200)；} liTags[1]。onmouseover=function(){ start move(这个，‘高度’，100)；} liTags[1]。onmouseout=function(){ start move(这个，‘身高’，50)；} liTags[2].onmouseover=function(){ startMove(this，' borderWidth '，10)；} liTags[2].onmouseout=function(){ startMove(this，' borderWidth '，2)；} liTags[3].onmouseover=function(){ startMove(this，' padding '，10)；} liTags[3].onmouseout=function(){ startMove(此处为“填充”，0)；} } }函数getStyle(obj，attr){返回getComputedStyle？getComputedStyle(obj，false)[attr]: obj。current style[attr]；}函数startMove(obj，attr，iTarget) {//attr:把变化的属性最为参数传入clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var objAttr=parsent(getStyle(obj，attr))；var iSpeed=(itar get-objAttr)/10；iSpeed=iSpeed0？数学。最高时速：楼层(I速)；if(ObJattr==itarGet){ ClearInterval(obj。计时器)；} else {//obj。风格。width=Objwidth isPeed ' px物体。style[attr]=Objattr isPeed ' px '；//需要又。属性名的形式改成[] } },30);}/脚本运行一下发现，改变宽，高，边框都妥妥的，但是最后一个改变"透明度"没反应，是什么问题那？

首先不透明的值0.3一个小数，parseInt(getStyle(obj，attr)之后便变成0,还有最大的一个问题就是最后属性值设置的时候：obj。style[attr]=Objattr isPeed ' px '；显然不透明并没有像素这个单位，所以需要对运动框架做进一步处理

需要判断一下，当接受的参数是"透明度"的时候，需要单独处理一下，把上面出问题的两个地方做一下处理

var Objattr=0；if(attr=='不透明度'){ //由于计算机对小数的处理有问题，这里用数学。回合处理一下//objAttr=parseFloat(getStyle(obj，attr)* 100)；//objAttr=parsent(parseFloat(getStyle(obj，attr))* 100)；objAttr=数学。round(parseFloat(getStyle(obj，attr))* 100)；} else { Objatr=ParSeint(GetStyle(obj，attr))；}如果不做处理直接objAttr=parseFloat(getStyle(obj，attr)* 100)；由于计算机不能很精确的处理小数，会导致一些问题

用parseInt这种方法：ObJattr=ParSeint(ParSefloat(GetStyle(obj，attr))* 100)；也可以处理小数，但是经过测试在鼠标移出的时候，与原来状态有一点偏差

可以看出，当鼠标移出去的时候不透明度应该回到1,可结果却是0.94 ;所以个人推荐用数学。回合四舍五入函数来处理这里的小数问题

做一下判断，下面也同样做判断

if(attr=='不透明度){ obj。风格。filter=' alpha(opa city 3360 '(Objattr isPeed)')'；物体。风格。不透明度=(Objattr isPeed)/100；} else {//obj。风格。width=Objwidth isPeed ' px物体。style[attr]=Objattr isPeed ' px '；//需要又。属性名的形式改成[]}完整代码：

超文本标记语言部分

身体ul Li/Li Li/Li Li/Li Li/Li/ul/身体CSS部分：

样式ul {列表式：无；} ul li { margin: 10px宽度： 200像素；高度： 50pxborder: 2px实心# c00背景：浅蓝色；}/stylejs部分

脚本窗口。onload=function(){ var liTags=document。getelementsbytagname(' Li ')；for(var I=0；军事集团。长度；i ){ liTags[i].定时器=null/给每个里都添加一个定时器liTags[0].onmouseover=function(){ startMove(this，' width '，400)；} liTags[0].onmouseout=function(){ startMove(this，' width '，200)；} liTags[1]。onmouseover=function(){ start move(这个，‘高度’，100)；} liTags[1]。onmouseout=function(){ start move(这个，‘身高’，50)；} liTags[2].onmouseover=function(){ startMove(this，' borderWidth '，10)；} liTags[2].onmouseout=function(){ startMove(this，' borderWidth '，2)；} liTags[3].onmouseover=function(){ startMove(this，' opacity '，30)；} liTags[3].onmouseout=function(){ startMove(此处为'不透明度',100);} } }函数getStyle(obj，attr){返回getComputedStyle？getComputedStyle(obj，false)[attr]: obj。current style[attr]；}函数startMove(obj，attr，iTarget) {//attr:把变化的属性最为参数传入clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var objAttr=0；if(attr=='不透明度'){ //由于计算机对小数的处理有问题，这里用字符串转一下objAttr=数学。round(parseFloat(getStyle(obj，attr))* 100)；} else { Objatr=ParSeint(GetStyle(obj，attr))；} var iSpeed=(itar get-objAttr)/10；iSpeed=iSpeed0？数学。最高时速：楼层(I速)；if(ObJattr==itarGet){ ClearInterval(obj。计时器)；}else{ if(attr=='不透明度){ obj。风格。filter=' alpha(opa city 3360 '(Objattr isPeed)')'；物体。风格。不透明度=(Objattr isPeed)/100；} else {//obj。风格。width=Objwidth isPeed ' px物体。style[attr]=Objattr isPeed ' px '；} } },30);}/脚本最后结果演示：

更多对JavaScript相关内容感兴趣的读者可以查看本网站的主题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。