基于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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="message.png" /><span>前端妹子是我吗</span></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="message.png" />对呀，我就是前端妹子啊</li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="message.png" />哈哈哈你是谁呀</li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="message.png" />你猜猜我是哪个</li>
</ul>
</div>
</body>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦