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

页面文档载入后，为第一张图片添加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>

初始效果：

点击后效果：

赞 (0)

相关推荐

  • 关于jquery layui弹出层的使用方法

    Jquery必须大于1.83 layui必须是all,否则不显示 <script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script> html代码 <input id="about" type="button" value="修改考勤&quo

  • jQuery UI Draggable + Sortable 结合使用(实例讲解)

    jQuery UI Draggable + Sortable 结合使用(实例讲解)

    工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <script type="text/javascript"> $(function () { $("#box_wrap1,#box_wrap2").sortable({ connectWith: ".box_wrap", helper: "cl

  • jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】

    //放于上传前 function ajaxLoading(){ $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body"); $("<div class=\"datagrid-ma

  • jQueryUI Sortable 应用Demo(分享)

    jQueryUI Sortable 应用Demo(分享)

    最近工作用需要设计一个自由布局的页面设计.我选了jQuery UI 的 sortable ,可以拖拽,自由排序 使用很方便,写一个demo,做个记录. 第一.单项目自由排序 下图效果 代码段: <script type="text/javascript"> $(function () { $("#box_wrap").sortable({ helper: "clone", placeholder: "box-holdplac

  • jQuery UI 实例讲解 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

  • jqueryUI tab标签页代码分享

    本文实例为大家分享了jqueryUI tab标签页的具体代码,供大家参考,具体内容如下 var temp=1; var arr=["我的首页"]; //×号点击关闭li $("#tabs").delegate( ".ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( &quo

  • js和jQuery以及easyui实现对下拉框的指定赋值方法

    js实现: 1. 通过让第i个option为selected实现选中第i个,代码如下:(id为下拉框id) (1) document.getElementById("id").options[i].selected=true; (2)document.getElementById("messagetoid").selectedIndex = 1;(选中第1个option) 2. 通过判别option的value值来实现,代码如下: document.getEleme

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

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

    页面文档载入后,为第一张图片添加class属性值为img1,为第二张图片添加class属性值img2,为第三张图片添加class属性img3,为第四张图片添加class属性值img4,这会使得每张图片的下半部分被上一张更大的图片给覆盖住. 当鼠标单击暴露在最上面的图片时,该图片在0.6秒内从原本大小放大150%,并逐渐减小不透明度直到完全消失,与此同时,其他所有图片在0.6秒内动态的放大并占据相应上一张图片的位置.全部动态效果结束后,消失不见的那张图片重新显示在最下面. <!DOCTYPE ht

  • jQuery 动画效果代码分享

    一．显示.隐藏 jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显示内容和隐藏内容. $('.show').click(function(){ //设置个触发事件 $('#box').show(); //显示 }); $('.hide').click(function(){ //设置个触发事件 $('#box').hide(); //隐藏 }); 在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)

  • jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

    jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

    这是一款基于jQuery的百叶窗焦点图动画,和之前介绍的CSS3百叶窗焦点图动画不同的是,它的兼容性更好,实用性更强,因为它是基于纯jQuery的,基本上所有浏览器都能够支持.焦点图的图片切换动画是百叶窗的动画方式,但也有几种不同的百叶窗动画,因此也不会觉得单调. 在线演示     源码下载 HTML代码 <div id="slider"> <img src="images/1.jpg" alt="我们1" title=&quo

  • jquery马赛克拼接翻转效果代码分享

    jquery马赛克拼接翻转效果代码分享

    jquery实现的非常漂亮的图片马赛克翻转效果,经测试图片切换过程非常酷,整个图片分成一个一个的小方格进行翻转变换,感兴趣的朋友快来学习学习吧 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery马赛克拼接翻转效果代码如下 <!DOCTYPE html> <head> <meta http-equiv="Conten

  • 不用jQuery实现的动画效果代码

    不用jQuery实现的动画效果代码

    不过随着新版本的升级, 体积也慢慢变大了.24KB, Minified and Gzipped 155KB, Uncompressed Code压缩并gzip输出24K, 也不小了.如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.看下面这个图片渐变效果, 其实纯js不到20行就可以搞定了. body {padding:0; margin:0;} #main {margin: 50px auto;border: 1px solid #ccc;width:700px} #main i

  • jQuery实现带有动画效果的回到顶部和底部代码

    jQuery实现带有动画效果的回到顶部和底部代码

    本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

  • jQuery实现带动画效果的多级下拉菜单代码

    jQuery实现带动画效果的多级下拉菜单代码

    本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-dow

  • jQuery Ajax 异步加载显示等待效果代码分享

    jQuery Ajax 异步加载显示等待效果代码分享

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • jQuery实现连续动画效果实例分析

    jQuery实现连续动画效果实例分析

    本文实例讲述了jQuery实现连续动画效果的方法.分享给大家供大家参考.具体如下: 这里介绍jQuery实现一连串的连续动画效果,将这些动画运用先设置好,然后在jQuery的作用下完成一个接一个的动画,这在网页游戏编写中是个基础但重要的动画生成技巧,对于前台设计来说也是有必要掌握的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-lx-animate-style-demo/ 具体代码如下: <!DOCTYPE html PUBLI

随机推荐