一,明确需求

  基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环。

  原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置的,包括文字跑马灯的速度和距离下次出现的间隔。具体需求见下图:

  

  这样一来实现这个功能就会有点麻烦了,需要烧烧脑细胞了。

二,具体实现过程

  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:;
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:; // 不透明度,范围是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);

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

另附一套全程原生js实现该功能的代码:

function waterMark(parentElement) {
let swiper = document.createElement('div');
swiper.style.cssText = 'position: absolute;width: 100%;z-index: 10000;top:0px;';
parentElement.appendChild(swiper); let swiperDiv = document.createElement('div');
swiperDiv.style.cssText = 'color: black;position: absolute;left: 100%;white-space: nowrap;transition-property: left;transition-timing-function: linear;';
swiper.appendChild(swiperDiv); let customSpan = document.createElement('span');
customSpan.style.cssText = 'font-size: 16px;color: black;opacity: 1;';
customSpan.classList.add('swiper_span');
swiperDiv.appendChild(customSpan); let idSpan = document.createElement('span');
idSpan.style.cssText = 'font-size: 16px;color: black;opacity: 1;';
idSpan.classList.add('swiper_span');
// 设置用户Uid文本
idSpan.textContent = '用户uid';
swiperDiv.appendChild(idSpan); let swiperSpan = document.getElementsByClassName('swiper_span');
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 customText = WATER_MARK.TEXT_CONTENT; Array.from(swiperSpan).forEach(function (e,i) {
e.style.fontSize = fontSize+'px';
e.style.color = fontColor;
e.style.opacity = fontOpacity;
});
swiper.style.top = verticalAxis+'px';
swiperDiv.style.backgroundColor = fontBackground;
customSpan.textContent = customText; let swiperDivWidth = swiperDiv.offsetWidth;
setTimeout(function () {
let totalScrollWidth = swiperDivWidth+swiper.offsetWidth;
let durationTime = totalScrollWidth/speed;
swiperDiv.style.transitionDuration = durationTime+'s';
swiperDiv.style.left = '-'+swiperDivWidth+'px';
setInterval(function () {
if(swiperDiv.offsetLeft === -swiperDivWidth){
swiperDiv.style.left = '100%';
swiperDiv.style.transitionProperty = 'null';
}else{
swiperDiv.style.transitionProperty = 'left';
swiperDiv.style.left = '-'+swiperDivWidth+'px';
swiperDiv.style.transitionDelay = timeStamp+'s';
}
},1000);
},1000); } 调用时需要传入父元素标签对象。

  

用jQuery实现参数自定义的文字跑马灯效果的更多相关文章

  1. Android开发:文本控件详解——TextView(二)文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

  2. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

  3. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

  4. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  5. [转]实现文字跑马灯效果,scrolling text from right to left

    <div> <marquee direction="left" behavior="scroll" scrollamount="10 ...

  6. VUE之文字跑马灯效果

    VUE之文字跑马灯效果 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. 实现一个微信小程序组件:文字跑马灯效果

    marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...

  8. Android 自定义View跑马灯效果(一)

    今天通过书籍重新复习了一遍自定义VIew,为了加强自己的学习,我把它写在博客里面,有兴趣的可以看一下,相互学习共同进步: 通过自定义一个跑马灯效果,来诠释一下简单的效果: 一.创建一个类继承View, ...

  9. js文字跑马灯

    实现文字跑马灯效果,主要控制scrollLeft. 效果图如下 代码如下 <html> <head> <script type="text/javascript ...

随机推荐

  1. iis7下url重写后,已存在的html不能访问了(未能执行URL)的解决方法

    iis7下url重写后,原本存在的html不能访问了,未能执行URL(asp.net对真正的.html(但不符合重写规的)就不知道如何处理了),遇到类似情况的朋友可以参考下   当把.html的url ...

  2. 关于maven-resources-plugin配置的隐藏的坑

    昨天发现一个问题, 一个第三方证书的文件存放于resources文件夹下,在本地环境使用该证书进行加密调用第三方接口,没有任何问题,但是发布到测试环境和生产环境(linux)报错,提示证书工厂无法初始 ...

  3. 小程序html转wxml,微信小程序用wxParse解析html

    1.首先下载 wxParse脚本,到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录 2.在样式页面 wxss ...

  4. python学习之数组二

    作用于数组的函数: 通用函数:函数基于元素的,以单元方式作用于数组的,返回的是与原数组具有相同形状的数组. 不通用函数(数组函数):函数能以行或者列的方式作用于整个矩阵:如果没有提供任何参数时,它们将 ...

  5. OAuth2认证和授权:AuthorizationCode认证

    前面的OAuth2认证,里面的授权服务器都是用的identityserver4搭建的 ids4没有之前一般都是Owin搭建授权服务器,博客园有很多 ids4出来后,一般都是用ids4来做认证和授权了, ...

  6. appium启动

    from appium import webdriver from time import sleep capabilitise = { "platformName": " ...

  7. SQL SERVER 备份脚本

    DECLARE @FileName VARCHAR(200), @CurrentTime VARCHAR(50), @DBName VARCHAR(100), @SQL VARCHAR(1000)SE ...

  8. Vue系列之 => 路由匹配

    路由基本使用,加动画切换 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  10. vue.js中的computed和watch的区别

    1.computed在调用时不需要加(),watch是不需要调用的2.computed如果属性没有发生改变时会从缓存中读取值,watch当属性发生改变时会接收到2个值:一个为新值,一个为旧值3.com ...