jQuery如何制作动画
下面为一组图片(四张)展示
1
2
3
4
页面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css"> .box{border:1px solid #aaccff;margin-top:10px;padding:10px;line-height:25px;} .welcome{font-size:50px;color:Red;font-weight:bold;margin-top:220px;text-align:center;} #coverbox{position:absolute;left:0px;top:100px;background-color:#e5e5e5;height:500px;width:100%;}
#coverbox #leftbox,#coverbox #rightbox{width:49%;height:500px;background-color:#ee00aa;}
#coverbox #leftbox{border-right:1px solid red;float:left;}
#coverbox #rightbox{border-left:1px solid red;float:right;} </style>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function ()
{
$(document).click(function ()
{
$("#leftbox,#rightbox").animate({ width: -1 + "px" }, 4000, function ()
{
$("#coverbox").fadeOut(3000);
});
}); }); </script> </head>
<body style="font-size:12px;">
<div class="box"> <ol>
<li>实现拉幕效果,点击灰色区域时,左右两部分分别向两侧移动</li>
<li>拉幕效果完成之后,逐渐显示:欢迎进入Jquery动画世界</li>
</ol> </div> <div class="welcome">欢迎进入Jquery动画世界</div> <div id="coverbox">
<div id="leftbox"></div>
<div id="rightbox"></div>
</div> </body>
</html>
好了,一个简单的动画制作完成了
jQuery如何制作动画的更多相关文章
- 前端制作动画的几种方式(css3,js)
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- jquery的animate({})动画整理
在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...
- 使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
- CSS3制作动画的三个属性
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- jQuery & CSS 制作金属质感的选择按钮
如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...
- 酷!使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- requestAnimationFrame制作动画:旋转风车
在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...
- canvas学习之制作动画
html部分 ...... <body> <canvas id="myCanvas" width="400" height="400 ...
随机推荐
- Unix程序员的Win10二三事
macOS延续自BSD Unix, Linux则是从内核开始重新编写但延续Unix使用方式的Unix.所以mac还有linux程序员,一般都算是*nix程序员,尽管其中还有不少的区别. Windows ...
- pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; try restarting transaction')错误处理
问题描述: 在使用pymysql库时,利用游标执行插入操作,产生错误,会出现pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; ...
- ASP.NET Core DI 手动获取注入对象
ASP.NET Core DI 一般使用构造函数注入获取对象,比如在ConfigureServices配置注入后,通过下面方式获取: private IValueService _valueServi ...
- kubernetes学习01—kubernetes介绍
本文收录在容器技术学习系列文章总目录 一.简介 1.Kubernetes代码托管在GitHub上:https://github.com/kubernetes/kubernetes/. 2.Kubern ...
- Python机器学习笔记 异常点检测算法——Isolation Forest
Isolation,意为孤立/隔离,是名词,其动词为isolate,forest是森林,合起来就是“孤立森林”了,也有叫“独异森林”,好像并没有统一的中文叫法.可能大家都习惯用其英文的名字isolat ...
- Shiro源码分析之SecurityManager对象获取
目录 SecurityManager获取过程 1.SecurityManager接口介绍 2.SecurityManager实例化时序图 3.源码分析 4.总结 @ 上篇文章Shiro源码分析之获 ...
- 内核中 xxx_initcall 的调用过程分析
内核版本:linux-4.19 上一篇文章提到了这段代码: arch_initcall_sync(of_platform_default_populate_init); 它的功能是完成 device_ ...
- vim编辑器详解(week1_day3)--技术流ken
vi编辑器 作用:编辑文本文件中的内容的工具 命令历史 末行模式中,以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 v ...
- 在windows中创建.gitignore文件
1.先任意创建一个文件,例如:1.txt 2.打开cmd命令行窗口,到1.txt目录下 windows7/8输入ren 1.txt .gitignore修改成功 windows10输入mv 1.txt ...
- 第42章 发现(discovery) - Identity Server 4 中文文档(v1.0.0)
可以在*https://baseaddress/.well-known/openid-configuration*找到发现文档.它包含有关IdentityServer的端点,密钥材料和功能的信息. 默 ...