资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JS运动特效之任意值添加运动的示例分析

这篇文章主要介绍JS运动特效之任意值添加运动的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

深圳网站建设公司创新互联建站,深圳网站设计制作,有大型网站制作公司丰富经验。已为深圳上千多家提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱,请找那个售后服务好的深圳做网站的公司定做!

具体如下:

回顾一下上个例子JS实现多物体运动的方法:

JS运动特效之任意值添加运动的示例分析

如果此时需求有变化,让第2个li鼠标移入,高度变化,第三个li鼠标依然边框,第四个li鼠标移入背景变化。一种办法就是复制几分startMove函数,分别把之前width变化改成height,borderWidht,和opacity透明度变化;但是这样显然浪费,可以把他们合并成一个函数,把变化的属性作为参数传进去就好了.

1. function startMove(obj,attr,iTarget) 函数里新增attr参数
2. 调用参数的方式:由obj.style.属性名 变成 obj.style[属性名]
3. 需要分别为每个li添加事件

运行一下发现,改变宽,高,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); 由于计算机不能很精确的处理小数,会导致一些问题

JS运动特效之任意值添加运动的示例分析

用parseInt这种方法:objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以处理小数,但是经过测试在鼠标移出的时候,与原来状态有一点偏差

JS运动特效之任意值添加运动的示例分析

可以看出,当鼠标移出去的时候,opacity应该回到1,可结果却是0.94 ;所以个人推荐用Math.round四舍五入函数来处理这里的小数问题

JS运动特效之任意值添加运动的示例分析

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

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部分


      
  •   
  •   
  •   

css部分:

js部分

最后结果演示:

 JS运动特效之任意值添加运动的示例分析

以上是“JS运动特效之任意值添加运动的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


标题名称:JS运动特效之任意值添加运动的示例分析
网站网址:http://cdkjz.cn/article/jdidpd.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220