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


Posted in Javascript onSeptember 24, 2013

今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来。
都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理,那就需要用到CSS3动画了。

<!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 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",""); 
}); 
e.stopPropagation(); 
return false; 
}; 
// 
$("#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); 
}); 
// 
$("body").click(function(e){ 
// 所有的都移除 
return resize(e); 
}); 
}); 
</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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
Prototype Function对象 学习
Jul 12 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 #Javascript
基于jquery实现的省市区级联无ajax
Sep 24 #Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 #Javascript
jquery $.each()使用探讨
Sep 23 #Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 #Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 #Javascript
JS 实现导航栏悬停效果
Sep 23 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP Document 代码注释规范
2009/04/13 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Random 在 Python 中的使用方法
2018/08/09 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
详解Python中第三方库Faker
2020/09/25 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
西雅图的买手店:Totokaelo
2019/10/19 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
运动员代表致辞
2015/07/29 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB