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

今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。

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

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


代码如下:

<!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>

赞 (0)

相关推荐

  • jQuery实现响应浏览器缩放大小并改变背景颜色

    /*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();

  • 基于jquery的滚动鼠标放大缩小图片效果

    今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|

  • zShowBox 图片放大展示jquery版 兼容性

    zShowBox 图片放大展示jquery版 兼容性

    zShowBox.js 复制代码 代码如下: /* * zShowBox (图片放大展示) */ function zShowBox(domChunk) { //为每张图片链接加上 class="zshowbox" var zcounter = 0; $(domChunk + ' a').each(function () { var a_href = $(this)[0].href.toLowerCase(); var file_type = a_href.substring(a_hr

  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

  • jQuery当鼠标悬停时放大图片的效果实例

    jQuery当鼠标悬停时放大图片的效果实例

    这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcach

  • jquery单击文字或图片内容放大并居中显示

    jquery单击文字或图片内容放大并居中显示

    我们想要实现的效果是: 点击一张小图,会在页面的居中位置显示一张大图. 使用了animate动画函数,有从小图到大图,从小图位置到居中位置的轨迹. 支持IE7及以上浏览器,火狐.谷歌浏览器. 大图得居中位置,我主要使用了如下代码: var width=$('.alert').find('img').width();//大图得宽高 var height=$('.alert').find('img').height(); var lwidth=$(window).width();//屏幕中页面可见区

  • jQuery实现图片放大预览实现原理及代码

    jQuery实现图片放大预览实现原理及代码

    对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览.以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

  • jQuery div层的放大与缩小简单实现代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .content { border: 1px solid #ccc; width: 440px; overflow: hidden; margin: 10p

  • 基于jquery实现一张图片点击鼠标放大再点缩小

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.3.min.js"></script> <sc

  • jquery 实现京东商城、凡客商城的图片放大效果

    jquery 实现京东商城、凡客商城的图片放大效果

    效果如下:看下我们的演示,"运行代码"后请刷新一次: JQzoom Demo div.notes{ font-size:12px; } div.notes a{ color:#990000; } $(function() { $(".jqzoom").jqzoom(); }); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 要实现这样的效果,只需要在需要这样效果的页面的区域加入: 复制代码 代码如下: <link rel="styles

随机推荐