基于jQuery的公告無限循環(huán)滾動實現(xiàn)代碼，效果如下，多用于pc端電商網站之中不斷的循環(huán)更新的公告消息。
寫一個簡單的小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的公告無限循環(huán)滾動實現(xiàn)代碼</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>
原文作者：祈澈姑娘；技術博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
