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_objfunction 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 rightfunction 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>

　　　　文章就写到这里，本人是个新手，如有哪里写不好或错漏，欢迎指点！！！

转载于:https://www.cnblogs.com/yyman001/archive/2012/07/29/2614033.html

jQuery实现图片卡片层叠式切换效果相关推荐

html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
Axure之实现图片自动循环切换效果
开心一笑 [男女的思维的确是不同,最近和老婆商量锻炼的事,因为我们俩都胖了,要开始锻炼.我第一个想到的是,安排在什么时间比较好:而她率先下单买了套运动服.昨天已经送到~~~] 视频教程大家好,我录制 ...
使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果
轮播应有的功能大致都有,分享给一些在学的朋友参考学习. <!DOCTYPE html> <html> <head lang="en"><m ...
Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
Jquery 广告图片轮播切换
要点: 1.鼠标移至图片上出现左右箭头,鼠标移出图片时,左右箭头消失 2.单击左右箭头时,显示上一个/下一个图片,当前数字背景为橙色,其他数字背景为#333333,第一个/最后一个图片显示时,单击箭 ...
jQuery圆点图片轮播切换插件
下载地址效果很普通的网站banner图片切换插件,但又是一款很实用的jQuery轮播图插件,可以点击圆点控制图片索引. dd:
Android中实现类似探探中图片左右滑动切换效果
偶然之间发现探探的左右滑动的图片挺好玩,试着去做了下,再到后来,看到许多大神也推出了同样仿探探效果的博客,从头到尾阅读下来,写得通俗易懂,基本上没什么问题.于是,实现仿探探效果的想法再次出现在脑海中. ...
JS图片轮播切换效果实现
效果演示地址:http://6689.one/WebEffects/pictureplay.html 实现代码如下: </pre> <pre name="code" ...
ios 自定义View 卡片滑动切换效果
说明控件基于UIView封装完成,采用UIPanGestureRecognizer监听自身的触摸事件,以此处理各种滑动动画操作. 内容之间可以循环切换,采用类似tableView加载机制,达到复用效 ...

jQuery实现图片卡片层叠式切换效果

jQuery实现图片卡片层叠式切换效果相关推荐

最新文章

热门文章