查看本章节
查看作业目录
需求说明：
利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动
实现思路：
- 在新建 HTML 页面中，添加 <h3> 和无序列表，用无序列表显示 6 本畅销书籍的名称
- 添加 CSS 规则，重点设置无序列表的父版块 div(id="book") 的宽度和高度，使其只能显示前 3 个列表项，溢出的后 3 项使用 overflow: hidden 属性隐藏
- 在 HTML 文件中导入 jQuery 框架，并添加 <script></script> 标签对
- 声明 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>
