jQuery实现参数自定义的文字跑马灯效果

本文为大家分享了框架实现文字跑马灯效果的具体代码，供大家参考，具体内容如下

一、明确需求

基本需求：最近在工作中接到一个新需求，简单来说就是实现一行文字从右到左跑马灯的效果，并且以固定的时间间隔进行循环。

原本这是一个很容易实现的需求，但是难点是要求很多参数得是用户可自行设置的，包括文字跑马灯的速度和距离下次出现的间隔。具体需求见下图：

这样一来实现这个功能就会有点麻烦了，需要烧烧脑细胞了。

二、具体实现过程

超文本标记语言中只需要如下几行代码

div id=' swiper ' div class=' swiper _ div ' span class=' swiper _ span custom _ span '/span span class=' swiper _ span id _ span '用户的UID/span /div/divcss样式如下（注意此处采用较少的的语法)

# swiper { position:绝对值宽度： 100%;背景-颜色：红色；z指数： 10000；top:0px .swiper _ div { color: black绝对位置：左： 100%;空白： nowrap左侧过渡属性：过渡时间函数：线性；swiper _ span { font-size : 16px；颜色：黑色；opa城市3360 1；//不透明度，范围是0-1 } }}下面是相关的射流研究…代码

首先定义一套默认值，如果用户未设置的话采用默认值，否则采用用户设置的值。

const WATER _ MARK={竖排_ 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 _ CONTRAENT: ' '，//自定义文字内容};接下来就是核心代码了。

//通过选择器获取跑马灯相关元素让$ swiper=$(' # swiper ')；让$swiperDiv=$(' .swiper _ div’)；让$ swiperSpan=$(' .swiper _ span’)；让$customSpan=$(' .custom _ span’)；让$idSpan=$(' .id _ span’)；函数水印(){ //不能在此处提前获取编号为捣蛋鬼的差异的宽度，获取的比实际要大，目前不知道什么原因//让swiperWidth=$swiper[0].在中间让swiperDivWidth=$swiperDiv[0].在中间让垂直轴=水标记.垂直轴；让fontSize=WATER_MARK .字体大小让fontColor=WATER_MARK .FONT _ COLOR让字体透明度=水印.FONT _不透明度；让fontBackground=WATER_MARK .字体_背景让速度=WATER_MARK .速度；让时间戳=水标记.时间戳；让文本内容=水标记.TEXT _ CONTENT$swiper.css('top '，Verticalaxis ' px ')；$ Swippersan。CSS(' font-size '，font size ' px ')；$ Swiforman。CSS(' color '，FontColor)；$ swiperSpan.css('不透明度，font opacity)；$ SwiperDiv。CSS('背景色'，字体背景)；$ customspan。文本(TextContent)；setTimeout(function(){ let totalScrollWidth=SwiperDivWidth $ swiper[0]).在中间让durationTime=totalScrollWidth/speed；//3.135s $ swiperdiv。CSS('过渡-持续时间，持续时间')；$swiperDiv.css('left '，'-' SwiperDivWidth ' px ')；setInterval(函数(){ if($ swiperdiv。CSS(' left ')=='-' SwiperDivWidth ' px '){ $ SwiperDiv。CSS('左'，' 100% ')；$ SwiperDiv。CSS(' transition-property '，' null ')；} else { $ SwiperDiv。CSS(' transition-property '，' left ')；$swiperDiv.css('left '，'-' SwiperDivWidth ' px ')；$ SwiperDiv。CSS('转换-延迟，TiMer ' s ')；} },1000);},1000);}水印();当时在想如何控制这个间隔时间时还想了另外一种写法，以时间为比较基准，如下：

让sumeTime=0；//计算时间的变量让durationTime=5000//过渡时间，毫秒制，与过度时间一致。让剑阁=6000；//自定义间隔时间让吉松=1000；//设置计算时间的精度setTimeout(函数(){//开始滚动$ swiperdiv.css ('left '，'-' swiper div width ' px ')；setInterval(function(){ sumeTime=sumeTime jisuan；//如果((sumetime=持续时间)(sumetime(剑阁持续时间))){//刚刚滚动到最右边的$swiperDiv.css('left '，' 100% ')，则增加值与setInterval设置时间一致；$ SwiperDiv . CSS(' transition-property '，' null ')；} else if (sumetime=(剑阁持续时间)){//console.log('是时候开始下一次执行了* * * * *)；$ SwiperDiv . CSS(' transition-property '，' left ')；$swiperDiv.css('left '，'-' SwiperDivWidth ' px ')；sumeTime=0；} }，吉松)；},1000);两种方式说不上哪个好哪个坏，但第一种看起来比较清晰。总之，上面的代码可以满足这个要求。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。