怎样用原生js配合css的transition写个无缝滚动

之所以想要写原生js配合css转换的无缝滚动，是因为之前在简书上看到一哥们写的一篇文章，说是在网上找了一堆js配合css transition属性写的轮播插件，可惜没有无缝的效果，结果他用原生js重写了一个可以无缝滚动的。好吧，我觉得这哥们的精神还是值得表扬的，只是原生实现略显麻烦，也很难把握性能（利用定时器写的动画很容易有性能问题）。

原生JavaScript无缝轮播图特效附上链接方便大家一同对比学习

其实原生js配合css转换写个无缝滚动要比直接用原生js写起来简单得多，而且性能非常好。希望通过这篇文章能起到抛砖引玉的笑果！哈哈哈哈，二话不说，上码！！！

首先附上相应的HTML和CSS：

html

<div class="box"><ul id="box"><li>158****546已购买1个月</li><li>158****546已购买2个月</li><li>158****546已购买3个月</li><li>158****546已购买4个月</li><li>158****546已购买5个月</li><li>158****546已购买1个月</li></ul></div>
复制代码

css

     .box{width: 300px;height: 40px;overflow: hidden;border: 1px solid rebeccapurple;}.box>ul{margin: 0;padding: 0;}.box>ul>li{list-style-type: none;width: 300px;height: 40px;line-height: 40px;}.count{font-size: 24px;}
复制代码

细心的朋友可能会发现HTML上面首尾两个li是一样的（哈哈哈，就是说明一下它俩是一样的）上图！！啊哈哈哈哈，将就看一下，我画了好久的。这里为了节约空间就横着放了，下面的例子的滚动是向上走的。

当焦点位于图片1的副本（即红框那个1）时，那一瞬间让整个列表回到初始的位置，即第一个1在红框内。对，最后面这个副本1就是为了让用户产生视觉差。

下面开始编写相应的js，先写一个构造函数，然后把获取的id以及向上滑动的数值作为私有变量写死在构造函数里面：

function sliderBox() {var list = document.getElementById('box'),newPosition = 0,  //这里以ul作为位移目标，newPosition为ul每次的位置offset = -40;   //每次要上移的数值（先默认为上移）
}
复制代码

然后在构造函数里面写一个私有函数

function animate () {newPosition+=offset;list.style.transition = "transform 0.6s";list.style.transform = "translateY(" + newPosition + "px)";if (newPosition < -160) {setTimeout(function () {newPosition = 0;list.style.transition = "";list.style.transform = "translateY(0)";}, 600);}}
复制代码

我们今天要说的是无缝滚动，到底在哪体现出无缝呢？上面的代码怎么多出了一行list.style.transition？为什么不直接写死在ul上面呢？因为这就是用原生js配合css转换写无缝滚动的关键所在！！

当列表静悄悄地重一开始滑到第五个的时候，这是newPosition刚好等于-160，也就是说ul的translateY为-160，这时候再来那么一下，这么一下照常的会执行这三行：

newPosition+=offset;
list.style.transition = "transform 0.6s";
list.style.transform = "translateY(" + newPosition + "px)";
复制代码

是的，就在这一下的transition过渡完的那一瞬间，setTimeout可以执行了。没错，就跟前面画的图一样，setTimeout里面的意思就是要让ul回到最起始的位置。

这里需要注意的是，setTimeout的延迟时间和transition的过渡时间必须保持一致，这里就是保持无缝的最关键所在了。

到这里就算是讲完了，其实没多少东西，理解了就很简单。最后祭上代码

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box{width: 300px;height: 40px;overflow: hidden;border: 1px solid rebeccapurple;}.box>ul{margin: 0;padding: 0;}.box>ul>li{list-style-type: none;width: 300px;height: 40px;line-height: 40px;}.count{font-size: 24px;}</style>
</head>
<body><div class="box"><ul id="box"><li>158****546已购买1个月</li><li>158****546已购买2个月</li><li>158****546已购买3个月</li><li>158****546已购买4个月</li><li>158****546已购买5个月</li><li>158****546已购买1个月</li></ul></div><script src="./slider2.js"></script><script>window.onload = function () {sliderBox();}</script>
</body>
</html>
复制代码

function sliderBox() {var list = document.getElementById('box'),newPosition = 0,offset = -40;if (!(this instanceof sliderBox)) {return new sliderBox().init();}this.init = function () {setInterval(animate, 3000);};function animate () {newPosition+=offset;list.style.transition = "transform 0.6s";list.style.transform = "translateY(" + newPosition + "px)";if (newPosition < -160) {setTimeout(function () {newPosition = 0;list.style.transition = "";list.style.transform = "translateY(0)";}, 600);}}
}
复制代码

在下文笔拙劣，有什么不清楚或者有出入的地方，烦请斧正！欢迎留言！也希望能给我点赞，鼓励我写出更好的文章。

怎样用原生js配合css的transition写个无缝滚动相关推荐

原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
JS配合css实现slide文字框缩放伸展效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
原生JS设置CSS样式有多少方式
文章导航 element.style element.style.cssText 有什么区别原生 JS 调整样式方式有 3 种. element.style 属性需要使用驼峰形式 !importan ...
使用原生js和css制作钟表(附源码)
最近学到css和js,用css和js制作了一个钟表,原理很简单,在js中定义管理秒针.分针.时针的函数,在秒针函数中让角度自加6,每隔一秒调用一次就完事.预看效果请点我(主要实现功能,界面不太美观) ...
原生js+div+css，动态画结构图/流程图
前面用highchart尝试画了一次,但是因为种种因素,还是用js+div+css实现起来比较方便. 代码如下,可直接复制粘贴. html部分: <!doctype html> <h ...
原生js、css分别实现提示框渐渐消失的效果
效果展示: 方法一:(js) 思路:通过js修改dom的visibility.opacity的属性来实现效果. <div id="remind">{{ changeSt ...
css原生样式支持,原生JS读写CSS样式的方法
通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性如:elm.setAttribute('style','c ...
用原生JS读写CSS样式的方法总结
一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式如:var elm = document.getElementById('test ...

怎样用原生js配合css的transition写个无缝滚动

怎样用原生js配合css的transition写个无缝滚动相关推荐

最新文章

热门文章