利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节
查看作业目录
需求说明:
利用自定义动画 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>
利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动的更多相关文章
- JS事件 鼠标移开事件(onmouseout)鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。
鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...
- 自定义动画animate()
在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- [修正] Firemonkey SpeedButton 鼠标移开按钮后 IsPressed 为 False 的问题
未修正: 修正代码: 请将 FMX.StdCtrls.pas 复制到自己的工程目录下,再修改如下代码: procedure TCustomButton.RestoreButtonState; begi ...
- CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示
CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...
- chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
- jQuery 效果 - 动画 animate() 方法
我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...
- jQuery动画animate方法使用介绍
用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...
- UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...
随机推荐
- express系列(1)概述
在 Node.js 出现之前,前后端的开发必须使用不同的语言进行.为此你需要学习多种的语言和框架.有了 Node.js 之后,你就可以使用一门语言在前后端开发中自由切换,这是最吸引人的地方. 什么是 ...
- openwrt编译ipk包提示缺少feeds.mk文件
问题具体表现如下 这个问题困扰了我两个多星期,总算解决了.解决方案如下: 首先,先应该把配置菜单调好. 我的硬件是7620a,要编译的ipk包为helloworld,所以应该使用 make menuc ...
- 使用AOP思想实现日志的添加
//1.创建日志表syslog------->创建日志的实体类--------->在web.xml中配置监听 <listener> <listener-class ...
- 微软开源的Web测试和自动化神器 Playwright
Playwright 是微软开源的一个用于 Web 测试和自动化的框架, 提供了可靠的端到端测试, 功能非常强大, 可以在测试, 爬虫,自动化场景中使用. 跨浏览器 Playwright 支持所有现代 ...
- 纯css设置元素高度与宽度相等
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...
- LuoguP2378 因式分解II 题解
Content 输入一个多项式 \(x^2+ax+b\)(不保证 \(a,b\neq0\)),请对这个多项式进行因式分解(形式为 \((x-x_1)(x-x_2)\),其中 \(x_1>x_2\ ...
- Birt报表设置自定义的值
比如数据库查出该字段的值有"no",有"yes",那么想要根据当是no是显示"未完成",当是yes时显示"已完成" 可以 ...
- 在myeclipse里加大tomcat内存,jdk内存方法
这是在myeclipse里加大的方法: -Xms4096m -Xmx4096m -XX:MaxNewSize=4096m -XX:MaxPermSize=4096m 如图所示: -XX:PermSiz ...
- props 使用场景 及 布局提升
一对一一边写html 一边写css一小块为单位html csscss html整块单位html csscss html react/first-react/src/views/Wk/index.jsx ...
- 【LeetCode】1014. Capacity To Ship Packages Within D Days 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...