一个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 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
JS提交form表单实例分析
Dec 10 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
原生js实现九宫格拖拽换位
Jan 26 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 和 MySQL 基础教程(二)
2006/10/09 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
js闭包学习心得总结
2018/04/17 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python优先队列实现方法示例
2017/09/21 Python
python学习基础之循环import及import过程
2018/04/22 Python
Sanic框架配置操作分析
2018/07/17 Python
Python: 传递列表副本方式
2019/12/19 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
运动会广播稿400字
2014/01/25 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
工作检讨书大全
2015/01/26 职场文书
幼儿园个人总结
2015/02/28 职场文书