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

本文为大家分享了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); 

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

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