一个CSS+jQuery实现的放大缩小动画效果


Posted in Javascript onFebruary 19, 2014

今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来。

都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理,那就需要用到CSS3动画了。

功能 : 在上方的按钮上滑动,可以切换各个page,点击下方的各个page,也可以切换收缩还是展开状态。
一个CSS+jQuery实现的放大缩小动画效果 
初始效果预览

<!DOCTYPE html> 
<html> 
<head> 
<title> CSS+jQuery动画效果 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="铁锚"> 
<style> 
body{ 
z-index: 0; 
width: 100%; 
min-height: 400px; 
} 
.pages{ 
position: absolute; 
} 
.current{ 
position: absolute; 
z-index: 12 !important; 
left: 0px !important; 
} 
.page1{ 
background-color: #a5cfff; 
z-index: 1; 
width: 300px; 
height:280px; 
top: 100px; 
left: 0px; 
} 
.page2{ 
background-color: #b1ca54; 
z-index: 2; 
width: 250px; 
height:270px; 
top: 160px; 
left: 0px; 
} 
.page3{ 
background-color: #c2c6c9; 
z-index: 3; 
width: 200px; 
height:260px; 
top: 220px; 
left: 0px; 
} 
.page4{ 
background-color: #ef9e9c; 
z-index: 4; 
width: 150px; 
height:250px; 
top: 250px; 
left: 0px; 
} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
$(function(){ 
// 增长 
function increase($div,e){ 
var expstatus = $div.data("expstatus"); 
if(!expstatus){ 
// 没有展开过 
$div.data("expstatus","yes"); 
} 
var style = $div.attr("style"); 
$div.addClass("current").attr("styleold",style); 
// 
$div.stop(); 
$div.animate({ 
opacity:0.9, 
width:"400px", 
height: "400px", 
top: "100px", 
left: "0px" 
},600) 
.animate({ 
opacity:1.0 
},30); e.stopPropagation(); 
return false; 
}; 
// 还原 
function resize(e){ 
// 所有的都移除 
var $page1 = $(".current.page1") ; 
$page1.stop(); 
$page1.animate({ 
opacity:1.0, 
width:"300px", 
height: "280px", 
top: "100px", 
left: "0px" 
},600,null,function(){ 
$page1.removeClass("current").attr("style",""); 
}); 
var $page2 = $(".current.page2") ; 
$page2.stop(); 
$page2.animate({ 
opacity:1.0, 
width:"250px", 
height: "270px", 
top: "160px", 
left: "0px" 
},600,null,function(){ 
$page2.removeClass("current").attr("style",""); 
}); 
var $page3 = $(".current.page3") ; 
$page3.stop(); 
$page3.animate({ 
opacity:1.0, 
width:"200px", 
height: "260px", 
top: "220px", 
left: "0px" 
},600,null,function(){ 
$page3.removeClass("current").attr("style",""); 
}); 
var $page4 = $(".current.page4") ; 
$page4.stop(); 
$page4.animate({ 
opacity:1.0, 
width:"150px", 
height: "250px", 
top: "250px", 
left: "0px" 
},600,null,function(){ 
$page4.removeClass("current").attr("style",""); 
}); 
// 
var expstatus1 = $page1.data("expstatus"); 
if(expstatus1){ 
$page1.data("expstatus",null); 
} 
var expstatus2 = $page2.data("expstatus"); 
if(expstatus2){ 
$page2.data("expstatus",null); 
} 
var expstatus3 = $page3.data("expstatus"); 
if(expstatus3){ 
$page3.data("expstatus",null); 
} 
var expstatus4 = $page4.data("expstatus"); 
if(expstatus4){ 
$page4.data("expstatus",null); 
} 
if(e){ 
e.stopPropagation(); 
return false; 
} else { 
return true; 
} 
}; 
// 
$("#button1").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $page1 = $(".page1"); 
// 添加特定的 
return increase($page1,e); 
}).unbind("mouseout").bind("mouseout",function(e){ 
return resize(e); 
}); 
// 
$("#button2").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $page2 = $(".page2"); 
// 添加特定的 
return increase($page2,e); 
}).unbind("mouseout").bind("mouseout",function(e){ 
return resize(e); 
}); 
// 
$("#button3").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $page3 = $(".page3"); 
// 添加特定的 
return increase($page3,e); 
}).unbind("mouseout").bind("mouseout",function(e){ 
return resize(e); 
}); 
// 
$("#button4").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $page4 = $(".page4"); 
// 添加特定的 
return increase($page4,e); 
}).unbind("mouseout").bind("mouseout",function(e){ 
return resize(e); 
}); 
// 
$(".pages").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $this = $(this); 
// 添加特定的 
//return increase($this,e); 
}).unbind("mouseout").bind("mouseout",function(e){ 
// 所有的都移除 
//return resize(e); 
}); 
// 新的 
$(".pages").unbind("click touchstart").bind("click touchstart",function(e){ 
// 
var $this = $(this); 
var expstatus = $this.data("expstatus"); 
if(!expstatus){ 
// 没有展开过 
// 
return increase($this,e); 
} else { 
return resize(e); 
} 
}); 
// 
$("body").click(function(e){ 
// 所有的都移除 
return resize(null); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="pages page1">page1</div> 
<div class="pages page2">page2</div> 
<div class="pages page3">page3</div> 
<div class="pages page4">page4</div> 
<div style="background-color: #a5cfff;"> 
<button id="button1">第一页</button> 
<button id="button2">第2页</button> 
<button id="button3">第3页</button> 
<button id="button4">第4页</button> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
canvas红包照片实例分享
Feb 28 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 #Javascript
jQuery拖拽div实现思路
Feb 19 #Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 #Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 #Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 #Javascript
javascript动态向网页中添加表格实现代码
Feb 19 #Javascript
javascript实现动态侧边栏代码
Feb 19 #Javascript
You might like
php中一个完整表单处理实现代码
2011/11/10 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
jQuery参数列表集合
2011/04/06 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python修改操作系统时间的方法
2015/05/18 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
基于Python实现用户管理系统
2019/02/26 Python
Python 实现自动导入缺失的库
2019/10/29 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
蛋白质世界:Protein World
2017/11/23 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
写给保洁员表扬信
2014/01/08 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
人大调研汇报材料
2014/08/14 职场文书
义诊活动总结
2015/02/04 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis