（与jQuery靠近乎）04-事件实例*利用jQuery动画实现无缝滚动/广告条/轮播/播报效果

最新推荐文章于 2023-12-08 15:24:23 发布

风尚云网

最新推荐文章于 2023-12-08 15:24:23 发布

阅读量726

点赞数 4

分类专栏： jq学习文章标签： jquery 动画 javascript css3 前端

本文链接：https://blog.csdn.net/zsx0806/article/details/121296590

版权

jq学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天，我还是风尚，一个有梦想的咸鱼程序员

今天我们还来和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>

本次分享到这里结束了

我还是风尚，一个有梦想的咸鱼程序员！让我们一起努力，共创明天的辉煌！喜欢就给个小关注啊，

关注风尚不迷路！

记得一键三连，禁止白嫖

风尚云网

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
（与jQuery靠近乎）04-事件实例*利用jQuery动画实现无缝滚动/广告条/轮播/播报效果

今天，我还是风尚，一个有梦想的咸鱼程序员今天我们还来和jQuery来靠近乎这次咱们整利用jQuery动画实现无缝滚动/广告条/轮播/播报效果效果图1：效果图2：效果图3：相信你对此很感兴趣了吧：1.准备好你的jQuery插件0.02.创建一个HTML3.上代码具体代码如下，对你有用的话记得一键三联啊，禁止白嫖！代码有任何问题记得下方留言啊<!DOCTYPE html><html> <hea...
复制链接

扫一扫