封装运动框架实战左右与上下滑动的焦点轮播图(实例)

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了封装运动框架实战左右与上下滑动的焦点轮播图(实例)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

在这篇文章

中，封装了一个匀速运动框架，我们在这个框架的基础之上，加上缓冲运动效果，然后用运动框架来做幻灯片（上下，左右）。

缓冲运动通常有两种常见的表现：比如让一个div从0运动到500，一种是事件触发的时候，速度很快， 一种是事件触发的时候慢，然后慢慢加快.我们来实现先块后慢的，常见的就是开车，比如刚从高速路上下来的车，就是120km/小时，然后进入匝道，变成40km/时. 或者40km/小时进入小区，最后停车，变成0km/小时. 从120km/小时->40km/小时， 或者40km->0km/小时，都是速度先块后慢，这种运动怎么用程序来表示呢？

可以用目标距离( 500 ) - 当前距离( 200 ) / 一个系数( 比如12 )，就能达到速度由块而慢的变化，当前距离在起点，分子(500 - 0 )最大，所以速度最大，如果当前距离快要接近500，分子最小，除完之后的速度也是最小。

div{ width: 200px; height: 200px; background:red; position: absolute; left: 0px; } Box">
但是，div并不会乖乖地停止在500px这个目标位置，最终却是停在497.375px，只要查看当前的速度，当前的值就知道原因了

你会发现，速度永远都在0.375这里停着，获取到的当前的距离停在497px？ 这里有个问题，我们的div不是停在497.375px吗，怎么获取到的没有了后面的小数0.375呢？计算机在处理浮点数会有精度损失。我们可以单独做一个小测试:

Box">

你会发现这段代码获取到左偏移是30px而不是行间样式中写的30.2px。因为在获取当前位置的时候，会舍去小数，所以速度永远停在0.375px,位置也是永远停在497，所以，为了到达目标，我们就得把速度变成1，对速度向上取整( Math.ceil )，我们就能把速度变成1，div也能到达500

0 ) { speed = Math.ceil( speed ); } console.log( speed,oBox.offsetLeft ); oBox.style.left = oBox.offsetLeft + speed + 'px'; },30 ); }

第二个问题，如果div的位置是在900，也就是说从900运动到500，有没有这样的需求呢？ 肯定有啊，轮播图，从右到左就是这样的啊。

#Box{ width: 200px; height: 200px; background:red; position: absolute; left: 900px; } Box">
最后目标停在503.5px，速度这个时候是负值，最后速度停在-0.5，对于反方向的速度，我们就要把它变成-1，才能到达目标，所以用向下取整（Math.floor）

0 ) { speed = Math.ceil( speed ); }else { speed = Math.floor( speed ); } console.log( speed,30 ); }

然后我们把这个缓冲运动整合到匀速运动框架，就变成：

function animate(obj,fn) {
clearInterval(obj.timer);
var cur = 0;
var target = 0;
var speed = 0;
obj.timer = setInterval(function () {
var bFlag = true;
for (var key in attr) {
if (key == 'opacity ') {
cur = css(obj,'opacity') * 100;
} else {
cur = parseInt(css(obj,key));
}
target = attr[key];
speed = ( target - cur ) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != target) {
bFlag = false;
if (key == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")";
} else {
obj.style[key] = cur + speed + "px";
}
}
}
if (bFlag) {
clearInterval(obj.timer);
fn && fn.call(obj);
}
},30 );
}

有了这匀速运动框架，我们就来做幻灯片：

上下幻灯片的html样式文件：

<Meta charset="UTF-8"> slide - by ghostwu

  • slide3.css文件：

    animate.js文件:

    slide.js文件：

    Slide.prototype.bind = function () {
    var that = this;
    for (var i = 0; i < this.aLi.length; i++) {
    this.aLi[i].index = i;
    this.aLi[i].onmouSEOver = function () {
    that.moveTop( this.index );
    }
    }
    }

    Slide.prototype.moveTop = function (i) {
    this.index = i;
    for( var j = 0; j < this.aLi.length; j++ ){
    this.aLi[j].className = '';
    }
    this.aLi[this.index].className = 'active';
    animate( this.oImgContainer,{
    "top" : -this.index * 450,"left" : 0
    });
    }

    var oSlide = new Slide();
    oSlide.bind();

    }

    左右幻灯片只需要改下样式即可

    样式文件：

    js调用文件：

    Slide.prototype.bind = function () {
    var that = this;
    for (var i = 0; i < this.aLi.length; i++) {
    this.aLi[i].index = i;
    this.aLi[i].onmouSEOver = function () {
    that.moveLeft( this.index );
    }
    }
    }

    Slide.prototype.moveLeft = function (i) {
    this.index = i;
    for( var j = 0; j < this.aLi.length; j++ ){
    this.aLi[j].className = '';
    }
    this.aLi[this.index].className = 'active';
    animate( this.oImgContainer,{
    "left" : -this.index * 800
    });
    }

    var oSlide = new Slide();
    oSlide.bind();

    }

    以上这篇封装运动框架实战左右与上下滑动的焦点轮播图(实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

    原文链接：https://www.f2er.com/js/35793.html
    封装运动框架

    猜你在找的JavaScript相关文章

    Javascript中的事件冒泡与捕获
    事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
    搞懂js中小数运算精度问题原因及解决办法
    js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
    搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
    什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
    前端对base64编码的理解，原生js实现字符base64编码
    @ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
    搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
    搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
    js判断浏览器是否支持webGL
    起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
    js判断undefined和null
    js判断undefined js判断null js判断null和undefined
    将文字自动转为banner打印形式的工具
    http://patorjk.com/software/taag/
    聊一聊 bootstrap 的轮播图插件
    今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
    js实现图片无缝循环跑马灯
    html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作