/yunchong_zhao/article/details/106387004 之前曾经用jquery 做过一个类似的 但是 随着时间的进行 发动翻动的速度越来越快 不是我想要的 因为是业务需要 肯定不能越来越快 这个是bug的
可能jquey 加上定时器 之间的异步执行 时间上出现的差错 导致 原来越快 总是跟预定的时间 不一定 一会快一会慢的 的
不管是用 setInterval 还是 setTimeout 甚至是 requestAnimation 都没有达到我想要的效果 最后参考jquery的插件库库中 使用原生js 实现下这个文字翻动 效果 /jquery-info23539参考的链接
大体采用原作者的思路， 我只是稍微改动了下 本来还想着用jquery 实现以下 想了想还是算了 不要依赖其他框架得好 不过 最后我还是附上jquery版本的哈
1. dom结构很简单
<div class="wordbox"><ul class="move"></ul></div>
2. 样式设置
* {margin: 0;padding: 0;}.wordbox {height: 50px;width: 500px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);text-align: center;background-image: linear-gradient(to bottom, #00a85f, #0ff);border-radius: 5px;overflow: hidden;}.wordbox .move {list-style: none;position: absolute;width: 100%;top: 0;left: 50%;transform: translateX(-50%);}.wordbox .move li {height: 50px;line-height: 50px;letter-spacing: 10px;cursor: pointer;}
然后就是 js 整理我搞了一个函数封装了下 用的小伙伴可以直接拿过去使用哈 js 我都加了注释 所以就不在这里一一讲解了
function tranlate(options) {var msg = options.msg || []; // 滚动的消息中的存储数组var container = options.container || '.move'; // 滚动的容器var speed = options.speed || 10; // 滚动的速度 默认50msvar mouse = options.mouse || false; // 是否添加鼠标悬浮暂停的事件var pause = options.pause || true; // 是否每个消息上 触发暂停var ul = document.querySelector(container)var pauseTime = options.pauseTime || 3000; //每个消息上暂停的事件var currentTop = parseInt(window.getComputedStyle(ul).top); // 当前容器向上滚动的距离var timer = null , timeout = null; // 定时器对象if(msg.length == 0) {alert('请传入存储消息的数组!');return false;}// 初始化元素var initEl = function() {msg.forEach((value) => {var li = document.createElement('li');li.innerHTML = value;ul.appendChild(li);})}// 文字滚动动画设置var run = function() {currentTop --;ul.style.top = currentTop + 'px';// 如果滚动的位置到 最后一个消息的时候 拷贝第一个消息插入到最后一个位置上 实现无缝衔接if(currentTop == (msg.length - 1) * -50) {var li = document.createElement('li');li.innerHTML = msg[0];ul.appendChild(li);}// 当用户看到"所谓的一个"的时候 再重新将 容器滚动位置归零 实现所谓的无缝衔接if(currentTop == msg.length * -50) {currentTop = 0;ul.style.top = currentTop + 'px';var lis = document.querySelectorAll(container + ' li');ul.removeChild(lis[lis.length - 1]); // 同时最后一个也可以移除了 不影响原来的布局 以此循环}// 判断每个消息是否需要暂停if (pause) {if (currentTop % 50 == 0) {clearInterval(timer);timeout = setTimeout(() => {timer = setInterval(run, speed);}, pauseTime)}}}var config = function() {// 是否有鼠标悬浮暂停事件if (mouse) {ul.onmouseover = function() {clearTimeout(timeout);clearInterval(timer);}ul.onmouseout = function () {clearTimeout(timeout);timer = setInterval(run, speed); //重新启动}}}// 开始启动var init = function() {initEl(); // 初始化元素config(); // 配置timer = setInterval(run, speed);}init();}
然后 第四步 就是 启动了
// 启动动画tranlate({msg: ["我爱中国", "前端程序员", '我爱js',],container: '.move',speed: 50,mouse: true})
看下实际效果哈 为了节省时间哈 我就写了三个消息 这个随着时间的推移 倒是 不会 加快了
jquery版本的
function tranlate($, options) {var msg = options.msg || []; // 滚动的消息中的存储数组var container = options.container || '.move'; // 滚动的容器var speed = options.speed || 10; // 滚动的速度 默认50msvar mouse = options.mouse || false; // 是否添加鼠标悬浮暂停的事件var pause = options.pause || true; // 是否每个消息上 触发暂停var pauseTime = options.pauseTime || 3000; //每个消息上暂停的事件var currentTop = parseInt($(container).css('top')); // 当前容器向上滚动的距离var timer = null , timeout = null; // 定时器对象if(msg.length == 0) {alert('请传入存储消息的数组!');return false;}// 初始化元素var initEl = function() {msg.forEach((value) => {var str = `<li>${value}</li>`;$(container).append($(str));})}// 文字滚动动画设置var run = function() {currentTop --;$(container).css('top', currentTop + 'px');// 如果滚动的位置到 最后一个消息的时候 拷贝第一个消息插入到最后一个位置上 实现无缝衔接if(currentTop == (msg.length - 1) * -50) {$(container).append($(container + ' li:first').clone());}// 当用户看到"所谓的一个"的时候 再重新将 容器滚动位置归零 实现所谓的无缝衔接if(currentTop == msg.length * -50) {currentTop = 0;$(container).css('top', currentTop + 'px');$(container + ' li:last').remove(); // 同时最后一个也可以移除了 不影响原来的布局 以此循环}// 判断每个消息是否需要暂停if (pause) {if (currentTop % 50 == 0) {clearInterval(timer);timeout = setTimeout(() => {timer = setInterval(run, speed);}, pauseTime)}}}var config = function() {// 是否有鼠标悬浮暂停事件if (mouse) {$(container).on('mouseover', function () {clearTimeout(timeout);clearInterval(timer);})$(container).on('mouseout', function () {clearTimeout(timeout);timer = setInterval(run, speed); //重新启动})}}// 开始启动var init = function() {initEl(); // 初始化元素config(); // 配置timer = setInterval(run, speed);}init();}// 启动动画tranlate($, {msg: ["我爱中国", "前端程序员", '我爱js', '我爱bug, 我爱加班', '我的家乡洛阳'],container: '.move',speed: 50,mouse: true})
关注我 持续更新 前端知识
