jQuery實現參數自定義的文字跑馬燈效果
更新時間：2018年08月15日 14:43:57 作者：貝子涵夕
這篇文章主要為大家詳細介紹了jQuery實現參數自定義的文字跑馬燈效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了jQuery實現文字跑馬燈效果的具體代碼，供大家參考，具體內容如下
一、明確需求
基本需求：最近在工作中接到一個新需求，簡單來說就是實現一行文字從右到左跑馬燈的效果，并且以固定的時間間隔進行循環(huán)。
原本這是一個很容易實現的需求，但是難點是要求很多參數得是用戶可自行設置的，包括文字跑馬燈的速度和距離下次出現的間隔。具體需求見下圖：
這樣一來實現這個功能就會有點麻煩了，需要燒燒腦細胞了。
二、具體實現過程
HTML中只需要如下幾行代碼
<div id="swiper"> <div class="swiper_div"> <span class="swiper_span custom_span"></span> <span class="swiper_span id_span">用戶的UID</span> </div> </div>
css樣式如下（注意此處采用less的語法）
#swiper{
position: absolute;
width: 100%;
background-color: red;
z-index: 10000;
top:0px;
.swiper_div{
color: black;
position: absolute;
left: 100%;
white-space: nowrap;
transition-property: left;
transition-timing-function: linear;
.swiper_span{
font-size: 16px;
color: black;
opacity: 1; // 不透明度，范圍是0-1
}
}
}
下面是相關的js代碼
首先定義一套默認值，如果用戶未設置的話采用默認值，否則采用用戶設置的值。
const WATER_MARK = {
VERTICAL_AXIS: 200, // 垂直坐標，單位px
FONT_SIZE: 16, // 文字字體大小，單位px
FONT_COLOR: '#ffffff', // 文字顏色
FONT_OPACITY: 1, // 文字不透明度，范圍是 0-1，1為完全不透明
FONT_BACKGROUND: '', // 文字底色
SPEED: 200, // 跑馬燈速度，單位px/s
TIME_STAMP: 6, // 文字顯示間隔時間，單位s
TEXT_CONTENT: '', // 自定義文字內容
};
接下來就是核心代碼了。
// 通過選擇器獲取跑馬燈相關元素
let $swiper = $('#swiper');
let $swiperDiv = $(".swiper_div");
let $swiperSpan = $(".swiper_span");
let $customSpan = $(".custom_span");
let $idSpan = $(".id_span");
function waterMark() {
// 不能在此處提前獲取id為swiper的div的寬度，獲取的比實際要大，目前不知道什么原因。
// let swiperWidth = $swiper[0].offsetWidth;
let swiperDivWidth = $swiperDiv[0].offsetWidth;
let verticalAxis = WATER_MARK.VERTICAL_AXIS;
let fontSize = WATER_MARK.FONT_SIZE;
let fontColor = WATER_MARK.FONT_COLOR;
let fontOpacity = WATER_MARK.FONT_OPACITY;
let fontBackground = WATER_MARK.FONT_BACKGROUND;
let speed = WATER_MARK.SPEED;
let timeStamp = WATER_MARK.TIME_STAMP;
let textContent = WATER_MARK.TEXT_CONTENT;
$swiper.css('top',verticalAxis+'px');
$swiperSpan.css('font-size',fontSize+'px');
$swiperSpan.css('color',fontColor);
$swiperSpan.css('opacity',fontOpacity);
$swiperDiv.css('background-color',fontBackground);
$customSpan.text(textContent);
setTimeout(function () {
let totalScrollWidth = swiperDivWidth+$swiper[0].offsetWidth;
let durationTime = totalScrollWidth/speed; // 3.135s
$swiperDiv.css("transition-duration",durationTime+"s");
$swiperDiv.css("left","-"+swiperDivWidth+"px");
setInterval(function () {
if($swiperDiv.css('left') === '-'+swiperDivWidth+'px'){
$swiperDiv.css("left","100%");
$swiperDiv.css("transition-property",'null');
}else{
$swiperDiv.css("transition-property",'left');
$swiperDiv.css("left","-"+swiperDivWidth+"px");
$swiperDiv.css("transition-delay",timeStamp+'s');
}
},1000);
},1000);
}
waterMark();
當時在想如何控制這個間隔時間時還想了另外一種寫法，以時間為比較基準，如下：
let sumeTime=0; // 計算時間的變量
let durationTime = 5000 ; // 過渡時間，毫秒制，與過度時間保持一致時間
let jiange = 6000 ; // 自定義間隔時間
let jisuan = 1000; //設置計算時間的精度
setTimeout(function () {
//開始執(zhí)行滾動
$swiperDiv.css("left","-"+swiperDivWidth+"px");
setInterval(function () {
sumeTime = sumeTime + jisuan; //所加值與 setInterval 設置時間一致
if((sumeTime >= durationTime) && (sumeTime < (jiange + durationTime))){
//剛好滾動完到最右側
$swiperDiv.css("left","100%");
$swiperDiv.css("transition-property",'null');
}else if(sumeTime >=(jiange + durationTime)){
// console.log("間隔時間到啦開始下次執(zhí)行了啊******");
$swiperDiv.css("transition-property",'left');
$swiperDiv.css("left","-"+swiperDivWidth+"px");
sumeTime = 0;
}
},jisuan);
},1000);
兩種方式說不好哪種好哪種壞，只是第一種看起來更明了?？傊?，以上代碼就可以實現該需求。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jQuery為我們提供了方便的事件注冊機制，它的優(yōu)點，操作簡單，且不用擔心事件覆蓋等問題。缺點，普通的事件注冊不能做事件委托，且無法實現事件解綁，需要借助其他方法2022-07-07
jquery序列化form表單使用ajax提交后處理返回的json數據
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數據的示例,需要的朋友可以參考下2014-03-03
jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D餅狀圖效果,結合完整實例形式分析了基于FusionCharts圖形插件繪制餅狀圖的操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery鼠標經過方形圖片切換成圓邊特效，圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
讓提示信息顯示后自動消失的方法有很多，在本文為大家介紹下使用jquery是如何做到的，感興趣朋友可以參考下2013-12-12
jQuery仿阿里云購買服務器選擇時間長度,操作簡單，只需點擊所要選的時間段，對實現代碼感興趣的朋友參考下2016-04-04
jQuery Select(單選) 模擬插件 V1.3.62 改進版
改進jQuery Select(單選) 模擬插件 V1.3.6，增加mouseover事件2010-07-07
這篇文章主要介紹了jquery對象和DOM對象的相互轉換詳解的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了jQuery實現公告新聞自動滾屏效果實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
下面小編就為大家分享一篇jQuery+SpringMVC中的復選框選擇與傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01