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

前端之家收集整理的这篇文章主要介绍了jQuery实现参数自定义的文字跑马灯效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、明确需求

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

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

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

二、具体实现过程

HTML中只需要如下几行代码

用户的UID

css样式如下(注意此处采用less的语法)

下面是

相关的js代码

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

文字字体大小,单位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();

当时在想如何控制这个间隔时间时还想了另外一种写法,以时间为比较基准,如下:

= durationTime) && (sumeTime < (jiange + durationTime))){ //刚好滚动完到最右侧 $swiperDiv.css("left","100%"); $swiperDiv.css("transition-property",'null'); }else if(sumeTime >=(jiange + durationTime)){ // console.log("间隔时间到啦开始下次执行了啊******"); $swiperDiv.css("transition-property",'left'); $swiperDiv.css("left","-"+swiperDivWidth+"px"); sumeTime = 0; } },jisuan); },1000);

两种方式说不好哪种好哪种坏,只是第一种看起来更明了。总之,以上代码就可以实现该需求。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章