JS實(shí)現(xiàn)點(diǎn)擊登錄彈出窗口同時(shí)背景色漸變動(dòng)畫(huà)效果_

1、JS實(shí)現(xiàn)點(diǎn)擊登錄彈出窗口同時(shí)背景色漸變動(dòng)畫(huà)效果_ 本文實(shí)例講解并描述了JS實(shí)現(xiàn)點(diǎn)擊登錄彈出窗口同時(shí)背景色漸變動(dòng)畫(huà)效果。分享給大家供大家參考，具體如下： html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title/title STYLE #login position: relative; display: none; top: 20px; left: 30px; background-color: #ffffff; text-align: center; border: solid 1px; p

2、adding: 10px; z-index: 1; body background-color: #0099CC; .STYLE1 color: #FFFF00 /STYLE script type=text/javascript var W = screen.width;/取得屏幕辨別率寬度 var H = screen.height;/取得屏幕辨別率高度 function M(id) return document.getElementById(id);/用M()方法代替document.getElementByIdx_x(id) function MC(t) return documen

3、t.createElement(t);/用MC()方法代替document.createElement_x(t) ; /推斷掃瞄器是否為IE function isIE() return (document.all window.ActiveXObject !window.opera) ? true : false; /取得頁(yè)面的高寬 function getBodySize() var bodySize = ; with(document.documentElement) bodySize0 = (scrollWidthclientWidth)?scrollWidth:clientWidth

4、;/假如滾動(dòng)條的寬度大于頁(yè)面的寬度，取得滾動(dòng)條的寬度，否則取頁(yè)面寬度 bodySize1 = (scrollHeightclientHeight)?scrollHeight:clientHeight;/假如滾動(dòng)條的高度大于頁(yè)面的高度，取得滾動(dòng)條的高度，否則取高度 return bodySize; /創(chuàng)建遮蓋層 function popCoverDiv() if (M(cover_div) /假如存在遮蓋層，則讓其顯示 M(cover_div).style.display = block; else /否則創(chuàng)建遮蓋層 var coverDiv = MC(div); document.body.a

5、ppendChild(coverDiv); coverDiv.id = cover_div; with(coverDiv.style) position = absolute; background = #CCCCCC; left = 0px; top = 0px; var bodySize = getBodySize(); width = bodySize0 + px height = bodySize1 + px; zIndex = 0; if (isIE() filter = Alpha(Opacity=60);/IE逆境 else opacity = 0.6; /讓登陸層顯示為塊 fu

6、nction showLogin() var login=M(login); login.style.display = block; /設(shè)置DIV層的樣式 function change() var login = M(login); login.style.position = absolute; login.style.border = 1px solid #CCCCCC; login.style.background =#F6F6F6; var i=0; var bodySize = getBodySize(); login.style.left = (bodySize0-i*i*4)

7、/2+px; login.style.top = (bodySize1/2-100-i*i)+px; login.style.width = i*i*4 + px; login.style.height = i*i*1.5 + px; popChange(i); /讓DIV層大小循環(huán)增大 function popChange(i) var login = M(login); var bodySize = getBodySize(); login.style.left = (bodySize0-i*i*4)/2+px; login.style.top = (bodySize1/2-100-i*i

8、)+px; login.style.width = i*i*4 + px; login.style.height = i*i*1.5+ px; if(i=10) i+; setTimeout(popChange(+i+),10);/設(shè)置超時(shí)10毫秒 /打開(kāi)DIV層 function open() change(); showLogin(); popCoverDiv() void(0);/不進(jìn)行任何操作,如：a href=#aaa/a /關(guān)閉DIV層 function close() M(login).style.display = none; M(cover_div).style.display = none; void(0); /script /head body br br div align=centera href=javascript:open(); class=STYLE1登陸/a/div div id=login span用戶登陸/span div id=panel lable用戶名: /lableinput type=text size=20 / lable密碼: /lableinput type=password size=20 input typ