JS轮播图中缓动函数的封装-js教程-PHP中文网

首页

web前端

js教程

JS轮播图中缓动函数的封装

高洛峰

Jan 16, 2017 pm 02:37 PM

轮播图的根本其实就是缓动函数的封装，如果说轮播图是一辆跑动的汽车，那么缓动函数就是它的发动机，今天本文章就带大家由简入繁，封装属于自己的缓动函数~~

我们从需求的角度开始，首先给出一个简单需求：

1、我想让页面中的一个盒子从开始的位置匀速向右运动到200px的地方，该怎么实现？

分析：

1）我们需要知道盒子在哪个地方，这个可以通过offsetLeft属性去获取；

2）要让盒子匀速运动，对于js肯定需要setInterval了；

3）要让盒子向右边跑起来？那就是需要不停改变盒子与左边起始点的距离，有margin-left，还有定位的left，这里我选择了改变绝对定位的left；

4）跑到离开始点200px的距离我们要停下来，使用clearInterval就可以了。

接下来直接上代码了　　

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   div {
    position: absolute;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
   }
   input {
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: yellowgreen;
   }
 
  </style>
 </head>
 
 <body>
  <div></div>
  <input type="button" value="移动到200" />
 
 
  <script type="text/javascript">
   // 获取到元素（这里有个小细节，如果给元素设置了id名，即便不使用获取元素的方法，也能通过这个id名获取到元素哦~~大家可以自己尝试一下）
   var btn = document.querySelector(&#39;input&#39;),
     dv = document.querySelector(&#39;div&#39;);
   // 添加点击事件
   btn.addEventListener(&#39;click&#39;,function() {
    var timer = null,// 保存定时器
      currentDistance = dv.offsetLeft, // 当前离父盒子的距离
      step = 8,// 每次改变的距离
      target = 200;// 目标距离
    timer = setInterval(function() {
     currentDistance += step;// 当前距离 = 上一个当前距离 + 改变的距离
     if((target - currentDistance) < step) { 
      currentDistance = target; // 如果目标距离与当前距离的差小于了要改变的距离，这时候我们就直接让当前距离等于目标距离，防止盒子停下来的时候有误差
      clearInterval(timer); // 清楚定时器
      timer = null; // 将timer解绑，释放内存
     }
     dv.style.left = currentDistance + &#39;px&#39;; // 最核心的一步，改变盒子的left为当前距离
    },17)
   })
  </script>
 </body>
</html>

登录后复制

2、一个初步运动的效果实现了，那么接下来我们改进了需求：

盒子运动到200px的位置后，我们要让盒子继续运动到400px的位置？

分析：

1）、这时候要有两个按钮点击，一个运动到200px，一个运动到400px

2）、虽然有两个运动，但是其使用的功能都是一样，都是从一个点移动到另一个点，所以我们考虑将1中的运动封装一个函数，以供复用。

上代码~　　　

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <style type="text/css">
 * {
  margin: 0;
  padding: 0;
 }
 div {
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
 }
 input {
  width: 100px;
  height: 30px;
  color: #fff;
  background-color: yellowgreen;
 }
 
 </style>
</head>
 
<body>
 <div></div>
 <input type="button" value="移动到200" />
 <input type="button" value="移动到400" />
 <script type="text/javascript">
 // 封装函数，盒子和目标距离都是不确定的，我们可以将他们作为参数传递。
 function animation(tag,target) {
  var timer = null,
   currentDistance = tag.offsetLeft,
   step = 5;
  step = currentDistance < target? step: -step;// 判断step的正负，200到400时是递增，400到200时是递减
  timer = setInterval(function() {
  if(Math.abs(currentDistance - target) > Math.abs(step)) { // 这里判断条件也要略作改动，使用绝对值进行比较
   currentDistance += step; /
   tag.style.left = currentDistance + &#39;px&#39;;
  }else {
   tag.style.left = target + &#39;px&#39; // 当当前距离与目标距离之间的差值小于step改变的距离时，我们直接让盒子移动到目标距离。
   clearInterval(timer);
   timer = null;
  }
  },17)
 }
 var btns = document.querySelectorAll(&#39;input&#39;),
  dv = document.querySelector(&#39;div&#39;);
 btns[0].addEventListener(&#39;click&#39;,function() {
  animation(dv,200);
 })
 btns[1].addEventListener(&#39;click&#39;,function() {
  animation(dv,400);
 })
 </script>
</body>
</html>

登录后复制

3、盒子来回运动的函数我们封装好了，但是我们再想一下轮播图的滚动效果，它并不是匀速移动，而是最开始很块，在接近滚动完成时，速度又逐渐减低。

需求：让盒子缓动（也就是变速运动）　

上代码~　　　　

function animation(tag,target) {
  var timer = null;
  timer = setInterval(function() {
  var currentDistance = tag.offsetLeft,
   step = (target - currentDistance) / 5;// 通过目标距离与当前距离的差除以5便达到了我们需要的变速运动，因为step每次定制器执行都要改变，所以放入定时器内
  step = step > 0 ? Math.ceil(step):Math.floor(step);// 这里如果将currentDistance定时器外面声明可以不用写，如果放在定时器内声明，因为offsetLeft取整的特性，要对step进行取整
  if(Math.abs(currentDistance - target) > Math.abs(step)) {
   currentDistance += step;
   tag.style.left = currentDistance + &#39;px&#39;;
  }else {
   tag.style.left = target + &#39;px&#39;
   clearInterval(timer);
   timer = null;
  }
  },17)

登录后复制

好了，一个轮播图需要的最基本的缓动函数完成了~

这里补充一个比较完整的缓动函数：它的功能更全面一点，可以同时更改多样式。

function perfectAnimate(tag, obj, fn) {// 传三个参数，运动的盒子，对象（可以传多个属性），回调函数（在执行完后可以再执行自定义的功能）
 clearInterval(tag.timer);// 这里将定时器作为tag标签的属性保存，可以多次调用函数清除上一个定时器。
 tag.timer = setInterval(function () {
  var flag = true;
  for (var k in obj) {
　　　　　　　// 因为并不是所有属性都带px单位，所以这里进行判断分别设置 
   if (k == &#39;opacity&#39;) {
    var currentDistance = getStyle(tag, k) * 100,
     target = obj[k] * 100,
     step = (target - currentDistance) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    currentDistance += step;
    tag.style[k] = currentDistance / 100;
   } else if (k == &#39;zIndex&#39;) {
    tag.style[k] = obj[k];
   else {
    var currentDistance = parseInt(getStyle(tag, k)) || 0,
     target = obj[k],
     step = (target - currentDistance) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    currentDistance += step;
    tag.style[k] = currentDistance + &#39;px&#39;;
   }
   if (target != currentDistance) {
    flag = false // 只要还有属性没有运动完成，就不会清楚定时器
   }
  }
  if (flag) {
   clearInterval(tag.timer)
   fn && fn();// 所有定时器走完，这里执行回调函数，短路操作避免不传回调函数也不会报错。
  }
 }, 17)
}

登录后复制

// 获取样式的兼容函数，上面的缓动函数的依赖
function getStyle(tag, attr) {
 if (tag.currentStyle) {
  return tag.currentStyle[attr];
 } else {
  return getComputedStyle(tag, null)[attr];
 }
}

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多JS轮播图中缓动函数的封装相关文章请关注PHP中文网！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7694

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。