本文为大家分享了jquery实现文字跑马灯效果的具体代码，供大家参考，具体内容如下
一、明确需求
基本需求：最近在工作中接到一个新需求，简单来说就是实现一行文字从右到左跑马灯的效果，并且以固定的时间间隔进行循环。
原本这是一个很容易实现的需求，但是难点是要求很多参数得是用户可自行设置的，包括文字跑马灯的速度和距离下次出现的间隔。具体需求见下图：
这样一来实现这个功能就会有点麻烦了，需要烧烧脑细胞了。
二、具体实现过程
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 () {
//开始执行滚动
$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("间隔时间到啦开始下次执行了啊******");
$swiperdiv.css("transition-property",'left');
$swiperdiv.css("left","-"+swiperdivwidth+"px");
sumetime = 0;
}
},jisuan);
},1000);
两种方式说不好哪种好哪种坏，只是第一种看起来更明了。总之，以上代码就可以实现该需求。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
androidx+viewpage+tablayout+json开发（加载图片和视频）
网友评论