首页 > 移动平台 > 详细

js文字动态移动效果

时间:2021-08-25 18:05:15      阅读:17      评论:0      收藏:0      [点我收藏+]

<div style="width:300px;position:relative;top:9px;left:-300px;overflow:hidden">
<div  id="turnMore" style="color:red;cursor:pointer;font-size:15px;font-weight:bold;position:relative;top:0px;left:0px;"></div>
</div>

$("#turnMore").css(‘left‘, ‘0‘);
var tblLeft = 300;//最右边开始的位置 数字越大越靠右
var speedhq = 50; // 数值越大越慢
var outerWidth = $(‘#turnMore‘).outerWidth();//全部标题的宽度
function Marqueehq() {
if (tblLeft <= -outerWidth) {
tblLeft = 300;
} else {
tblLeft -= 1;
}
$(‘#turnMore‘).css(‘left‘, tblLeft + ‘px‘);
if (tblLeft == -outerWidth) {
clearInterval(MyMarhq);
setTimeout(function () {
MyMarhq = setInterval(Marqueehq, speedhq);
}, 1000*60*20);//移动完一遍后二十分钟后再执行
}
}

MyMarhq = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$("#turnMore").hover(function () {
clearInterval(MyMarhq);
}, function () {
clearInterval(MyMarhq);
MyMarhq = setInterval(Marqueehq, speedhq);
})

js文字动态移动效果

原文:https://www.cnblogs.com/hanxianwu2936/p/15184741.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!