今天,我还是风尚,一个有梦想的咸鱼程序员
今天我们还来和jQuery来靠近乎
这次咱们整利用jQuery动画实现
无缝滚动/广告条/轮播/播报效果
效果图1:
效果图2:
效果图3:
相信你对此很感兴趣了吧:
1.准备好你的jQuery插件0.0
2.创建一个HTML
3.上代码
具体代码如下,对你有用的话记得一键三联啊,禁止白嫖!
代码有任何问题记得下方留言啊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.da {
border: 10px solid sandybrown;
text-align: center;
width: 600px;
height: 60px;
text-align: center;
overflow: hidden;
box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
color: #FF0000;
margin: 0 auto;
}
.box div {
font-size: 50px;
width: 600px;
height: 60px;
line-height: 60px;
}
</style>
<body>
<h1 style="width: 600px; margin: 0 auto;text-align: center;">无缝滚动店|欢迎您光临</h1>
<div class="da">
<div class="box">
<div>♥无缝滚动店|欢迎您光临♥</div>
<div>♥1号技师到1688房间♥</div>
<div>♥2号技师到1688房间♥</div>
<div>♥3号技师到1688房间♥</div>
<div>♥4号技师到1688房间♥</div>
<div>♥5号技师到1688房间♥</div>
<div>♥6号技师到1688房间♥</div>
</div>
</div>
</body>
<script src="JS/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
function dh() {
$(".box").animate({
"margin-top": "-60"
}, 1000, function() {
var one = $(".box div").first();
$(".box").append(one).css("margin-top", 0)
});
}
var tim = setInterval(dh, 5000)
$(".da").hover(function() {
clearInterval(tim)
}, function() {
tim = setInterval(dh, 5000)
}
)
})
</script>
</html>
本次分享到这里结束了
我还是风尚,一个有梦想的咸鱼程序员!让我们一起努力,共创明天的辉煌!喜欢就给个小关注啊,
关注风尚不迷路!
记得一键三连,禁止白嫖
更多学习请移步