又一个滑动效果
为一群友写的。
HTML
View Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>Untitled Document</title>
6 <style>
7 * {margin:0;padding:0;}
8 ul {list-style:none;}
9 body{font-size:12px; line-height:1.5;}
10 #box {margin:100px auto;width:1000px; height:400px; position:relative;}
11 #box li {width:300px;height:400px; position:absolute;top:0;left:0; background:#333; text-align:center;font-size:150px;font-weight:700;color:#fff;z-index:0; cursor:pointer;overflow:hidden; background:#000;}
12 #box li img {width:100%;height:100%;opacity:.35;filter:alpha(opacity=35)}
13 #prev, #next { position:absolute;top:50%;margin-top:-25px;width:50px;height:50px; background:red; color:#fff; font-weight:700;text-align:center; line-height:50px;}
14 #prev {left:-50px;}
15 #next {right:-50px;}
16 #text { background:#000;color:#fff; position:absolute; top:410px;left:0;height:100px;overflow:hidden;width:1000px;}
17 #text div {position:absolute; top:100px;left:0;padding:10px;}
18 </style>
19 </head>
20 <body>
21 <div id="box">
22 <a href="#" id="prev">prev</a>
23 <ul>
24 <li><img src="1.jpg" alt="" title=""/></li>
25 <li><img src="1.jpg" alt="" title=""/></li>
26 <li><img src="1.jpg" alt="" title=""/></li>
27 <li><img src="1.jpg" alt="" title=""/></li>
28 <li><img src="1.jpg" alt="" title=""/></li>
29 <li><img src="1.jpg" alt="" title=""/></li>
30 <li><img src="1.jpg" alt="" title=""/></li>
31 <li><img src="1.jpg" alt="" title=""/></li>
32 <li><img src="1.jpg" alt="" title=""/></li>
33 <li><img src="1.jpg" alt="" title=""/></li>
34 <li><img src="1.jpg" alt="" title=""/></li>
35 <li><img src="1.jpg" alt="" title=""/></li>
36 <li><img src="1.jpg" alt="" title=""/></li>
37 <li><img src="1.jpg" alt="" title=""/></li>
38 <li><img src="1.jpg" alt="" title=""/></li>
39 </ul>
40 <div id="text">
41 <div>1暴雪或将像EA 、Zynga等知名游戏公司一样，开始研发iOS平台的移动游戏。</div>
42 <div>2这将是暴雪粉丝和苹果粉丝最为高兴的一条新闻了，在iOS领域，对暴雪来说的确是块处女地，确实是有着可以令暴雪大展拳脚的空间</div>
43 <div>3据国外媒体报道，暴雪公司(Blizzard)《魔兽世界》的首席设计师格雷格·斯垂特(Greg Street)最近表示，公司有意针对iPhone和iPad等苹果iOS设备开发游戏</div>
44 <div>4暴雪公司对于产品品质的要求苛刻到难以想象，他们甚至不惜用无限期的跳票来换取游戏的完美表现，而这也保证了“暴雪出品必属经典”这块金金字招牌屹立十余年不倒</div>
45 <div>5因此，力求“完美大作”的暴雪若真的投身iOS开发游戏，那么很有可能将会出现一款新的标杆式的iOS 游戏，而它若成功延续暴雪的光环，那么未来iOS游戏的体验也或被提升到一个新的高度。</div>
46 <div>6北京时间2月23日消息，据国外网站报道宏碁Iconia Tab A510 终于获得了FCC批准，这款四核心的平板电脑准备在美国市场上出售。</div>
47 <div>7宏碁Iconia Tab A510搭载谷歌Android 4.0冰淇淋三明治和新一代1.3GHz NVIDIA Tegra 3四核处理器</div>
48 <div>8平板还配备了10.1英寸1280×800像素的触摸屏，Wi-Fi连接，后置500万像素和前置130万像素摄像头，杜比移动音效</div>
49 <div>9宏碁Iconia Tab A510搭载谷歌Android 4.0冰淇淋三明治和新一代1.3GHz NVIDIA Tegra 3四核处理器。平板还配备了10.1英寸1280×800像素的触摸屏</div>
50 <div>10Wi-Fi连接，后置500万像素和前置130万像素摄像头，杜比移动音效，HDMI输出和16GB的内置存储空间，配备蓝牙、Wi-Fi 和 GPS 等「指定」的规格，而 3G 或是 4G 规格则尚无数据。</div>
51 <div>11值得注意的是，宏碁Iconia Tab A510将于三月登陆欧洲市场，售价为399欧元（约528美元）</div>
52 <div>12Google今天宣布，Google Translate服务刚刚加入了对第46种语言的支持，不过该语言相当特殊，不是来自某个国家或地区，而是“世界语”(Esperanto)</div>
53 <div>13世界语又称国际语，是波兰医生柴门霍夫(Ludovic Lazarus Zamenhof)人为创造的语种，1887年发表于他的著作《第一本书》(Unua Libro)，其目的是希望所有人分享，以此实现世界语言的大同，打破“巴别塔”障碍</div>
54 <div>14当然，愿望是美好的，现实中却是行不通的，125年之后说这种语言的全球也不过几万人，还有一些从出生就跟着父母学习。</div>
55 <div>15Google表示，支持世界语很大程度上是象征性的，目的是强调Google翻译服务和世界语的目标一样，都是加强和简化人与人之间的交流。</div>
56 </div>
57 <a href="#" id="next">next</a>
58 </div>
59 <script src="slide.js"></script>
60 <script>
61 new slide();
62 </script>
63 </body>
64 </html>
JS:
1 function slide(){
2 return this.init.apply(this,arguments);
3 }
4 slide.prototype = {
5 init:function(opts){
6 var opt = this.extend({
7 outerID:'box',
8 textBoxID:'text',
9 prev:'prev',
10 next:'next',
11 disNum:9,//默认显示个数
12 sacle:0.8,//缩放比例
13 width:300,//原始图片宽度
14 height:400,//原始图片高度
15 auto:true,//是否自动切换
16 timer:5000//自动切换时间间隔
17 },opts || {});
18 var _this = this;
19 this.opt = opt;
20 this.outer = this.$(opt.outerID);
21 this.prev = this.$(opt.prev);
22 this.next = this.$(opt.next);
23 this.oUl = this.outer.getElementsByTagName('ul')[0];
24 this.lis = this.oUl.getElementsByTagName('li');
25 this.text = document.getElementById(opt.textBoxID).getElementsByTagName('div');
26 this.len = this.lis.length;
27 this.outerWidth = this.outer.offsetWidth;
28 this.iCenter = Math.floor(opt.disNum / 2);
29 this.space = Math.round((this.outerWidth - opt.width) / (opt.disNum - 1)) ;
30 this.iSort = [];
31 this.tSort = [];
32 this.property = [];
33 this.timer = null;
34 this.sliding = false;
35 this.p = {'width':50,'height':50,'top':opt.height/2,'left':this.outerWidth/2,'zIndex':0};
36 this.cretaeProperty();
37 for(var i=0;i<this.len ;i++){this.iSort.push(this.lis[i]),this.tSort.push(this.text[i])};
38 this.iSort.unshift(this.iSort.pop());
39 this.tSort.unshift(this.tSort.pop());
40 if(opt.auto){
41 this.timer = setInterval(function(){_this.doNext();},opt.timer);
42 }
43 this.itemHandler();
44 this.outerHandler();
45 this.slider();
46 this.prev.onclick = function(){_this.doPrev();}
47 this.next.onclick = function(){_this.doNext();}
48 },
49 outerHandler:function(){
50 var _this = this,opt = this.opt;
51 this.outer.onmouseover = function(){
52 if(_this.timer) clearInterval(_this.timer);
53 };
54 this.outer.onmouseout = function(){
55 if(opt.auto){
56 _this.timer = setInterval(function(){_this.doNext();},opt.timer);
57 }
58 }
59 },
60 itemHandler:function(){
61 var opt = this.opt,_this = this;
62 for(var i=0;i<this.len;i++){
63 (function(i){
64 _this.iSort[i].onclick = function(){
65 if(_this.sliding) return;
66 _this.sliding = true;
67 var m = this.index-1;
68 if(m < _this.iCenter){
69 for (var k = 0; k < _this.iCenter - m; k++) {
70 _this.iSort.unshift(_this.iSort.pop());
71 _this.tSort.unshift(_this.tSort.pop());
72 }
73 _this.slider();
74 }else if(m > _this.iCenter){
75 for (var k = 0; k < m - _this.iCenter; k++) {
76 _this.iSort.push(_this.iSort.shift());
77 _this.tSort.push(_this.tSort.shift());
78 }
79 _this.slider();
80 }
81 };
82 _this.iSort[i].onmouseover = function(){
83 var m = this.index-1;
84 if(m == _this.iCenter) return;
85 var img = this.getElementsByTagName('img')[0];
86 _this.animate(img,{'opacity':1});
87 };
88 _this.iSort[i].onmouseout = function(){
89 var m = this.index-1;
90 if(m == _this.iCenter) return;
91 var img = this.getElementsByTagName('img')[0];
92 _this.animate(img,{'opacity':.35});
93 }
94 })(i);
95 }
96 },
97 doPrev:function(){
98 if(this.sliding) return;
99 this.sliding = true;
100 this.iSort.unshift(this.iSort.pop());
101 this.tSort.unshift(this.tSort.pop());
102 this.slider();
103 },
104 doNext:function(){
105 if(this.sliding) return;
106 this.sliding = true;
107 this.iSort.push(this.iSort.shift());
108 this.tSort.push(this.tSort.shift());
109 this.slider();
110 },
111 slider:function(){
112 var opt = this.opt,_this = this;
113 for (i = 0; i < this.iSort.length; i++) this.oUl.appendChild(this.iSort[i]);
114 for (i = 0; i < this.iSort.length; i++){
115 this.iSort[i].index = i;
116 if(i<opt.disNum+2){
117 this.css(this.iSort[i],{'display':'block'});
118 this.animate(_this.tSort[_this.iCenter+1],{'top':0});
119 this.animate(this.iSort[i],this.property[i],function(){
120 _this.animate(_this.iSort[_this.iCenter+1].getElementsByTagName('img')[0],{'opacity':1},function(){
121 _this.sliding = false;
122 });
123 })
124 }else{
125 this.css(this.iSort[i],{
126 'width':50,
127 'height':50,
128 'display':'none',
129 'top':opt.height/2,
130 'left':this.outerWidth/2
131 })
132 };
133 if(i != this.iCenter+1){
134 this.css(this.iSort[i].getElementsByTagName('img')[0],{'opacity':'.35'});
135 this.css(this.tSort[i],'top',100);
136 }
137 }
138 },
139 $:function(id){
140 return typeof id=='string' ? document.getElementById(id) : id
141 },
142 css:function(el,key,value){
143 if(arguments.length === 3){
144 this.setStyle(el,key,value);
145 }else if(arguments.length === 2){
146 if(typeof key == 'string'){
147 key = key.replace(/-\w/g,function(a){return a.charAt(1).toUpperCase()});
148 return (el.style[key] == '') ? (el.currentStyle || document.defaultView.getComputedStyle(el,null))[key] : el.style[key];
149 }else if(typeof key == 'object'){
150 for( var name in key){
151 this.setStyle(el,name,key[name]);
152 }
153 }
154 };
155 },
156 setStyle:function(el,key,value){
157 var reg = /(width|height|top|left|right|bottom)/ig;
158 key = key.replace(/-\w/g,function(a){return a.charAt(1).toUpperCase()});
159 if (reg.test(key)) {
160 el.style[key] = value + 'px';
161 }else if(key === 'opacity'){
162 el.style.filter = "alpha(opacity=" + value*100 + ")";
163 el.style.opacity = value;
164 }else{
165 el.style[key] = value;
166 }
167 },
168 cretaeProperty:function(){
169 var opt = this.opt;
170 var i = 0,j=0,len=opt.disNum;
171 this.property.push(this.p);
172 for(;i<len;i++){
173 if (i <= this.iCenter) {
174 this.property.push({
175 'width': Math.round(opt.width * Math.pow(opt.sacle, this.iCenter - i)),
176 'height':Math.round(opt.height * Math.pow(opt.sacle, this.iCenter - i)),
177 'left':i*this.space,
178 'top':Math.round((opt.height - Math.round(opt.height * Math.pow(opt.sacle, this.iCenter - i)))/2),
179 'zIndex':i
180 });
181 }else{
182 this.property.push({
183 'width': Math.round(opt.width * Math.pow(opt.sacle, i - this.iCenter)),
184 'height':Math.round(opt.height * Math.pow(opt.sacle, i - this.iCenter)),
185 'left':this.outerWidth - (this.iCenter - (i%this.iCenter ? i%this.iCenter : this.iCenter))*this.space - Math.round(opt.width * Math.pow(opt.sacle, i - this.iCenter)),
186 'top':Math.round((opt.height - Math.round(opt.height * Math.pow(opt.sacle, i - this.iCenter)))/2),
187 'zIndex':this.iCenter - (i%this.iCenter ? i%this.iCenter : this.iCenter)
188 });
189 }
190 };
191 this.property.push(this.p);
192 },
193 animate:function(el,opts,callback,aniFn){
194 var _easeInOutCubic = function(pos) {
195 if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 3);
196 return 0.5 * (Math.pow((pos - 2), 3) + 2);
197 };
198 opts = opts || {};
199 var _this = this;
200 var deStyle = {},D = Date,d = new D,e,T=500,o, F = function(x){ return (aniFn || _easeInOutCubic)(x)};
201 for(var i in opts){
202 if(i=='opacity') deStyle[i] = this.css(el, i);
203 else deStyle[i] = parseInt(this.css(el, i));
204 };
205 return e = setInterval(function(){
206 var z = Math.min(1,(new D - d)/T);
207 for(var i in opts){
208 o = deStyle[i]-0 + (opts[i] - deStyle[i])*F(z);
209 _this.css(el,i,o);
210 }
211 if(z === 1){
212 clearInterval(e);
213 if (callback && typeof callback == 'function') callback();
214 }
215 },16);
216 },
217 extend:function(target,source){
218 for(var key in source) target[key] = source[key];
219 return target;
220 }
221 }
效果图
