Js write mask layer landing box and couplet ads and automatically follow the scroll bar scroll
- 2020-03-30 02:47:45
- OfStack
Use JS to write mask layer landing box and couplet ads and automatically follow the scroll bar scroll hold so that the user can always see
Well, it is too late to talk nonsense, the code is particularly detailed comments, see the code.
You can try to improve it by yourself, this is still more fun.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404291530241.gif? 201432915311 ">
Well, it is too late to talk nonsense, the code is particularly detailed comments, see the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Escaped prisoner </title>
<style type="text/css">
#zhezhao{
position:absolute;
z-index:1000;
background:#ccc;
width:100%;
height:100%;
opacity: 0.8;
filter:alpha(opacity=80);
display:none;
}
#denglu{
position:absolute;
z-index:2000;
width:100%;
height:200px;
margin:150px auto;
display:none;
}
#denglu table{
margin:auto;
}
.content{
width:800px;
margin:0 auto;
}
#zuo{
position:absolute;
left:3px;
top:100px;
border:5px solid purple;
background:#ccc;
color:purple;
font-size:50px;
text-align:center;
height:200px;
width:85px;
z-index:2000;
}
#you{
position:absolute;
right:3px;
top:100px;
border:5px solid purple;
background:#ccc;
color:purple;
font-size:50px;
text-align:center;
height:200px;
width:85px;
z-index:2000;
}
</style>
<script type="text/javascript">
var h=0;
function fun1(){ //Here, the login box and the AD box are also automatically scrolled along with the scroll bar and are always visible to the user
h=document.body.clientHeight;
document.getElementById('zhezhao').style.height=h+"px";
window.onscroll=function(){
//Change the location of the login box
//Gets the distance from the top of the scroll bar
var t=document.body.scrollTop+document.documentElement.scrollTop;//Compatible with Google and firefox
//I'm going to give this value to the margin top of the denglu div
document.getElementById('denglu').style.marginTop=150+t+"px";
document.getElementById('zuo').style.top=100+t+"px";
document.getElementById('you').style.top=100+t+"px";
}
}
function show(){ //Activate their
//The mask layer
document.getElementById('zhezhao').style.display='block';
//Login layer
document.getElementById('denglu').style.display='block';
}
function hide(){ //Hide their
//The mask layer
document.getElementById('zhezhao').style.display='none';
//Login layer
document.getElementById('denglu').style.display='none';
}
</script>
</head>
<body style="margin:0;" onload="fun1();">
<div id="zuo"> beauty <br/> female </div>
<div id="you"> handsome <br/> The elder brother </div>
<div id="zhezhao"></div>
<div id="denglu">
<div>
<table bgcolor="#ccc" width="350">
<tr>
<td> The login </td><td><a href="javascript:hide();"> Shut down </a></td>
</tr>
<tr>
<td> account </td>
<td><input type="text"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value=" The login "/></td>
</tr>
</table>
<a id="a-1" href="javascript:void();">test</a>
</div>
</div>
<a href="javascript:show();"> The login </a>
<div class="content" style="background:red;">
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="content" style="background:green;">
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="content" style="background:blue;">
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<br/>
<br/>
</body>
</html>
You can try to improve it by yourself, this is still more fun.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404291530241.gif? 201432915311 ">