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

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

创新互联服务项目包括拜泉网站建设、拜泉网站制作、拜泉网页制作以及拜泉网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,拜泉网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到拜泉省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

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

分析:

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

 2)要让盒子匀速运动,对于js肯定需要setInterval了;

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

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

接下来直接上代码了



 
  
  Document
  
 

 
  

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

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

分析:

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

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

上代码~ 




 
 Document
 



 

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 + 'px';
  }else {
   tag.style.left = target + 'px'
   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 == 'opacity') {
    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 == 'zIndex') {
    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 + 'px';
   }
   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];
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


当前标题:JS轮播图中缓动函数的封装
分享地址:http://myzitong.com/article/pidjoh.html