https://blog.csdn.net/yunchong_zhao/article/details/106387004? ?之前曾經用jquery 做過一個類似的? 但是 隨著時間的進行 發動翻動的速度越來越快? 不是我想要的 因為是業務需要 肯定不能越來越快 這個是bug的

可能jquey 加上定時器? ?之間的異步執行? ?時間上出現的差錯 導致 原來越快? 總是跟預定的時間 不一定? 一會快一會慢的 的?

不管是用? ?setInterval? ?還是 setTimeout? 甚至是 requestAnimation? ?都沒有達到我想要的效果? 最后參考jquery的插件庫庫中? 使用原生js 實現下這個文字翻動 效果? ??https://www.jq22.com/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})

關注我? 持續更新 前端知識? ? ?

總結

以上是生活随笔為你收集整理的原生js 实现 文字向上翻动 效果， jquery效果实现的总是在一段时间后 速度变快的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。