本文实例讲述了js运动特效之任意值添加运动的方法。分享给大家供大家参考,具体如下:
回顾一下上个例子js实现多物体运动的方法:
<script> window.onload = function(){ var litags = document.getelementsbytagname('li'); for(var i=0;i<litags.length;i++){ litags[i].timer = null;// 给每个li都添加一个timer litags[i].onmouseover = function () { startmove(this,400); } litags[i].onmouseout = function () { startmove(this,200); } } } function getstyle(obj,attr){ return getcomputedstyle ? getcomputedstyle(obj,false)[attr] : obj.currentstyle[attr]; } function startmove(obj,itarget) { clearinterval(obj.timer); obj.timer = setinterval(function () { var objwidth = parseint(getstyle(obj,'width'));//因为是通过[]调用属性,所以width必须加单引号 // var ispeed = (itarget -obj.offsetwidth)/10; // 因为objwidth存放的就是当前对象的宽,所以直接写objwidth而不是obj.objwidth var ispeed = (itarget -objwidth)/10; ispeed = ispeed>0 ?math.ceil(ispeed):math.floor(ispeed); if(objwidth == itarget){ clearinterval(obj.timer); }else{ obj.style.width = objwidth+ispeed+'px'; } },30); } </script>
如果此时需求有变化,让第2个li鼠标移入,高度变化,第三个li鼠标依然边框,第四个li鼠标移入背景变化。一种办法就是复制几分startmove函数,分别把之前width变化改成height,borderwidht,和opacity透明度变化;但是这样显然浪费,可以把他们合并成一个函数,把变化的属性作为参数传进去就好了.
1. function startmove(obj,attr,itarget) 函数里新增attr参数
2. 调用参数的方式:由obj.style.属性名 变成 obj.style[属性名]
3. 需要分别为每个li添加事件
<script> window.onload = function(){ var litags = document.getelementsbytagname('li'); for(var i=0;i<litags.length;i++){ litags[i].timer = null;// 给每个li都添加一个timer litags[0].onmouseover = function () { startmove(this,'width',400); } litags[0].onmouseout = function () { startmove(this,'width',200); } litags[1].onmouseover = function () { startmove(this,'height',100); } litags[1].onmouseout = function () { startmove(this,'height',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(this,'padding',0); } } } function getstyle(obj,attr){ return getcomputedstyle ? getcomputedstyle(obj,false)[attr] : obj.currentstyle[attr]; } function startmove(obj,attr,itarget) {//attr:把变化的属性最为参数传入 clearinterval(obj.timer); obj.timer = setinterval(function () { var objattr = parseint(getstyle(obj,attr)); var ispeed = (itarget -objattr)/10; ispeed = ispeed>0 ?math.ceil(ispeed):math.floor(ispeed); if(objattr == itarget){ clearinterval(obj.timer); }else{ //obj.style.width = objwidth+ispeed+'px'; obj.style[attr] = objattr+ispeed+'px';// 需要又.属性名的形式改成[] } },30); } </script>
运行一下发现,改变宽,高,border都妥妥的,但是最后一个改变“透明度”没反应,是什么问题那??
首先opacity的值0.3一个小数,parseint(getstyle(obj,attr)
之后便变成0,还有最大的一个问题就是最后属性值设置的时候:obj.style[attr] = objattr+ispeed+'px';
显然opacity并没有px这个单位,所以需要对运动框架做进一步处理
需要判断一下,当接受的参数是“透明度”的时候,需要单独处理一下,把上面出问题的两个地方做一下处理
var objattr = 0; if(attr == "opacity"){ // 由于计算机对 小数的处理有问题,这里用math.round处理一下 // objattr = parsefloat(getstyle(obj,attr)*100); //objattr = parseint(parsefloat(getstyle(obj,attr))*100); objattr = math.round(parsefloat(getstyle(obj,attr))*100); }else{ objattr = parseint(getstyle(obj,attr)); }
如果不做处理直接 objattr = parsefloat(getstyle(obj,attr)*100);
由于计算机不能很精确的处理小数,会导致一些问题
用parseint这种方法:objattr = parseint(parsefloat(getstyle(obj,attr))*100);
也可以处理小数,但是经过测试在鼠标移出的时候,与原来状态有一点偏差
可以看出,当鼠标移出去的时候,opacity应该回到1,可结果却是0.94 ;所以个人推荐用math.round
四舍五入函数来处理这里的小数问题
做一下判断,下面也同样做判断
if(attr == "opacity"){ obj.style.filter = 'alpha(opacity:'+(objattr+ispeed)+')'; obj.style.opacity = (objattr+ispeed)/100; }else{ //obj.style.width = objwidth+ispeed+'px'; obj.style[attr] = objattr+ispeed+'px';// 需要又.属性名的形式改成[] }
完整代码:
html部分
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body>
css部分:
<style> ul{list-style: none;} ul li{ margin: 10px; width: 200px;height: 50px; border: 2px solid #c00; background: lightblue; } </style>
js部分
<script> window.onload = function(){ var litags = document.getelementsbytagname('li'); for(var i=0;i<litags.length;i++){ litags[i].timer = null;// 给每个li都添加一个timer litags[0].onmouseover = function () { startmove(this,'width',400); } litags[0].onmouseout = function () { startmove(this,'width',200); } litags[1].onmouseover = function () { startmove(this,'height',100); } litags[1].onmouseout = function () { startmove(this,'height',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(this,'opacity',100); } } } function getstyle(obj,attr){ return getcomputedstyle ? getcomputedstyle(obj,false)[attr] : obj.currentstyle[attr]; } function startmove(obj,attr,itarget) {//attr:把变化的属性最为参数传入 clearinterval(obj.timer); obj.timer = setinterval(function () { var objattr = 0; if(attr == "opacity"){ // 由于计算机对 小数的处理有问题,这里用parsefloat转一下 objattr = math.round(parsefloat(getstyle(obj,attr))*100); }else{ objattr = parseint(getstyle(obj,attr)); } var ispeed = (itarget -objattr)/10; ispeed = ispeed>0 ?math.ceil(ispeed):math.floor(ispeed); if(objattr == itarget){ clearinterval(obj.timer); }else{ if(attr == "opacity"){ obj.style.filter = 'alpha(opacity:'+(objattr+ispeed)+')'; obj.style.opacity = (objattr+ispeed)/100; }else{ //obj.style.width = objwidth+ispeed+'px'; obj.style[attr] = objattr+ispeed+'px'; } } },30); } </script>
最后结果演示:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!
网友评论