代码改变世界

JS实现 类似图片3D效果

2013-11-30 13:31 龙恩0707 阅读(...) 评论(...) 编辑 收藏

     其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已,代码很乱,所以现在有业余时间研究了下,其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路。效果如下:

可能录制的时候 有点卡 。

具体思路: 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>
View Code

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>
View Code

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 });
View Code

JS实现类似于图片3D效果