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实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Jquery $.map使用方法实例详解
Sep 01 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
微信小程序入门之指南针
2020/10/22 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
python3中数组逆序输出方法
2020/12/01 Python
python链表类中获取元素实例方法
2021/02/23 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
酒店行政人事部经理职务说明书
2014/02/26 职场文书
李敖北大演讲稿
2014/05/24 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers