这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
下面小编就为大家带来一篇原生 js 实现 jquery 函数 animate() 动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
通过在公司一个月的实习,慢慢的对 CSS 跟 html 算是比较熟悉了,这几天开始研究 js,今天用 js 写了一个 jquery 的 animate 函数,测试了下,性能还可以。个人觉得 jquery 并不是万能的,因为是个框架,所以有些东西写的比较死,就像 animate 函数一样,可选的参数不多有时候可能并不能实现我们想要的效果。
注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用 js 平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了。
函数里面有几个参数解释一下,
•obj, 函数的对象
•json, 数值对,形式 {attr:"value", attr:"value"},在这里是指要动画对象的运动属性
•interval, 每执行一次改变的间隔,这里改变的是对象是属性值
•sp, 值变换的速度,使动画具有缓冲效果,而不只是匀速不变(sp 为 1)的
•fn, 回调函数,执行完动画之后的行为
代码比较简单,只是有几个细节需要注意,在这里提醒一下:
• 对象的属性不必直接声明,所以函数的第一句 clearInterval(obj.timer); 并不会报错。
• 必须为每一个对象分别添加一个定时器,否则互相会影响,一个定时器公用的结果是定时器的多个对象运动出现卡顿。
•son 数据格式了解一下,当遍历对象的动画属性的时候,需要 icur != json[arr] 判断是否每一个属性已经达到目标值。flag 的作用是防止当其中某个属性第一个达到目标值后,clearInterval(obj.timer) 清除了定时器,结果其他动画属性并没有达到目标值。所以在每次遍历的时候初始化 flag 值为 true,只要遇到一个没有达到目标属性的对象,就将 flag 置为 false,直至对象的所有属性达到目标值,清除定时器。
•speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
这一句的作用是将属性值取整,因为属性值除了 opacity 没有小数。
• 最后调用的时候注意动画的对象,在使用 for 循环的时候不能随意使用 arr[i] 形式,尤其是嵌套循环的时候 i 的值已经变成了最大值。
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 ? Math.ceil(speed) : Math.floor(speed);
- if (icur != json[arr]) {
- flag = false;
- }
- if (arr == "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() 动画效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0429/332432.html