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实现简单实用的轮播器
May 23 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery实现简单全选框
Sep 13 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
linux实现php定时执行cron任务详解
2013/12/24 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
javascript 面向对象继承
2009/11/26 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python模块之paramiko实例代码
2018/01/31 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
django form和field具体方法和属性说明
2020/07/09 Python
python压包的概念及实例详解
2021/02/17 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
教师应聘个人求职信
2013/12/10 职场文书
实习生求职自荐信
2014/02/07 职场文书
局火灾防控工作方案
2014/05/25 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
承兑汇票延期证明
2015/06/23 职场文书
推普标语口号大全
2015/12/26 职场文书
实习报告怎么写
2019/06/20 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python