JS实现点击登录弹出窗口同时背景色渐变动画效果_

1、JS实现点击登录弹出窗口同时背景色渐变动画效果_ 本文实例讲解并描述了JS实现点击登录弹出窗口同时背景色渐变动画效果。分享给大家供大家参考，具体如下： 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; /取得页面的高宽 function getBodySize() var bodySize = ; with(document.documentElement) bodySize0 = (scrollWidthclientWidth)?scrollWidth:clientWidth

4、;/假如滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度 bodySize1 = (scrollHeightclientHeight)?scrollHeight:clientHeight;/假如滚动条的高度大于页面的高度，取得滚动条的高度，否则取高度 return bodySize; /创建遮盖层 function popCoverDiv() if (M(cover_div) /假如存在遮盖层，则让其显示 M(cover_div).style.display = block; else /否则创建遮盖层 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; /设置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层大小循环增大 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);/设置超时10毫秒 /打开DIV层 function open() change(); showLogin(); popCoverDiv() void(0);/不进行任何操作,如：a href=#aaa/a /关闭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