This article describes the effect of JS implementing the background color gradient animation effect while clicking on the login pop-up window. Share it for your reference, as follows:
<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;
padding: 10px;
z-index: 1;
}
body {
background-color: #0099CC;
}
.STYLE1 {color: #FFFF00}
</STYLE>
<script type="text/javascript">
var W = ;//Get screen resolution widthvar H = ;//Get screen resolution heightfunction M(id){
return (id);//Replace document.getElementByIdx_x(id) with M() method}
function MC(t){
return (t);//Replace document.createElement_x(t) with MC() method};
//Discern whether the browser is IEfunction isIE(){
return ( && && !) ? true : false;
}
//Get the height and width of the pagefunction getBodySize(){
var bodySize = [];
with() {
bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//If the width of the scroll bar is greater than the width of the page, get the width of the scroll bar, otherwise take the page width bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//If the height of the scroll bar is greater than the height of the page, get the height of the scroll bar, otherwise take the height }
return bodySize;
}
//Create a cover layerfunction popCoverDiv(){
if (M("cover_div")) {
//If there is a cover layer, let it display M("cover_div"). = 'block';
} else {
//Otherwise create a cover layer var coverDiv = MC('div');
(coverDiv);
= 'cover_div';
with() {
position = 'absolute';
background = '#CCCCCC';
left = '0px';
top = '0px';
var bodySize = getBodySize();
width = bodySize[0] + 'px'
height = bodySize[1] + 'px';
zIndex = 0;
if (isIE()) {
filter = "Alpha(Opacity=60)";//IE adversity } else {
opacity = 0.6;
}
}
}
}
//Let the login layer be displayed as a blockfunction showLogin()
{
var login=M("login");
= "block";
}
//Set the style of the DIV layerfunction change(){
var login = M("login");
= "absolute";
= "1px solid #CCCCCC";
="#F6F6F6";
var i=0;
var bodySize = getBodySize();
= (bodySize[0]-i*i*4)/2+"px";
= (bodySize[1]/2-100-i*i)+"px";
= i*i*4 + "px";
= i*i*1.5 + "px";
popChange(i);
}
//Let the DIV layer size be increased cyclicallyfunction popChange(i){
var login = M("login");
var bodySize = getBodySize();
= (bodySize[0]-i*i*4)/2+"px";
= (bodySize[1]/2-100-i*i)+"px";
= i*i*4 + "px";
= i*i*1.5+ "px";
if(i<=10){
i++;
setTimeout("popChange("+i+")",10);//Set timeout for 10 milliseconds }
}
//Open the DIV layerfunction open()
{
change();
showLogin();
popCoverDiv()
void(0);//No operation is performed, such as: <a href="#">aaa</a>}
//Close the DIV layerfunction close(){
M('login'). = 'none';
M("cover_div"). = 'none';
void(0);
}
</script>
</head>
<body>
<br>
<br>
<div align="center"><a href="javascript:open();" class="STYLE1">Log in</a></div>
<div >
<span>用户Log in</span>
<div >
<lable>username:&nbsp;</lable><input type="text" size="20" />
<lable>password:&nbsp;</lable><input type="password" size="20">
<input type="checkbox" /><lable>Log in</lable>
</div>
<input type="button" value="submit" />
<a href="javascript:close();">closure</a>
</div>
</body>
</html>
For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript search algorithm skills》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.