查看本章节

查看作业目录

需求说明：

利用自定义动画 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>

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

  1. JS事件 鼠标移开事件（onmouseout）鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

    鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...

  2. 自定义动画animate()

    在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...

  3. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  4. [修正] Firemonkey SpeedButton 鼠标移开按钮后 IsPressed 为 False 的问题

    未修正: 修正代码: 请将 FMX.StdCtrls.pas 复制到自己的工程目录下,再修改如下代码: procedure TCustomButton.RestoreButtonState; begi ...

  5. CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示

    CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...

  6. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  7. jQuery 效果 - 动画 animate() 方法

    我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...

  8. jQuery动画animate方法使用介绍

    用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...

  9. UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

随机推荐

  1. 3.7 rust 静态块

    Cargo.toml [dependencies] lazy_static = "1.4.0" main.rs #[macro_use] extern crate lazy_sta ...

  2. Linux基础命令---get获取ftp文件

    get 使用lftp登录ftp服务器之后,可以使用get指令从服务器获取文件.   1.语法       get [-E]  [-a]  [-c] [-O base]  rfile  [-o lfil ...

  3. 【Service】【Database】【MySQL】基础概念

    1. 数据模型:层次模型.网状模型.关系模型 关系模型: 二维关系: 表:row, column 索引:index 视图:view 2. SQL接口:Structured Query Language ...

  4. 基于Annotation（注解）的装配

    一.常用注解 1.@Component 是一种通用注解,可用于任何Bean 2.@Repository 通常用于注解DAO层类,即持久层 3.@Service 通常用于注解Service类,即服务层 ...

  5. 【C/C++】习题3-7 DNA/算法竞赛入门经典/数组与字符串

    [题目] 输入m组n长的DNA序列,要求找出和其他Hamming距离最小的那个序列,求其与其他的Hamming距离总和. 如果有多个序列,求字典序最小的. [注]这道题是我理解错误,不是找出输入的序列 ...

  6. java 整型

    byte(1字节).short(2字节).int(4字节).long(16字节) java中前缀加上0b或者0B就可以写二进制数,前缀加上0就可以写八进制数,前缀加上0x或者0X就可以写十六进制数 一 ...

  7. C# 使用管理员权限运行程序

    最近在开发OPCServer组件过程中,在注册opcServer是总是返回false,后来查找原因得知在本地主机注册opcServer时,需要使用管理员权限. OPCServer在一台机器上部署时只需 ...

  8. <转>libevent使用demo

    这篇文章介绍下libevent在socket异步编程中的应用.在一些对性能要求较高的网络应用程序中,为了防止程序阻塞在socket I/O操作上造成程序性能的下降,需要使用异步编程,即程序准备好读写的 ...

  9. [BUUCTF]REVERSE——[HDCTF2019]Maze

    [HDCTF2019]Maze 附件 步骤: 例行检查,32位程序,upx壳 upx脱壳儿后扔进32位ida,首先检索程序里的字符串 有类似迷宫的字符串,下面也有有关flag的提示字符串,但是没法进行 ...

  10. CF544A Set of Strings 题解

    Content 有一个长为 \(n\) 的字符串 \(q\),试问能否将其划分为 \(k\) 个子串,使得每个子串的首字母都不相等,可以的话输出 \(\texttt{YES}\) 并输出任意一个方案, ...