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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery中库的引用方法
Jan 06 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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 CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python Socket编程入门教程
2014/07/11 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
英国门把手公司:Door Handle Company
2019/05/12 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
老公保证书
2015/01/17 职场文书
2015毕业寄语大全
2015/02/26 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python