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 相关文章推荐
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
对Python中range()函数和list的比较
2018/04/19 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python中and和or如何使用
2020/05/28 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python中生成ndarray实例讲解
2021/02/22 Python
卫校中专生个人自我评价
2013/09/19 职场文书
计算机学生求职信范文
2014/01/30 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2016新年感言
2015/08/03 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
python入门之算法学习
2021/04/22 Python
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
Java 关于String字符串原理上的问题
2022/04/07 Java/Android