利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

查看本章节

查看作业目录

需求说明：

利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

实现思路：

  1. 在新建 HTML 页面中，添加 <h3> 和无序列表，用无序列表显示 6 本畅销书籍的名称
  2. 添加 CSS 规则，重点设置无序列表的父版块 div(id="book") 的宽度和高度，使其只能显示前 3 个列表项，溢出的后 3 项使用 overflow: hidden 属性隐藏
  3. 在 HTML 文件中导入 jQuery 框架，并添加 <script></script> 标签对
  4. 声明 moveBook() 函数，在函数体中，声明变量 stopScroll 表示是否停止滚动，初始值是 false，表示不停止滚动

实现代码：

核心代码：

<script type="text/javascript">
	function moveBook(){
		var stopScroll=false;
		var marginTop=0;
		setInterval(function(){
			if(stopScroll) return;
			$(".express").children("li").first().
			animate({marginTop:marginTop--},0,function(){
				if (!$(this).is(":animated")) {
					if ((-marginTop)>$(this).height()) {
						$(this).css("margin-top",0).appendTo($(".express"));
						marginTop=0;
					}
				}
			});
		},50);
		$(".express").mouseover(function(){
			stopScroll=true;
		}).mouseout(function(){
			stopScroll=false;
		});
	}
	$(function(){
		moveBook();
	});
</script>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>无标题文档</title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			font-size: 12px;
		}
		ul{
			list-style: none
		}
		ul li{
			height: 25px; 
			line-height: 25px;
		}
		h3{
			width: 162px; 
			height: 30px; 
			line-height: 30px;
			text-align: center;
			background-color: #C33;
		}
		
	</style>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		function moveBook(){
			var stopScroll=false;
			var marginTop=0;
			setInterval(function(){
				if(stopScroll) return;
				$(".express").children("li").first().
				animate({marginTop:marginTop--},0,function(){
					if (!$(this).is(":animated")) {
						if ((-marginTop)>$(this).height()) {
							$(this).css("margin-top",0).appendTo($(".express"));
							marginTop=0;
						}
					}
				});
			},50);
			$(".express").mouseover(function(){
				stopScroll=true;
			}).mouseout(function(){
				stopScroll=false;
			});
		}
		$(function(){
			moveBook();
		});
	</script>
	<body>
		<h3>进七日畅销榜</h3>
		<div id="book">
			<ul class="express">
				<li>傲慢与偏见</li>
				<li>玻璃鞋全集（50集34VCD）</li>
				<li>澳大利亚：假日之旅</li>
				<li>浪漫地中海：假日之旅</li>
				<li>欧洲风情：假日之旅</li>
				<li>社交疯狂英语</li>
			</ul>
		</div>
	</body>
</html>

 

posted @ 2020-11-16 11:24  明金同学  阅读(30)  评论(0)  编辑  收藏  举报