CSS+jQuery实现的一个放大缩小动画效果
更新时间：2013年09月24日 11:35:16 作者：
因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了，好了下面为大家介绍下如何实现这个放大缩小动画效果
今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。
都是定死了的。因为需求就只有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>
都是定死了的。因为需求就只有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>
相关文章
这篇文章主要介绍了Jquery通过Ajax访问XML数据，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了jQuery插件zTree实现的基本树与节点获取操作,结合实例形式分析了jQuery树形插件zTree构造基本树与针对节点的获取操作相关实现技巧,需要的朋友可以参考下2017-03-03
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。2011-01-01
jquery+swiper组件实现时间轴滑动年份tab切换效果
这篇文章主要介绍了jquery+swiper组件实现时间轴滑动年份tab切换效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
本文使用大名顶顶的jquery来实现QQ校友的DIV模拟窗口，QQ的检验一些都是非常棒的2010-03-03
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。本文主要对表单验证插件-Validation进行案例分析，详细介绍，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
"元素拖拽改变大小"其实和"元素拖拽"一个原理,以下附出源码原型，弄明白了原理再扩展其他实际应用，思路就变得简单、清晰得多了2012-12-12
这篇文章介绍了jQuery操作value值的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了jquery使用jxl插件导出excel的具体实现步骤,需要的朋友可以参考下2014-04-04
这篇文章主要为大家详细介绍了jquery实现直播弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论