jQuery實(shí)現(xiàn)參數(shù)自定義的文字跑馬燈效果
本文為大家分享了jQuery實(shí)現(xiàn)文字跑馬燈效果的具體代碼,供大家參考,具體內(nèi)容如下
一、明確需求
基本需求:最近在工作中接到一個新需求,簡單來說就是實(shí)現(xiàn)一行文字從右到左跑馬燈的效果,并且以固定的時間間隔進(jìn)行循環(huán)。
原本這是一個很容易實(shí)現(xiàn)的需求,但是難點(diǎn)是要求很多參數(shù)得是用戶可自行設(shè)置的,包括文字跑馬燈的速度和距離下次出現(xiàn)的間隔。具體需求見下圖:
這樣一來實(shí)現(xiàn)這個功能就會有點(diǎn)麻煩了,需要燒燒腦細(xì)胞了。
二、具體實(shí)現(xià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 } } }
下面是相關(guān)的js代碼
首先定義一套默認(rèn)值,如果用戶未設(shè)置的話采用默認(rèn)值,否則采用用戶設(shè)置的值。
const WATER_MARK = { VERTICAL_AXIS: 200, // 垂直坐標(biāo),單位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: '', // 自定義文字內(nèi)容 };
接下來就是核心代碼了。
// 通過選擇器獲取跑馬燈相關(guān)元素 let $swiper = $('#swiper'); let $swiperDiv = $(".swiper_div"); let $swiperSpan = $(".swiper_span"); let $customSpan = $(".custom_span"); let $idSpan = $(".id_span"); function waterMark() { // 不能在此處提前獲取id為swiper的div的寬度,獲取的比實(shí)際要大,目前不知道什么原因。 // 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();
當(dāng)時在想如何控制這個間隔時間時還想了另外一種寫法,以時間為比較基準(zhǔn),如下:
let sumeTime=0; // 計(jì)算時間的變量 let durationTime = 5000 ; // 過渡時間,毫秒制,與過度時間保持一致時間 let jiange = 6000 ; // 自定義間隔時間 let jisuan = 1000; //設(shè)置計(jì)算時間的精度 setTimeout(function () { //開始執(zhí)行滾動 $swiperDiv.css("left","-"+swiperDivWidth+"px"); setInterval(function () { sumeTime = sumeTime + jisuan; //所加值與 setInterval 設(shè)置時間一致 if((sumeTime >= durationTime) && (sumeTime < (jiange + durationTime))){ //剛好滾動完到最右側(cè) $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);
兩種方式說不好哪種好哪種壞,只是第一種看起來更明了。總之,以上代碼就可以實(shí)現(xiàn)該需求。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于Jquery的文字滾動跑馬燈插件(一個頁面多個滾動區(qū))
- jQuery+CSS3文字跑馬燈特效的簡單實(shí)現(xiàn)
- 基于JQuery實(shí)現(xiàn)的跑馬燈效果(文字無縫向上翻動)
- 基于jquery的文字向上跑動類似跑馬燈的效果
- 基于jquery實(shí)現(xiàn)的文字向上跑動類似跑馬燈的效果
- jQuery實(shí)現(xiàn)轉(zhuǎn)動隨機(jī)數(shù)抽獎效果的方法
- jquery 抽獎小程序?qū)崿F(xiàn)代碼
- jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤抽獎
- jQuery實(shí)現(xiàn)適用于移動端的跑馬燈抽獎特效示例
相關(guān)文章
淺談原生JS實(shí)現(xiàn)jQuery的animate()動畫示例
本篇文章主要介紹了淺談原生JS實(shí)現(xiàn)jQuery的animate()動畫示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03兼容主流瀏覽器的jQuery+CSS 實(shí)現(xiàn)遮罩層的簡單代碼
比起使用注冊頁和登陸頁,網(wǎng)站在當(dāng)前頁使用遮罩層注冊和登陸的用戶體驗(yàn)要好不少。這里使用jQuery和CSS實(shí)現(xiàn)一個簡單的遮罩效果。2014-10-10關(guān)于jQuery EasyUI 中刷新Tab選項(xiàng)卡后一個頁面變形的解決方法
這篇文章主要介紹了關(guān)于jQuery EasyUI 中刷新Tab選項(xiàng)卡后一個頁面變形的解決方法,需要的朋友可以參考下2017-03-03jQueryUI如何自定義組件實(shí)現(xiàn)代碼
第一次自定義jQueryUI Widget 又是第一次,現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。2010-11-11JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動到頁面節(jié)點(diǎn)
這篇文章主要介紹了使用JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動到頁面節(jié)點(diǎn)的代碼,需要的朋友可以參考下2015-07-07jQuery實(shí)現(xiàn)查找最近父節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)查找最近父節(jié)點(diǎn)的方法,涉及jQuery針對元素節(jié)點(diǎn)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06