JS+CSS实现左右文字滚动
【摘要】 <!doctype html><html> <head> <meta charset="UTF-8"> <title>文字滚动：公众号AlbertYang</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script> <style type="text...
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>文字滚动：公众号AlbertYang</title>
-
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
-
<style type="text/css">
-
* {
-
margin: 0;
-
padding: 0;
-
}
-
-
body {
-
font: 12px/1 '微软雅黑';
-
background: #fff;
-
}
-
-
.main {
-
width: 600px;
-
padding: 10px;
-
margin: 0 auto;
-
}
-
-
.wrap {
-
padding-top: 10px;
-
overflow: hidden;
-
width: 150px;
-
cursor: pointer;
-
}
-
-
.scroll {
-
width: 1200px;
-
height: 30px;
-
line-height: 30px;
-
overflow: hidden;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="main">
-
<div class="wrap">
-
<div class="scroll">
-
<span>请您耐心等待~</span>
-
</div>
-
</div>
-
-
<div class="wrap">
-
<div class="scroll">
-
<span>由于大促期间订单量激增，您的订单送达时效可能出现延迟，请放到GV房供热供热上档次的身份为您耐心等待~</span>
-
</div>
-
</div>
-
-
<div class="wrap">
-
<div class="scroll">
-
<span>由于 发布</span>
-
</div>
-
</div>
-
</div>
-
<script>
-
function audioTitleScroll() {
-
console.log(22222);
-
var audio_title = $(".wrap");
-
audio_title.each(function() {
-
titleScroll(this);
-
});
-
-
function titleScroll(wrap) {
-
var div = wrap.getElementsByTagName('div')[0];
-
var span = div.getElementsByTagName('span')[0];
-
var span_w = 1000;
-
if (span) {
-
span_w = span.offsetWidth;
-
}
-
var div_w = wrap.offsetWidth;
-
if (div_w > span_w || div.getElementsByTagName('span').length >= 2) {
-
console.log(777);
-
return false;
-
}
-
console.log(666);
-
div.innerHTML += div.innerHTML;
-
var timer = setInterval(goLeft, 20);
-
$(wrap).hover(function() {
-
clearInterval(timer);
-
}, function() {
-
timer = setInterval(goLeft, 20);
-
});
-
-
function goLeft() {
-
if (span_w <= wrap.scrollLeft) {
-
wrap.scrollLeft -= span_w;
-
} else {
-
wrap.scrollLeft++;
-
}
-
}
-
}
-
};
-
$(function() {
-
audioTitleScroll();
-
})
-
</script>
-
</body>
-
</html>
文章来源: albertyang.blog.csdn.net，作者：Albert Yang，版权归原作者所有，如需转载，请联系作者。
原文链接：albertyang.blog.csdn.net/article/details/107641673
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）