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-data的三种用法
Apr 18 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
js实现微博发布小功能
2017/01/12 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
管理站站长岗位职责
2013/11/27 职场文书
《童趣》教学反思
2014/02/19 职场文书
《画风》教学反思
2014/04/16 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
OpenCV实现普通阈值
2021/11/17 Java/Android
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle