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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
javascript用函数实现对象的方法
May 14 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
js验证密码强度解析
Mar 18 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
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
js 单引号 传递方法
2009/06/22 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
采购部部门职责
2013/12/15 职场文书
消防安全汇报材料
2014/02/08 职场文书
任命书怎么写
2014/06/04 职场文书
2015年财政所工作总结
2015/04/25 职场文书
党员心得体会范文2016
2016/01/23 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android