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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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关联数组的10个操作技巧
2013/01/21 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python性能优化技巧
2015/03/09 Python
python:socket传输大文件示例
2017/01/18 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python grpc超时机制代码示例
2020/09/14 Python
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
安全生产网格化管理实施方案
2014/03/01 职场文书
教师学期个人总结
2015/02/11 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
硕士学位申请报告
2015/05/15 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技