1.0 缓动动画原理

思路：

  1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
  2. 核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长
  3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
  4. 步长值需要取整
  1. function animate(obj, target, callback) {
  2.     // console.log(callback);  callback = function() {}  调用的时候 callback()
  4.     // 先清除以前的定时器，只保留当前的一个定时器执行
  5.     clearInterval(obj.timer);
  6.     obj.timer = setInterval(function() {
  7.         // 步长值写到定时器的里面
  8.         // 把我们步长值改为整数 不要出现小数的问题
  9.         // var step = Math.ceil((target - obj.offsetLeft) / 10);
  10.         var step = (target - obj.offsetLeft) / 10;
  11.         step = step > 0 ? Math.ceil(step) : Math.floor(step);
  12.         if (obj.offsetLeft == target) {
  13.             // 停止动画 本质是停止定时器
  14.             clearInterval(obj.timer);
  15.             // 回调函数写到定时器结束里面
  16.             // if (callback) {
  17.             //     // 调用函数
  18.             //     callback();
  19.             // }
  20.             callback && callback();
  21.         }
  22.         // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
  23.         obj.style.left = obj.offsetLeft + step + 'px';
  25.     }, 15);
  26. }//ping写的

匀速动画 就是： 盒子是当前的位置 + 固定的值 10
缓动动画就是： 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长

步长公式：(目标值 - 现在的位置) / 10

2.0 轮播图

  1. <div class="main">
  2.         <div class="focus fl">
  3.             <!-- 左侧按钮 -->
  4.             <a href="javascript:;" class="arrow-l">
  5.                 &lt;
  6.             </a>
  7.             <!-- 右侧按钮 -->
  8.             <a href="javascript:;" class="arrow-r"> &gt; </a>
  9.             <!-- 核心的滚动区域 -->
  10.             <ul>
  11.                 <li>
  12.                     <a href="#"><img src="images/focus.jpg""></a>
  13.                 </li>
  14.                 <li>
  15.                     <a href=" #"><img src="images/focus1.jpg" alt=""></a>
  16.                 </li>
  17.                 <li>
  18.                     <a href="#"><img src="images/focus2.jpg" alt=""></a>
  19.                 </li>
  20.                 <li>
  21.                     <a href="#"><img src="images/focus3.jpg" alt=""></a>
  22.                 </li>
  23.             </ul>
  24.             <!-- 小圆圈 -->
  25.             <ol class=" circle">
  26.             </ol>
  27.         </div>
  28.     </div>
  1.    <script>
  2.         window.addEventListener('load', function () {
  3.             var zuo = document.querySelector('.arrow-l'); //左箭头
  4.             var you = document.querySelector('.arrow-r'); //右箭头
  5.             var box = document.querySelector('.focus'); //轮播图盒子
  6.             var boxWidth = box.offsetWidth; //图片的宽度
  7.             box.addEventListener('mouseover', function () { //鼠标经过显示
  8.                 zuo.style.display = 'block';
  9.                 you.style.display = 'block';
  10.                 clearInterval(timer);
  11.                 timer = null //清除定时器
  12.             })
  13.             box.addEventListener('mouseout', function () { //鼠标离开隐藏
  14.                 zuo.style.display = 'none';
  15.                 you.style.display = 'none';
  16.                 timer = setInterval(function () { //开启定时器
  17.                     you.click();
  18.                 }, 2000)
  19.             })
  21.             var ul = box.querySelector('ul');
  22.             var ol = box.querySelector('.circle');
  23.             for (var i = 0; i < ul.children.length; i++) { //动态生成li 多少图片多少li
  24.                 var li = document.createElement('li');
  25.                 li.setAttribute('index', i) //设置索引号
  26.                 ol.appendChild(li);
  29.                 li.addEventListener('click', function () { //小圆点添加点击事件
  30.                     for (var i = 0; i < ol.children.length; i++) { //排他思想，干掉别人留下自己
  31.                         ol.children[i].className = '';
  32.                     }
  33.                     this.className = 'current';
  34.                     //点击小圆圈 让ul 动起来  （移动图片）
  35.                     var index = this.getAttribute('index'); //获取索引号
  36.                     num = index; //点击了某个小li吧索引给num'
  37.                     cir = index; //点击了某个小li吧索引给cir
  38.                     animate(ul, -index * boxWidth);
  39.                 })
  40.             }
  41.             ol.children[0].className = 'current'; //ol的第一个孩子为白色
  42.             ul.appendChild(ul.children[0].cloneNode(true)); //克隆的li放到ul的后面
  44.             //点击you按钮 图片滚动
  45.             var num = 0;
  46.             var cir = 0; //控制小圆圈的播放
  47.             var flag = true; //节流阀
  48.             you.addEventListener('click', function () {
  49.                 if (flag) {
  50.                     flag = false; //关闭节流阀
  51.                     if (num == ul.children.length - 1) { //无缝滚动，当图片走到最后一张ul快速回到ul初始位置0
  52.                         ul.style.left = 0 + 'px';
  53.                         num = 0; //然后重新自加
  54.                     }
  55.                     num++;
  56.                     animate(ul, -num * boxWidth, function () {
  57.                         flag = true;
  58.                     });
  59.                     cir++; //控制小圆圈的播放
  60.                     if (cir >= ul.children.length - 1) { //克隆的图片走到这步就清零
  61.                         cir = 0
  62.                     }
  63.                     //清除小圆圈类名 留下当前个
  64.                     for (var i = 0; i < ol.children.length; i++) {
  65.                         ol.children[i].className = '';
  66.                     }
  67.                     ol.children[cir].className = 'current';
  68.                 }
  69.             })
  72.             zuo.addEventListener('click', function () {
  73.                 if (flag) {
  74.                     flag = false;
  75.                     if (num == 0) { //无缝滚动，当图片走到最后一张ul快速回到ul初始位置0
  76.                         num = ul.children.length - 1; //然后重新自加
  77.                         ul.style.left = -num * boxWidth + 'px';
  78.                     }
  79.                     num--;
  80.                     animate(ul, -num * boxWidth, function () {
  81.                         flag = true;
  82.                     });
  83.                     cir--; //控制小圆圈的播放
  84.                     if (cir < 0) { //克隆的图片走到这步就清零
  85.                         cir = ol.children.length - 1;
  86.                     }
  87.                     //清除小圆圈类名 留下当前个
  88.                     for (var i = 0; i < ol.children.length; i++) {
  89.                         ol.children[i].className = '';
  90.                     }
  91.                     ol.children[cir].className = 'current';
  92.                 }
  93.             })
  95.             //自动播放
  96.             var timer = setInterval(function () {
  97.                 you.click();
  98.             }, 2000)
  99.         })
  100.     </script>

3.0 触屏事件

  • 手指开始触摸到手机屏幕的时候 触发 一个 touchstart事件
  • 手指在屏幕上移动的时候 触发一个 touchmove事件
  • 手指离开屏幕那一刻 触发的事件 touchend事件
    触摸事件对象
  • 1、changedtouches 改变状态
  • 2、targettouches 当前元素对象 的手指触摸个数
  • 3、touches 触摸屏幕的时候手指的个数 | 触屏touch事件 | 说明 | | —- | —- | | touchstart | 手指开始触摸到手机屏幕的时候 触发一个 | | touchmove | 手指在屏幕上移动的时候 触发 | | touchend | 手指离开的那一刻触发 |

4.0 案例：移动端拖动元素

  1. touchstart、touchmove、touchend可以实现拖动元素
  2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
  3. 移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
  4. 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置

拖动元素三步曲：

（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置

（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子

（3） 离开手指 touchend:

注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

  1.  <script>
  2.         // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
  3.         // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
  4.         // （3） 离开手指 touchend:
  5.         var div = document.querySelector('div');
  6.         var startX = 0; //获取手指初始坐标
  7.         var startY = 0;
  8.         var x = 0; //获得盒子原来的位置
  9.         var y = 0;
  10.         div.addEventListener('touchstart', function(e) {
  11.             //  获取手指初始坐标
  12.             startX = e.targetTouches[0].pageX;
  13.             startY = e.targetTouches[0].pageY;
  14.             x = this.offsetLeft;
  15.             y = this.offsetTop;
  16.         });
  18.         div.addEventListener('touchmove', function(e) {
  19.             //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
  20.             var moveX = e.targetTouches[0].pageX - startX;
  21.             var moveY = e.targetTouches[0].pageY - startY;
  22.             // 移动我们的盒子 盒子原来的位置 + 手指移动的距离
  23.             this.style.left = x + moveX + 'px';
  24.             this.style.top = y + moveY + 'px';
  25.             e.preventDefault(); // 阻止屏幕滚动的默认行为
  26.             //如果不阻止，当粉色盒子滚出界面之后会出现滚动条
  27.         });
  28.     </script>//pink写的