JS运动特效之同时运动实现方法分析_javascript技巧_脚本之家

貌似能够说说话看看玉女了。可是首席实行官猛然说,令你同一时间更正三个实体的宽高和发光度,心碎了一地!!!

function startMove

仰望本文所述对大家JavaScript程序设计有所扶持。

更加多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript运动功用与技艺汇总》、《JavaScript切换特效与能力计算》、《JavaScript查找算法才干总计》、《JavaScript动画特效与技艺汇总》、《JavaScript错误与调治能力总计》、《JavaScript数据构造与算法本领总计》、《JavaScript遍历算法与技能总计》及《JavaScript数学生运动算用法计算》

诸如大家想要改造宽,高,折射率,那么就把他们归入JSON :
{width:300,height:300,opacity:30}

前边的startMove(State of Qatar函数里都以传播三个attr属性,在传唱二个iTarget指标值,不过我们有个JSON这些神器之后,大家能够把质量和对象值,一对对放在JSON里,然后再startMove里只传入json来代表以前的attr和iTarget

总体育项目质量评定试代码如下:

拿过此前的位移框架发现,无法落到实处让div同一时候又变宽,又变高,有变折射率!!最终力无法及,只能有请JSON大神出场了,不认得json的同伙们就找度娘问一下吗!

本文实例汇报了JS运动特效之同期活动完毕格局。共享给大家供我们参照他事他说加以调查,具体如下:

有地点的弹出结果可以见到,json里的widht,height,opacity正是相应的质量名字,200,300,30对此的正是指标值,遍历这一个json对象,能够看来attr就相应的是种种属性名,而json[attr]就对应各样目的值,看见此间应该就大约知道怎么改正了吗!

到此处我们的移动框架差十分少左近完美了,然而还应该有二个小难点,什么难题那?下回继续

2.随时在机械漏刻里遍历那一个json看看都什么属性须要改换

先轻巧的测量检验证贝拉米(Bellamy卡塔尔国(Beingmate卡塔尔国下json

 #div1{ width: 200px;height: 200px; background: green; }

 window.onload = function(){ var oDiv = document.getElementById; oDiv.onmouseover = function () { startMove(oDiv,{width:300,height:300,opacity:30}); } oDiv.onmouseout = function () { startMove(oDiv,{width:200,height:200,opacity:100}); } } function getStyle{ return getComputedStyle ? getComputedStyle[attr] : obj.currentStyle[attr]; } function startMove {//json代替了原来的attr和iTarger参数 clearInterval; obj.timer = setInterval { for{ var objAttr = 0; if{ // 由于for in里的key名字是attr所以这里不用替换 objAttr = Math.round(parseFloat*100); }else{ objAttr = parseInt; } var iSpeed = /10;// 由之前的iTarget替换成了json[attr] iSpeed = iSpeed>0 ?Math.ceil:Math.floor; if(objAttr == json[attr]){ clearInterval{// 如果传了 “下一个运动的函数” 就执行 fn(); } }else{ if{ obj.style.filter = 'alpha(opacity:'+'; obj.style.opacity = /100; }else{ obj.style[attr] = objAttr+iSpeed+'px'; } } } },30); }
 var json = {width:200,height:300,opacity:30}; for{ alert("属性是:" + attr+ "--目标值"+json[attr]); }

任何时候上一篇 《JS运动特效之链式运动》继续折腾

接下来用for..in遍历这么些json就足以博得相应的性质和值了,那么在移动框架程序中该怎么改过那??

上一篇中我们的运动框架,能够圆满的得以达成让多个物体先变宽,在变高,在变发光度…..,看似很全面了!

function startMove {//fn:执行下一个运动的函数 clearInterval; obj.timer = setInterval { for{ //... 用key代替之前传入的属性,json[atrr]代替之前的目标值 // 也就是把之前startMove函数里的attr改写成key,iTarget改写成json[atrr] // 但是为了方便虽好把for in里的key的名字直接改写成attr就好了,for这样就不要一个个去改写startMove里的attr,省事 } },30);}
  1. 首先function startMove中attr,iTarget干掉,传入叁个json对象

    function startMove

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图