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