【分享】 自闭症儿童网络画展 JS效果 超喜欢这些画，大爱。 http://show.baidu.com/ 给孤独一个爱的抱抱。 其实，我们都挺孤单，在陌生的城市，上班、下班、挤公交。 下面附上 这个JS效果！（注意：没有测试IE9以下浏览器兼容性） 明天就放假了，同学们到哪里去玩？有女朋友陪吗？ <! DOCTYPE html> <html> <head> <title></title> <mce:style type="text/css"><!-- .box{ text-align:center; margin:20px 0; overflow:hidden;} .images{height:325px;margin:0 auto; position:relative;} .image{325px; height:300px;position:absolute; border:1px solid #ccc;padding:2px;background:#000;cursor:pointer} .buttons{} --></mce:style><style type="text/css" _mce_bogus="1"><!-- .box{ text-align:center; margin:20px 0; overflow:hidden;} .images{height:325px;margin:0 auto; position:relative;} .image{325px; height:300px;position:absolute; border:1px solid #ccc;padding:2px;background:#000;cursor:pointer} .buttons{} --></style> </head> <body> <div class="box"> <div class="images" id="slideImages"> <div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_001.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_001.jpg" width="100%" height="100%"></div> <div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_002.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_002.jpg" width="100%" height="100%"></div> <div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_003.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_003.jpg" width="100%" height="100%"></div> <div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_004.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_004.jpg" width="100%" height="100%"></div> <div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_005.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_005.jpg" width="100%" height="100%"></div> </div> </div> <div class="buttons"> <input type="button" value="幻灯片1" onclick="a.play(0)"> <input type="button" value="幻灯片2" onclick="a.play(1)"> <input type="button" value="幻灯片3" onclick="a.play(2)"> <input type="button" value="幻灯片4" onclick="a.play(3)"> <input type="button" value="幻灯片5" onclick="a.play(4)"> </div> </body> <mce:script type="text/javascript"><!-- function Slide(){ this.maxWidth = 425; this.maxHeight = 300; this.slideNumber = 5;// 幻灯片数量 this.stepMarginLeft = 100;//图片之间的距离 this.index = parseInt(this.slideNumber/2);//默认展示中间的图片 } Slide.eain = function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b}; Slide.$ = function(id){ return document.getElementById(id);}; Slide.prototype = { init:function(){ var step , i; var _this = this; this.slideNumber = this.slideNumber - 1;//程序需要计算称偶数 this.step = step = parseInt(this.slideNumber/2) + 1; //中间值 this.minWidth = parseInt(this.maxWidth / step); this.minHeight = parseInt(this.maxHeight / step); this.stepWidth = parseInt(this.minWidth / (step - 1)); this.stepHeight = parseInt(this.minHeight / (step - 1)); this.slideImgList = this.getSlideImages();//图片列表 for(i=0; i<this.slideImgList.length; i++){ this.slideImgList[i].onclick = (function(i){ return function(){ _this.play(i); } })(i); } this.go(); }, getSlideImages:function(){ return Slide.$("slideImages").getElementsByTagName("DIV"); }, go:function(){ var step = this.step var minWidth = this.minWidth; var minHeight = this.minHeight; var stepWidth = this.stepWidth; var stepHeight = this.stepHeight; var imgList = this.slideImgList; var stepMarginLeft = this.stepMarginLeft; var slideNumber = this.slideNumber var i = 0; var j = parseInt(slideNumber/2 + 1);//中间值 var arr = this.calculationPosititon(this.index, slideNumber); var w, h, t, l, z, ele; while(i < slideNumber+1){ if( (i+1)< j ){ w = minWidth+( (i+1) * stepWidth); h = minHeight+( (i+1) * stepHeight); t = (this.maxHeight - h) / 2; l = (i+1) * stepMarginLeft; z = i+1; }else if((i+1) == j){ w = this.maxWidth; h = this.maxHeight; t = 0; l = (i+1) * stepMarginLeft; z = i+1; }else{ w = minWidth+( (slideNumber - i) * stepWidth); h = minHeight+( (slideNumber - i) * stepHeight); t = (this.maxHeight - h) / 2; l = (i+1) * stepMarginLeft + this.maxWidth - w; z = slideNumber - i; } ele = imgList[ arr[i] ]; this.animate(ele, 'width', w); this.animate(ele, 'height', h); this.animate(ele, 'top', t); this.animate(ele, 'left', l); ele.style.zIndex = z; i++; } }, play:function(index){ this.index = index; this.go(); }, calculationPosititon:function(index, z){ var arr = []; var i = 0; var step = z/2; var d = index > step ? function(){ return index - step + i > z ? index - step + i - z - 1 : index - step + i; }:function(){ return i+step+index+1 > z ? i+step+index - z : i+step+index+1; } for(i; i< z+1; i++){ arr[i] = d(); } return arr; }, css:function(elem, key, value){ if(elem.currentStyle){ return elem.currentStyle[key]; }else{ return document.defaultView.getComputedStyle(elem, null).getPropertyValue(key); } }, animate:function(elem, style, val, callBack, time, px){ px = px || 'px'; time = time || 150; var b = parseFloat(this.css(elem, style)) || 0; val = val - b; var st = new Date().getTime(); var a = setInterval(function(){ var t = new Date().getTime() - st; if( t > time){t = time;clearInterval(a);callBack&&callBack();} elem.style[style] = parseFloat(Slide.eain(t, b, val, time));// + px; }, 10); return a; } } setTimeout(function(){ window.a = new Slide(); a.init(); },2000); // --></mce:script> </html>