深入解析原生Js轮播动画

2018年1月9日13:30:39 发表评论 40

在学习原生Js的时候,学习过Bule老师的一套原生Js视频教程,我个人认为这是我学过的最好的一套Js教程,没有之一,2年前我就看过这套教程中的一部分,也做过教程中的练习,每一节课中都有一个小实例,看js基础太枯燥的可以试试看这套教程,Blue老师循循善诱,讲课风格非常适合新手学习。我们今天要学习的是blue老师18课讲的flash轮播动画效果,也是我在这套课程以来碰到的最难懂的一个,不过今天我又重新写了一遍代码,感觉比起以前我应该是领悟透了。

深入解析原生Js轮播动画

一、原生Js轮播动画预览

关于Html布局和css美化这两个我就不述说了,这是前端的基础,如果你不会写这个轮播的布局,那你就相当于2年前的我,只懂了点前端皮毛,那不足以指望亮点技术找到一门开发工作,如果你复制粘贴那么你只会在这条路上越走越远 ,不啰嗦了,我们进入正题。

二、深入解析js轮播动画

项目需求:

  1. 大图鼠标移入移出按钮
  2. 小图移入移出淡入淡出
  3. 上下张按钮点击大图小图切换
  4. 点击小图大图跟着我切换
  5. 大小图定时切换

总的来说有这五个大的需求,还有一些小的细节,比如说点击小图,当前小图透明度为1,其它为0之类的细节,解决上面需求之前我们还要做个重要的事:写运动框架。

三、多物体运动框架

这里说的框架是我们自己写的js原生动画框架,框架的功能可以使某个元素的任意属性运动起来,变成动画。所提到的概念:

  • 定时器:规定某个元素定时运动。创建定时器用setInterval(function, time)函数,关闭使用clearInterval()函数
  • 数字运算:用到了取整数parseInt(),浮点数parseFloat(),向上舍入Math.ceil(),向下舍入Math.floor()
  1. // 多物体运动框架
  2. function startMove(obj, attr, iTarget) {
  3.     // 关闭当前物体的定时器
  4.     clearInterval(obj.timer);
  5.     obj.timer = setInterval(function() {
  6.         // obj attr属性的值变量
  7.         var cur = 0;
  8.         if(attr == 'opacity') {
  9.             // opacity是小数,所以取浮点数*100
  10.             cur = Math.round(parseFloat(getStyle(obj, attr))*100);
  11.         }
  12.         else {
  13.             cur = parseInt(getStyle(obj, attr));
  14.         }
  15.         // 设置物体运动速度,出现小数点向上向下取整
  16.         var speed = (iTarget - cur)/10;
  17.         speed = speed>0?Math.ceil(speed):Math.floor(speed);
  18.         if(cur == iTarget) {
  19.             clearInterval(obj.timer);
  20.         }
  21.         else {
  22.             if(attr == 'opacity') {
  23.                 obj.style.filter = 'alpha(opacity:' + (cur+speed) + ')';
  24.                 obj.style.opacity = (cur + speed)/100;
  25.             }
  26.             else {
  27.                 obj.style[attr] = cur + speed +'px';
  28.             }
  29.         }
  30.     }, 30)
  31. }

上面用到了了一个获取class attr属性值函数:

  1. // 获取class元素的函数
  2.     function getByClass(oParent, sClass) {
  3.         var aEle = oParent.getElementsByTagName('*');
  4.         var aClass = [];
  5.         for (var i = 0; i < aEle.length; i++) {
  6.             if (aEle[i].className == sClass) {
  7.                 aClass.push(aEle[i]);
  8.             }
  9.         }
  10.         return aClass;
  11.     }
  12.     // 获取class属性值的函数
  13.     function getStyle(obj, name) {
  14.         if (obj.currentStyle) {
  15.             return obj.currentStyle[name];
  16.         } else {
  17.             return getComputedStyle(obj, false)[name];
  18.         }
  19.     }

下面可以来具体说说每个功能的实现了:

1. 大图鼠标移入移出按钮

主要提及的概念:onmouseover()onmouseout()opacity

用到了上面的运动框架和获取class元素的函数

  1. // 上下张按钮
  2.         prevBtn.onmouseover = leftMark.onmouseover = function() {
  3.             startMove(prevBtn, 'opacity', 100);
  4.         };
  5.         prevBtn.onmouseout = leftMark.onmouseout = function() {
  6.             startMove(prevBtn, 'opacity', 0);
  7.         };
  8.         nextBtn.onmouseover = rightMark.onmouseover = function() {
  9.             startMove(nextBtn, 'opacity', 100);
  10.         };
  11.         nextBtn.onmouseoutr = rightMark.onmouseout = function() {
  12.             startMove(nextBtn, 'opacity', 0);
  13.         };

2. 小图移入移出淡入淡出

主要提及的概念:如上,外面要套上一个循环

  1. smallLi[i].onmouseover = function() {
  2.                 startMove(this, 'opacity', 100);
  3.             }
  4.             smallLi[i].onmouseout = function() {
  5.                 if (this.index != now) {
  6.                     startMove(this, 'opacity', 60);
  7.                 }
  8.             }

3. 上下张按钮点击大图小图切换

主要提及的概念:如上,增加zidexlengthoffsetWith等,主要用到了tab()这个函数

  1. function tab() {
  2.             bigLi[now].style.zIndex = nowZIndex++;
  3.             for (var i = 0; i < smallLi.length; i++) {
  4.                 startMove(smallLi[i], 'opacity', 60);
  5.             }
  6.             startMove(smallLi[now], 'opacity', 100);
  7.             bigLi[now].style.opacity = 0;
  8.             startMove(bigLi[now], 'opacity', 100);
  9.             if (now == 0) {
  10.                 // 如果是第1张图
  11.                 startMove(smallUl, 'left', 0);
  12.             } else if (now == smallLi.length - 1) {
  13.                 // 如果是最后1张图
  14.                 startMove(smallUl, 'left', -(now - 2) * smallLi[0].offsetWidth);
  15.             } else {
  16.                 startMove(smallUl, 'left', -(now - 1) * smallLi[0].offsetWidth);
  17.             }
  18.         }
  19.         prevBtn.onclick = function() {
  20.             now--;
  21.             if (now == -1) {
  22.                 now = smallLi.length - 1;
  23.             }
  24.             tab();
  25.         };
  26.         nextBtn.onclick = function() {
  27.             now++;
  28.             if (now == smallLi.length) {
  29.                 now = 0;
  30.             }
  31.             tab();
  32.         };

4.  点击小图大图跟着我切换

主要提及的概念:也是用的tab()函数

  1. for (var i = 0; i < smallLi.length; i++) {
  2.             smallLi[i].index = i;
  3.             smallLi[i].onclick = function() {
  4.                 // 如果是第一张图,直接返回
  5.                 if (this.index == now) return;
  6.                 // now为当前图的index
  7.                 now = this.index;
  8.                 tab();
  9.             }
  10.         }

5. 大小图定时切换

主要提及的概念:定时器模拟点击上下张按钮

  1. var timer = setInterval(nextBtn.onclick, 2000);
  2.         oDiv.onmouseover = function() {
  3.             clearInterval(timer);
  4.         };
  5.         oDiv.onmouseout = function() {
  6.             timer = setInterval(nextBtn.onclick, 2000);
  7.         };

总结:第一次制作代码类的教程,不知道如何下手,所以有很多地方解释不到位,也不知道如何向你们说明,如果有什么说错的或者理解错误的地方,麻烦说明告知,谢谢各位!

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: