當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【分享】 自闭症儿童网络画展 - JS效果
生活随笔
收集整理的這篇文章主要介紹了
【分享】 自闭症儿童网络画展 - JS效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
超喜歡這些畫，大愛。
http://show.baidu.com/
給孤獨(dú)一個愛的抱抱。
其實(shí)，我們都挺孤單，在陌生的城市，上班、下班、擠公交。
下面附上 這個JS效果！（注意：沒有測試IE9以下瀏覽器兼容性）
明天就放假了，同學(xué)們到哪里去玩？有女朋友陪嗎？
<! 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{width: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{width: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" οnclick="a.play(0)"> <input type="button" value="幻燈片2" οnclick="a.play(1)"> <input type="button" value="幻燈片3" οnclick="a.play(2)"> <input type="button" value="幻燈片4" οnclick="a.play(3)"> <input type="button" value="幻燈片5" οnclick="a.play(4)"> </div> </body> <mce:script type="text/javascript"><!-- function Slide(){ this.maxWidth = 425; this.maxHeight = 300; this.slideNumber = 5;// 幻燈片數(shù)量 this.stepMarginLeft = 100;//圖片之間的距離 this.index = parseInt(this.slideNumber/2);//默認(rèn)展示中間的圖片 } 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;//程序需要計(jì)算稱偶數(shù) 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>轉(zhuǎn)載于:https://www.cnblogs.com/idche/archive/2011/06/03/2071958.html
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的【分享】 自闭症儿童网络画展 - JS效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RHEL修改最大文件打开数,关于epol
- 下一篇： 企业组织机构代码验证JavaScript