提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery动画CSS 实现 一个 效果 放大 缩小
2023-06-13 09:15:18 时间
今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。

都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。

功能:在上方的按钮上滑动，可以切换各个page,点击下方的各个page，也可以切换收缩还是展开状态。
 
初始效果预览
复制代码代码如下:

<!DOCTYPEhtml>
<html>
<head>
<title>CSS+jQuery动画效果</title>
<metaname="Generator"content="EditPlus">
<metaname="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>
<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
//增长
functionincrease($div,e){
varexpstatus=$div.data("expstatus");
if(!expstatus){
//没有展开过
$div.data("expstatus","yes");
}
varstyle=$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();
returnfalse;
};
//还原
functionresize(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","");
});
//

varexpstatus1=$page1.data("expstatus");
if(expstatus1){
$page1.data("expstatus",null);
}
varexpstatus2=$page2.data("expstatus");
if(expstatus2){
$page2.data("expstatus",null);
}
varexpstatus3=$page3.data("expstatus");
if(expstatus3){
$page3.data("expstatus",null);
}
varexpstatus4=$page4.data("expstatus");
if(expstatus4){
$page4.data("expstatus",null);
}

if(e){
e.stopPropagation();
returnfalse;
}else{
returntrue;
}
};
//
$("#button1").unbind("mouseover").bind("mouseover",function(e){
//
var$page1=$(".page1");
//添加特定的
returnincrease($page1,e);

}).unbind("mouseout").bind("mouseout",function(e){
returnresize(e);

});
//
$("#button2").unbind("mouseover").bind("mouseover",function(e){
//
var$page2=$(".page2");
//添加特定的
returnincrease($page2,e);

}).unbind("mouseout").bind("mouseout",function(e){
returnresize(e);
});
//
$("#button3").unbind("mouseover").bind("mouseover",function(e){
//
var$page3=$(".page3");
//添加特定的
returnincrease($page3,e);

}).unbind("mouseout").bind("mouseout",function(e){
returnresize(e);
});
//
$("#button4").unbind("mouseover").bind("mouseover",function(e){
//
var$page4=$(".page4");
//添加特定的
returnincrease($page4,e);

}).unbind("mouseout").bind("mouseout",function(e){
returnresize(e);
});

//
$(".pages").unbind("mouseover").bind("mouseover",function(e){
//
var$this=$(this);
//添加特定的
//returnincrease($this,e);
}).unbind("mouseout").bind("mouseout",function(e){
//所有的都移除
//returnresize(e);
});
//新的
$(".pages").unbind("clicktouchstart").bind("clicktouchstart",function(e){
//
var$this=$(this);
varexpstatus=$this.data("expstatus");
if(!expstatus){
//没有展开过
//
returnincrease($this,e);
}else{
returnresize(e);
}
});
//
$("body").click(function(e){
//所有的都移除
returnresize(null);
});
});
</script>
</head>

<body>
<divclass="pagespage1">page1</div>
<divclass="pagespage2">page2</div>
<divclass="pagespage3">page3</div>
<divclass="pagespage4">page4</div>

<divstyle="background-color:#a5cfff;">
<buttonid="button1">第一页</button>
<buttonid="button2">第2页</button>
<buttonid="button3">第3页</button>
<buttonid="button4">第4页</button>
</div>
</body>
</html>

相关文章