類似qq空間預覽圖片外掛
阿新 • • 發佈：2018-12-18
首次接觸面向物件程式設計，寫了一個類似qq空間預覽相簿的圖片小東西，沒什麼難點，程式碼有點low，見笑了，程式碼如下
只是用於記錄學習，實用性可能不是太強
| //例項化相簿 的物件 |
| new show(yArr,nArr) // 原圖和縮圖的集合 |
// m-list-content-item 需要觸發的含有圖片的盒子類名，只是用作觸發，圖片顯示依然根絕例項化時傳的陣列為準
| function show(items,navItems) { |
| this.imgs = items;// 所有圖片集合 |
|
this.navImgs = navItems;// 所有縮圖集合 ， imgs 和 navImgs 應該一一對應，區別只是navImgs 是縮圖 |
| this.a = false; |
| /*當前已經滾動的長度*/ |
|
this.roundLong = 0; |
| /*當前圖片所在下標*/ |
| this.imgIndex = 0; |
| this.initElem(); |
| this.initEvent(); // 事件需要呼叫 elem |
| /* |
| * 獲取圖片列表*/ |
| }; |
| show.prototype = { |
| constructor:show, |
| /* |
| * 初始化所有元素*/ |
| initElem:function () { |
| /*網頁寬高*/ |
| this.widWidth = document.documentElement.clientWidth < 960 ? 960 : document.documentElement.clientWidth; |
| this.winHeight = document.documentElement.clientHeight; |
| /*獲取所有的圖片*/ |
| this.items = document.getElementsByClassName('m-list-content-item'); |
| /* |
| * |
| * 結構 |
| * div.fixedDiv |
| * div.twoDiv |
| * div.imgDiv |
| * img |
| * rightDiv |
| * leftDiv |
| * div.navDiv |
| * span.RDiv |
| * span.LDiv |
| * div.ulDiv |
| * ul.ul |
| * div.closeDiv |
| * |
| * */ |
| this.fixedDiv = document.createElement('div'); |
| this.twoDiv = document.createElement('div'); |
| this.imgDiv = document.createElement('div'); |
| this.img = document.createElement('img'); |
| this.closeDiv = document.createElement('span'); |
| this.navDiv = document.createElement('div'); |
| this.RDiv = document.createElement('span'); |
| this.LDiv = document.createElement('span'); |
| this.ulDiv = document.createElement('div'); |
| this.ul = document.createElement('ul'); |
| this.ul.id = 'ptId'; |
| this.rightDiv = document.createElement('div'); |
| this.leftDiv = document.createElement('div'); |
| /* fixedDiv*/ |
| this.fixedDiv.style.position='fixed'; |
| this.fixedDiv.style.padding='20px 0'; |
| this.fixedDiv.style.width = '100%'; |
| this.fixedDiv.style.height = '100%'; |
| this.fixedDiv.style.background = 'rgba(0,0,0,.5)'; |
| this.fixedDiv.style.zIndex='2'; |
| this.fixedDiv.style.top='0'; |
| this.fixedDiv.style.display= 'none'; |
| document.body.appendChild(this.fixedDiv); |
| /* |
| * 第二層容器*/ |
| this.twoDiv.style.width = (this.widWidth * 0.6)+'px'; |
| this.twoDiv.style.minWidth = this.widWidth*0.6+'px'; |
| this.twoDiv.style.height = (this.winHeight - 40)+'px'; |
| this.twoDiv.style.margin = '0 20%'; |
| this.twoDiv.style.position=this.imgDiv.style.position='relative'; |
| this.twoDiv.style.background = 'rgba(0,0,0,.8)'; |
| this.fixedDiv.appendChild(this.twoDiv); |
| /* |
| *t圖片容器 |
| * */ |
| this.imgDiv.style.width='100%'; |
| this.imgDiv.style.height=(this.winHeight - 40)*0.8 +'px'; |
| this.imgDiv.style.lineHeight=(this.winHeight - 40)*0.8 +'px'; |
| this.imgDiv.style.padding='20px 0'; |
| this.imgDiv.style.textAlign='center'; |
| /* |
| * rightDiv leftDiv*/ |
| this.rightDiv.style.width = this.leftDiv.style.width = '30%'; |
| this.rightDiv.style.height = this.leftDiv.style.height = '100%'; |
| this.rightDiv.style.top = this.leftDiv.style.top = '0'; |
| this.rightDiv.style.right=this.leftDiv.style.left='0'; |
| this.rightDiv.style.textAlign='right'; |
| this.leftDiv.style.textAlign='left'; |
| this.rightDiv.style.fontSize=this.leftDiv.style.fontSize='58px'; |
| this.rightDiv.style.paddingRight=this.leftDiv.style.paddingLeft='20px'; |
| this.rightDiv.innerText='>'; |
| this.leftDiv.innerText='<'; |
| /*圖片標籤*/ |
| this.img.style.maxWidth='100%'; |
| this.img.style.verticalAlign='middle'; |
| this.img.style.maxHeight='100%'; |
| this.img.src = ''; |
| /*關閉整個div按鈕*/ |
| this.closeDiv.style.display='inline-block'; |
| this.closeDiv.style.width='80px'; |
| this.closeDiv.style.height='80px'; |
| this.closeDiv.innerText='X'; |
| this.closeDiv.style.background='#000'; |
| this.closeDiv.style.position=this.navDiv.style.position=this.rightDiv.style.position = this.leftDiv.style.position='absolute'; |
| this.closeDiv.style.top='-30px'; |
| this.closeDiv.style.right='-30px'; |
| this.closeDiv.style.borderRadius='50%'; |
| this.closeDiv.style.cursor=this.RDiv.style.cursor=this.LDiv.style.cursor=this.rightDiv.style.cursor=this.leftDiv.style.cursor='pointer'; |
| this.closeDiv.style.color='#fff'; |
| /* |
| * 底部滾動*/ |
| this.navDiv.style.background='#fff'; |
| this.navDiv.style.bottom='0'; |
| this.navDiv.style.width='100%'; |
| this.navDiv.style.height='100px'; |
| /* |
| * 底部滾動條內部*/ |
| this.RDiv.style.cssFloat='right'; |
| this.LDiv.style.cssFloat='left'; |
| this.RDiv.style.background=this.LDiv.style.background='#000'; |
| this.RDiv.style.display=this.LDiv.style.display='block'; |
| this.RDiv.style.width=this.LDiv.style.width='60px'; |
| this.RDiv.style.height=this.LDiv.style.height='100%'; |
| this.RDiv.style.color=this.LDiv.style.color=this.rightDiv.style.fontSize=this.leftDiv.style.fontSize='#d7d7d7'; |
| this.RDiv.style.fontSize=this.LDiv.style.fontSize='38px'; |
| this.RDiv.style.textAlign=this.LDiv.style.textAlign='center'; |
| this.RDiv.style.lineHeight=this.LDiv.style.lineHeight='100px'; |
| this.RDiv.innerText='>'; |
| this.LDiv.innerText='<'; |
| this.ulDiv.style.background='#000'; |
| this.ulDiv.style.cssFloat='left'; |
| this.ulDiv.style.width=(this.widWidth * 0.6)-120 +'px'; |
| this.ulDiv.style.height= '100%'; |
| this.ulDiv.style.overflow= 'hidden'; |
| /*ul*/ |
| console.log(this.imgs.length); |
| this.ul.style.width = (this.imgs. |