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


Posted in jQuery onAugust 15, 2018

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery轮播图实例详解
Aug 15 #jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
You might like
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
js获得参数的getParameter使用示例
2014/02/26 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
ionic环境配置及问题详解
2017/06/27 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python Requests安装与简单运用
2016/04/07 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python如何输出反斜杠
2020/06/18 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
出资证明书范本(标准版)
2014/09/24 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
js 实现验证码输入框示例详解
2022/09/23 Javascript