本文为大家分享了jQuery实现文字跑马灯效果的具体代码,供大家参考,具体内容如下
一、明确需求
基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环。
原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置的,包括文字跑马灯的速度和距离下次出现的间隔。具体需求见下图:
这样一来实现这个功能就会有点麻烦了,需要烧烧脑细胞了。
二、具体实现过程
HTML中只需要如下几行代码
本文为大家分享了jQuery实现文字跑马灯效果的具体代码,供大家参考,具体内容如下
基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环。
原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置的,包括文字跑马灯的速度和距离下次出现的间隔。具体需求见下图:
这样一来实现这个功能就会有点麻烦了,需要烧烧脑细胞了。
HTML中只需要如下几行代码
css样式如下(注意此处采用less的语法)
下面是
首先定义一套默认值,如果用户未设置的话采用默认值,否则采用用户设置的值。
接下来就是核心代码了。
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();
当时在想如何控制这个间隔时间时还想了另外一种写法,以时间为比较基准,如下:
两种方式说不好哪种好哪种坏,只是第一种看起来更明了。总之,以上代码就可以实现该需求。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。