一个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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
MooTools 1.2介绍
Sep 14 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
使用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生成随机用户名和密码的实现代码
2013/02/27 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP设置进度条的方法
2015/07/08 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
JS修改css样式style浅谈
2013/05/06 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript常用功能汇总
2015/07/05 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
python生成随机mac地址的方法
2015/03/16 Python
python获取本机外网ip的方法
2015/04/15 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
python FTP编程基础入门
2021/02/27 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
马智宇婚礼主持词
2014/03/22 职场文书
学习经验交流会主持词
2014/04/01 职场文书
效能风暴心得体会
2014/09/04 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书