jQuery实现图片卡片层叠式切换效果
本功能的开发，主要看到一个网站有这个功能，但是是flash做的，当时就吐血了，于是就自己研究用jquery来做一下，功能比较简单，没用进行美化，代码没有经过优化的，如果哪位高手可以优化修改下也不错！
好吧，废话就到这里！
模仿网站的地址：www.web-designers.cn（韩雪冬）
再做完这个效果
在一个模板网站找到个类似的功能
http://demo.cssmoban.com/cssthemes/hmtl5-template/index.html
非常之不错，很酷！
先上个图吧！
效果：
这个切换效果是最基本的，就3个图片切换
1.一个框架，主要用来存放切换图片层
2.3个div层，用来做切换层，当然，也可以做大于3个以上的
原理：先把3个层的div分别布局好，就像现在这个图片一样。首页，我们分别给3个层添加一个标识，用来区分3个对象层的，主要是用来切换的时候判断是哪个对象在什么位置，
再对他们进行切换！
先放一下他们的CSS布局样式：
body{ margin:0;} /*主框架*/ .out_warp{ position:relative; width:860px; height:400px; background:#ccc; margin: 100px auto 0 auto;z-index:-99;} /*左边层*/ .left{width:520px; height:260px; background:#F63;position:absolute; top:70px;left:0; z-index:0;} /*中间层*/ .cont{width:680px; height:340px; max-height:340px; max-width:680px; background:#096; position:absolute;top:30px;left:90px; z-index:1;} /*右边层*/ .right{width:520px; height:260px; background:#939;position:absolute;top:70px;left:340px; z-index:0;}
再放html代码：
<div id="out_warp" class="out_warp"> <div id="left" class="left" flat=""></div> <div id="cont" class="cont" flat=""></div> <div id="right" class="right" flat=""></div> </div> <div class="button"><input type="button" value="左" id="button_left"/> <input type="button" value="右" id="button_right"/> <input type="button" value="信息" id="button2" onclick="one();"/> </div>
jq操作代码：
$(function(){ init();//初始化 //首次为他们标识，为了切换做好准备 function init(){ $('.right').attr('flat', 'right'); $('.left').attr('flat', 'left'); $('.cont').attr('flat', 'cont'); } ; //看他们的标识的状态 $("#button2").click(function(){ alert('left:'+$('.left').attr('flat')+' cont:'+$('.cont').attr('flat')+' right:'+$('.right').attr('flat')); }); //记录移动对象，用于区分 var left_move; //记录左边的对象 var cont_move; //记录中间的对象 var right_move; //记录右边的对象 var flat; //判断按了左或是右 /// /切换动画后，修改flat标识,该赋值方式为向左转 var to_left=function(){ left_move.attr('flat', 'right');//左图层变成右 cont_move.attr('flat', 'left');//中间边左边 right_move.attr('flat', 'cont');//右边边中间 }; //向右转 var to_right=function(){ left_move.attr('flat', 'cont');//左图层变成右 cont_move.attr('flat', 'right');//中间边左边 right_move.attr('flat', 'left');//右边边中间 }; //判定当前的图层块，并做对应的操作 function left_obj(){ left_move=$("[flat=left]");//取得左边对象，进行记录 //以下为切换效果，到底是向哪个方向，就需要判断按了是哪个按钮 if(flat=="left"){ left_move.animate({ left:"340px", //向最右边切换 width: "520px", height: "260px" }, 10 );//10,以最快的速度变换位置 left_move.css("z-index","0"); }else if(flat=="right"){ left_move.animate({ //向最中间切换 left:"90px", top:"30px", width: "680px", height: "340px" }, 150 ); left_move.css("z-index","1"); } }//end_left_obj function right_obj(){ right_move=$("[flat=right]"); //取得最右边对象 if(flat=="left"){ right_move.animate({ left:"90px", //向中间切换 top:"30px", width: "680px", height: "340px" }, 150 ); right_move.css("z-index","1"); //最高层 }else if(flat=="right"){ right_move.animate({ left:"0", //向最左边切换 top:"70px", width: "520px", height: "260px" }, 10 ); //10,以最快的速度变换位置 right_move.css("z-index","0"); } }//end_right_obj function cont_obj(){ cont_move=$("[flat=cont]"); if(flat=="left"){ cont_move.animate({ //向最左边切换 left:"0", top:"70px", width: "520px", height: "260px" }, 100 ); }else if(flat=="right"){ cont_move.animate({ //向最右边切换 left:"340px", top:"70px", width: "520px", height: "260px" }, 100 ); } cont_move.css("z-index","0"); }//end_cont_obj //点击向左切换 $("#button_left").click(function(){ flat="left"; left_obj(); right_obj(); cont_obj(); to_left(); //修改标识 }) //点击向右切换 $("#button_right").click(function(){ flat="right"; left_obj(); right_obj(); cont_obj(); to_right(); //修改标识 }) });//end_function
当然，我们也可以重新修改最外层的框架以及切换层的高度和宽度，还可以对它们进行美工，做得更加漂亮，效果就更好了！如果采用CSS3进行设计就非常好，可以忽略ie
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>123</title> <style> body{ margin:0;} .out_warp{ position:relative; width:860px; height:400px; background:#ccc; margin: 100px auto 0 auto;z-index:-99;} .left{width:520px; height:260px; background:#F63;position:absolute; top:70px;left:0; z-index:0;} .cont{width:680px; height:340px; max-height:340px; max-width:680px; background:#096; position:absolute;top:30px;left:90px; z-index:1;} .right{width:520px; height:260px; background:#939;position:absolute;top:70px;left:340px; z-index:0;} img{ width:100%; height:100%;}/*自适应div高、宽*/ </style> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <div id="out_warp" class="out_warp"> <div id="left" class="left" flat=""><img src="1.jpg"/></div> <div id="cont" class="cont" flat=""><img src="2.jpg"/></div> <div id="right" class="right" flat=""><img src="3.jpg"/></div> </div> <div class="button"><input type="button" value="左" id="button_left"/> <input type="button" value="右" id="button_right"/> <input type="button" value="信息" id="button2" onclick="one();"/> </div> <script type="text/javascript" language="javascript"> $(function(){ init();//初始化 function init(){ $('.right').attr('flat', 'right'); $('.left').attr('flat', 'left'); $('.cont').attr('flat', 'cont'); } ; $("#button2").click(function(){ alert('left:'+$('.left').attr('flat')+' cont:'+$('.cont').attr('flat')+' right:'+$('.right').attr('flat')); }); //记录移动对象，用于区分 var left_move; //记录左边的对象 var cont_move; //记录中间的对象 var right_move; //记录右边的对象 var flat; //判断按了左或是右 /// /切换动画后，修改flat标识,该赋值方式为向左转 var to_left=function(){ left_move.attr('flat', 'right');//左图层变成右 cont_move.attr('flat', 'left');//中间边左边 right_move.attr('flat', 'cont');//右边边中间 }; //向右转 var to_right=function(){ left_move.attr('flat', 'cont');//左图层变成右 cont_move.attr('flat', 'right');//中间边左边 right_move.attr('flat', 'left');//右边边中间 }; // //判定当前的图层块，并做对应的操作 function left_obj(){ left_move=$("[flat=left]");//取得左边对象，进行记录 if(flat=="left"){ left_move.animate({ left:"340px",//最右边的左边 width: "520px", height: "260px", }, 10 );//10,以最快的速度变换位置 left_move.css("z-index","0"); }else if(flat=="right"){ left_move.animate({ left:"90px",//中间 top:"30px", width: "680px", height: "340px", }, 150 ); left_move.css("z-index","11"); } }//end left function right_obj(){ right_move=$("[flat=right]"); if(flat=="left"){ right_move.animate({ left:"90px", /*中间*/ top:"30px", width: "680px", height: "340px", }, 150 ); right_move.css("z-index","1"); //最高层 }else if(flat=="right"){ right_move.animate({ left:"0",//最左边对象位置 top:"70px", width: "520px", height: "260px", }, 10 );//10,以最快的速度变换位置 right_move.css("z-index","0"); } }//end right function cont_obj(){ cont_move=$("[flat=cont]"); if(flat=="left"){ cont_move.animate({ left:"0", top:"70px", width: "520px", height: "260px", }, 100 ); }else if(flat=="right"){ cont_move.animate({ left:"340px", top:"70px", width: "520px", height: "260px", }, 100 ); } cont_move.css("z-index","0"); } $("#button_left").click(function(){ flat="left"; left_obj(); right_obj(); cont_obj(); to_left(); }) $("#button_right").click(function(){ flat="right"; left_obj(); right_obj(); cont_obj(); to_right(); }) }); </script> </body> </html>
文章就写到这里，本人是个新手，如有哪里写不好或错漏，欢迎指点！！！
