jQuery UI实现动画效果代码分享


Posted in jQuery onAugust 19, 2018

页面文档载入后,为第一张图片添加class属性值为img1,为第二张图片添加class属性值img2,为第三张图片添加class属性img3,为第四张图片添加class属性值img4,这会使得每张图片的下半部分被上一张更大的图片给覆盖住。

当鼠标单击暴露在最上面的图片时,该图片在0.6秒内从原本大小放大150%,并逐渐减小不透明度直到完全消失,与此同时,其他所有图片在0.6秒内动态的放大并占据相应上一张图片的位置。全部动态效果结束后,消失不见的那张图片重新显示在最下面。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery UI</title>
	<style type="text/css">
		div{
			position: relative;
		}
		img{
			position: absolute;
			border:solid 3px black;
		}
		.img1{
			width: 300px;
			height: 220px;
			top:120px;
			left: 200px;
			z-index: 4;
			opacity:1;
			cursor:pointer;
		}
		.img2{
			width: 200px;
			height: 145px;
			top:85px;
			left: 250px;
			z-index: 3;
			opacity: 0.7;
		}
		.img3{
			width: 120px;
			height: 90px;
			top:60px;
			left: 290px;
			z-index: 2;
			opacity: 0.5;
		}
		.img4{
			width: 60px;
			height: 55px;
			top:45px;
			left: 320px;
			z-index: 1;
			opacity: 0.4;
		}
	</style>
	<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="jquery.effects.core.min.js"></script>
	<script type="text/javascript" src="jquery.effects.scale.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('img').each(function(index){
				$(this).addClass('img'+(index+1));
			});
			$('img.img1').live('click',function(){
				$(this).hide('puff',{percent:150},600,function(){
					$(this).attr('class','img4').show();
				});
				$('img.img2').switchClass('img2','img1',600);
				$('img.img3').switchClass('img3','img2',600);
				$('img.img4').switchClass('img4','img3',600);
			});
		});
	</script>
</head>
<body>
	<div>
		<img src="1.jpg">
		<img src="2.jpg">
		<img src="3.jpg">
		<img src="4.jpg">
	</div>
</body>
</html>

初始效果:

jQuery UI实现动画效果代码分享

点击后效果:

jQuery UI实现动画效果代码分享

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
jQuery轮播图实例详解
Aug 15 #jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
python可迭代对象去重实例
2020/05/15 Python
python判断变量是否为列表的方法
2020/09/17 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
办公室文秘自我鉴定
2013/09/21 职场文书
物业管理大学生个人的自我评价
2013/10/10 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
单位承诺书格式
2014/05/21 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
物流管理专业求职信
2014/05/29 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
辞职信格式范文
2015/05/13 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Python借助with语句实现代码段只执行有限次
2022/03/23 Python