jQuery UI实现动画效果代码分享
更新时间：2018年08月19日 11:04:37 作者：耳火耳火
这篇文章给大家总结了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>
初始效果：
点击后效果：
相关文章
这篇文章主要介绍了jQuery实现简易商城系统项目实操，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-06-06
这段代码压缩到100行内，而且扩展方便，可以非常轻松的增减控件的数量,使用非常简单。2010-08-08
文章内容为初次使用Jqplot图表插件的测试代码，仅供参考。2016-06-06
jQuery插件EnPlaceholder实现输入框提示文字
EnPlaceholder插件支持密码框哦！实际对比同类的placeholder插件在ie等浏览器下效果要好很多！下面我们来具体探讨下此插件的使用方法吧。2015-06-06
这篇文章主要介绍了jQuery实现带动画效果的多级下拉菜单代码,可实现点击渐隐渐显效果,涉及jQuery页面元素的遍历及链式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
表单作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。下面通过实例代码给大家介绍jQuery 实现表单验证功能2017-07-07
jquery DIV撑大怎么让滚动条滚到最底部，类似问题想必大家都有遇到过吧，下面与大家分享下具体的处理代码，感兴趣的朋友可以了解下哈2013-06-06
jQuery里提供三种方法来改变页面元素的样式，虽然它们和传统方法的思想相通，但是却节省了许多代码2014-06-06
这篇文章主要介绍了jQuery实现简单的下拉菜单导航功能,涉及jQuery针对页面元素的遍历与节点修改相关操作技巧,需要的朋友可以参考下2017-12-12
瀑布流布局最近真的很流行，很多人都跟我一样想知道是怎么做出来的吧，经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,这里分享给大家，有需要的小伙伴参考下吧。2015-04-04
最新评论