通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以。个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果。
注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了。
函数里面有几个参数解释一下,
"color: #ff0000">代码比较简单,只是有几个细节需要注意,在这里提醒一下:
"background-color: #ccffcc">js
function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; function getStyle(obj, arr) { if(obj.currentStyle){ return obj.currentStyle[arr]; //针对ie } else { return document.defaultView.getComputedStyle(obj, null)[arr]; } } obj.timer = setInterval(function(){ //j ++; var flag = true; for(var arr in json) { var icur = 0; //k++; if(arr == "opacity") { icur = Math.round(parseFloat(getStyle(obj, arr))*100); } else { icur = parseInt(getStyle(obj, arr)); } var speed = (json[arr] - icur) * sp; speed = speed > 0 "opacity"){ obj.style.filter = "alpha(opacity : '+(icur + speed)+' )"; obj.style.opacity = (icur + speed)/100; }else { obj.style[arr] = icur + speed + "px"; } //console.log(j + "," + arr +":"+ flag); } if(flag){ clearInterval(obj.timer); //console.log(j + ":" + flag); //console.log("k = " + k); //console.log("j = " + j); //console.log("DONE"); if(fn){ fn(); } } },interval); }
调用方式:
<script> var move = document.getElementById("move").getElementsByTagName("li"); for(var i = 0; i < move.length; i ++){ move[i].onmouseover = function(){ var _this = this; animate(_this, {width: 500, height: 200},10, 0.01, function(){ animate(_this, {width: 300, height: 200},10, 0.01); }); } } </script>
以上这篇原生js实现jquery函数animate()动画效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
原生js,animate
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“原生js实现jquery函数animate()动画效果的简单实例”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍