JS实现 类似图片3D效果
2013-11-30 13:31 龙恩0707 阅读(2616) 评论(5) 编辑 收藏 举报其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已，代码很乱，所以现在有业余时间研究了下，其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路。效果如下：
可能录制的时候 有点卡 。
具体思路： 1. 首先和左右箭头切换图片思路是一模一样的 点击下一页按钮时候 外层容器left = 一张图片的宽度×当前的索引index 同理 点击上一页按钮也一样 然后加点动画效果改变相对应的宽度和高度 就可以实现。思路其实很简单的。所以就半斤八两就写了一个，希望各位高手包涵啊！所以也没有什么好解释的地方。直接上代码，下面有源码附件 具体的可以看看源码。
HTML代码如下：
1 <div class="slider"> 2 <a href="javascript:void(0);" class="prev btn"></a> 3 <div class="scroll"> 4 <ul class="scrollContainer"> 5 <li class="panel"> 6 <a href="" class="inside" target="_blank"> 7 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/1.jpg" /> 8 <span>Alexander McQueen秋季1</span> 9 </a> 10 </li> 11 <li class="panel"> 12 <a href="" class="inside" target="_blank"> 13 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/2.jpg" /> 14 <span>Gustavsson演绎朋克的性感</span> 15 </a> 16 </li> 17 <li class="panel"> 18 <a href="" class="inside" target="_blank"> 19 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/3.jpg" /> 20 <span>Alexander McQueen秋季3</span> 21 </a> 22 </li> 23 <li class="panel"> 24 <a href="" class="inside" target="_blank"> 25 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/4.jpg" /> 26 <span>Alexander McQueen秋季4</span> 27 </a> 28 </li> 29 <li class="panel"> 30 <a href="" class="inside" target="_blank"> 31 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/5.jpg" /> 32 <span>Alexander McQueen秋季5</span> 33 </a> 34 </li> 35 <li class="panel"> 36 <a href="" class="inside" target="_blank"> 37 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/6.jpg" /> 38 <span>Alexander McQueen秋季6</span> 39 </a> 40 </li> 41 <li class="panel"> 42 <a href="" class="inside" target="_blank"> 43 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/7.jpg" /> 44 <span>Alexander McQueen秋季7</span> 45 </a> 46 </li> 47 </ul> 48 </div> 49 <a href="javascript:void(0);" class="next btn"></a> 50 </div>
CSS代码如下：
1 <style> 2 *{margin:0;padding:0;list-style-type:none;} 3 a,img{border:0;} 4 body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} 5 a{color:#000;outline:none;text-decoration:none;} 6 a:hover{text-decoration:underline;} 7 /* slider */ 8 .slider{width:730px;height:312px;overflow:hidden;position:relative;margin:20px auto 0;} 9 .scroll{float:left;display:inline;width:660px;height:312px;margin-left:30px;overflow:hidden;position:relative;} 10 .scrollContainer{position: relative;left:0px;} 11 .scrollContainer .current .inside{width:230px;height:288px;} 12 13 .scrollContainer .panel{width:170px;height:235px;float: left;padding-right:30px;overflow:hidden;} 14 15 .panel .inside{display:block;position:relative; } 16 .inside img{height:100%;width:100%;} 17 .scroll li .inside span{ 18 position:absolute; 19 bottom:0px; 20 left:16px; 21 width:197px; 22 height:37px; 23 line-height:37px; 24 display:none; 25 background-color:#c69; 26 font-size:14px;color:#FFF; 27 text-align:center; 28 z-index:1000; 29 } 30 .scroll li.current .inside span{display:block;} 31 32 .slider a.btn{background:url('images/index.png') no-repeat;} 33 .slider a.btn{float:left;margin-top:92px;width:20px; height:39px; } 34 35 .slider a.prev{background-position:0 -61px;} 36 .slider a.prev:hover{background-position:0 -102px;} 37 38 .slider a.next{right:0;background-position:-50px -61px;} 39 .slider a.next:hover{background-position:-50px -102px;} 40 41 .scrollContainer .current {width:230px;height:312px;} 42 </style>
JS代码如下：
1 /* 2 * JS 3D效果 3 * @author tugenhua 4 * @date 2013-11-28 5 * @email 879083421@qq.com 6 */ 7 function LeftAndRight(options) { 8 9 this.config = { 10 container : '.slider', // 最外层容器 11 scrollContainer : '.scrollContainer', // 外层容器ul 12 prevBtn : 'prev', // 上一页按钮 13 nextBtn : 'next', // 下一页按钮 14 currentCls : 'current', // 当前的类名 15 addItemWidth : 70, // 中间突出增加的宽度 16 changeBeforeWH : {width:'170px',height:'235px'}, // 改变前的宽度和高度 17 changeAfterWH : {width:'230px',height:'312px'}, // 改变后的宽度和高度 18 callback : null // 每次点击后的回调函数 @param 当前的第几个 19 }; 20 21 this.cache = { 22 curIndex : 0 // 保存当前li的索引 23 }; 24 25 this.init(options); 26 } 27 28 LeftAndRight.prototype = { 29 30 constructor: LeftAndRight, 31 32 init: function(options) { 33 this.config = $.extend(this.config, options || {}); 34 var self = this, 35 _config = self.config, 36 _cache = self.cache; 37 38 // 初始化计算ul的宽度 39 self._calculateUlWidth(); 40 41 // 所有事件 42 self._bindEnv(); 43 }, 44 _calculateUlWidth: function(){ 45 var self = this, 46 _config = self.config, 47 _cache = self.cache; 48 49 if($(_config.scrollContainer) && $(_config.scrollContainer + ' li').length > 0){ 50 51 $(_config.scrollContainer).each(function(index,item){ 52 53 var liWidth = $('li',item).outerWidth(), 54 liLen = $('li',item).length; 55 56 // 初始化时候 让中间的li 增加class current 57 var centerLi = $('li',item)[_cache.curIndex + 1]; 58 59 $(centerLi).animate({'width':_config.changeAfterWH.width,'height':_config.changeAfterWH.height}); 60 61 62 $(item).css("width",liWidth * liLen + _config.addItemWidth); 63 }); 64 65 } 66 }, 67 _bindEnv: function() { 68 var self = this, 69 _config = self.config, 70 _cache = self.cache; 71 72 if($(_config.container).length > 0) { 73 74 $(_config.container).each(function(index,item){ 75 76 // 事件代理 77 $(item).unbind('click'); 78 $(item).bind('click',function(e){ 79 80 var target = e.target; 81 82 83 // 目前点击元素小于3个 用if else判断 否则的话 建议用switch 84 if($(target).hasClass(_config.prevBtn)){ 85 self._prev($(this)); 86 87 }else if($(target).hasClass(_config.nextBtn)){ 88 self._next($(this)); 89 90 }else { 91 92 } 93 }); 94 }); 95 } 96 }, 97 _prev: function(container){ 98 var self = this, 99 _config = self.config, 100 _cache = self.cache; 101 102 if(_cache.curIndex < 1) { 103 return; 104 } 105 _cache.curIndex--; 106 self._publicMethod(_cache.curIndex,container); 107 108 }, 109 _next: function(container){ 110 var self = this, 111 _config = self.config, 112 _cache = self.cache; 113 114 _cache.curIndex++; 115 116 $(_config.scrollContainer).each(function(index,item){ 117 var liLen = $('li',item).length; 118 if(_cache.curIndex >= liLen -2) { 119 _cache.curIndex = liLen -3; 120 return; 121 } 122 self._publicMethod(_cache.curIndex,container); 123 }); 124 125 126 127 }, 128 _publicMethod: function(curIndex,container){ 129 var self = this, 130 _config = self.config, 131 _cache = self.cache; 132 133 $(_config.scrollContainer,container).each(function(index,item){ 134 var liWidth = $('li',item).outerWidth(), 135 liHeight = $('li',item).outerHeight(), 136 liLen = $('li',item).length; 137 138 139 self._prevNextProcess({ulContainer:item,liW:liWidth,liH:liHeight,liLen:liLen,index:curIndex}); 140 }); 141 }, 142 _prevNextProcess: function(cfg) { 143 var self = this, 144 _config = self.config, 145 _cache = self.cache; 146 147 var curLi = $('li',cfg.ulContainer)[cfg.index + 1]; 148 $('li',cfg.ulContainer).each(function(index,item){ 149 $(item).css({'width':_config.changeBeforeWH.width,'height':_config.changeBeforeWH.height}); 150 }); 151 $(curLi).animate({'width':_config.changeAfterWH.width,'height':_config.changeAfterWH.height}); 152 $(cfg.ulContainer).animate({'left':-cfg.index * cfg.liW},function(){ 153 154 }); 155 var cindex = cfg.index + 2; 156 _config.callback && $.isFunction(_config.callback) && _config.callback(cindex); 157 158 } 159 }; 160 // 初始化代码 161 $(function(){ 162 new LeftAndRight({ 163 callback: function(index){ 164 //console.log(index); 165 } 166 }); 167 });
