JS运动特效之链式运动分析

本文实例讲述了射流研究…运动特效之链式运动。分享给大家供大家参考，具体如下：

接着前面一篇《JS运动特效之任意值添加运动的方法》 继续折腾

链式运动：一个运动接着一个运动。比如：鼠标移入差异先让宽变大，接着在让高变大，接着在让透明度变化等等一系列运动连着做。废话不多说，上栗子！

当鼠标移入差异的时候，div先变宽，在变高，然后改变透明度；移出又逐次恢复到原样；

实现链式运动，需要对上一篇中的开始移动()函数继续做改进

函数startMove(obj，attr，iTarget，fn)多传入一个【数学】函数参数，表示当一个运动结束之后，继续进行下一个运动，当然还需要判断一下，如果有下一个运动，就执行下一个运动，如果没有就继续向下执行

if(fn){ fn()；}完整测试代码：

超文本标记语言部分：

bodydiv id='div1'/div/bodycss部分：

样式# div1 { width: 200px高度： 200像素；背景：绿色；}/stylejs部分：

脚本窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；oDiv。onmouseover=function () { startMove(oDiv，' width '，300，function () { startMove(oDiv，' height '，300，function(){ start move(oDiv，' opacity '，30)；});});} oDiv。onmouseout=function(){ startMove(OdiV)'不透明度，100，function () { startMove(oDiv)'高度，200，function(){ start move(oDiv)'宽度',200);});});} }函数getStyle(obj，attr){返回getComputedStyle？getComputedStyle(obj，false)[attr]: obj。current style[attr]；}函数startMove(obj，attr，iTarget，fn) {//fn:执行下一个运动的函数clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var objAttr=0；if(attr=='不透明度'){ objAttr=math。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。计时器)；if(fn){//如果传了"下一个运动的函数"就执行fn()；} }else{ if(attr=='不透明度){ obj。风格。filter=' alpha(opa city 3360 '(Objattr isPeed)')'；物体。风格。不透明度=(Objattr isPeed)/100；} else { obj。style[attr]=Objattr isPeed ' px '；} } },30);}/脚本未完待续.

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript运动效果与技巧汇总》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。