基于jQuery的公告无限循环滚动实现代码
2018-11-30 本文已影响140人
祈澈菇凉
基于jQuery的公告无限循环滚动实现代码，效果如下，多用于pc端电商网站之中不断的循环更新的公告消息。
写一个简单的小demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>基于jQuery的公告无限循环滚动实现代码</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
line-height: 1.5;
font-size: 14px;
}
.scroll {
display: inline-block;
overflow: hidden;
position: relative;
height: 50px;
}
.scroll ul {
transform: translateY(0);
}
.animate {
-webkit-transition: all .3s ease-out;
}
.scroll li {
overflow: hidden;
display: -webkit-box;
margin-left: 10px;
width: 90%;
height: 50px;
line-height: 30px;
color: #333;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
}
.scroll li img{
margin-top: 20px;
margin-right: 12px;
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div class="scroll">
<ul>
<li><img src="message.png" /><span>前端妹子是我吗</span></li>
<li><img src="message.png" />对呀，我就是前端妹子啊</li>
<li><img src="message.png" />哈哈哈你是谁呀</li>
<li><img src="message.png" />你猜猜我是哪个</li>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(function() {
var scrollDiv = $(".scroll"),
$ul = scrollDiv.find("ul"),
$li = scrollDiv.find("li"),
$length = $li.length,
$liHeight = $li.height(),
num = 0;
if(scrollDiv.length == 0) {
return;
}
if($length > 1) {
$ul.append($li.eq(0).clone());
setInterval(
function() {
num++;
$ul.addClass("animate").css("-webkit-transform", "translateY(-" + $liHeight * (num) + "px)");
setTimeout(
function() {
if(num == $length) {
$ul.removeClass("animate").css("-webkit-transform", "translateY(0)");
num = 0;
}
}, 300);
}, 3000);
}
});
</script>
</html>
热门推荐：全栈工程师开发常用插件、工具类库，视频，资料300G资源汇总
原文作者：祈澈姑娘；技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
