index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>腾讯首页弹窗</title>
<style>
body{
height: 970px;
margin: 0;
padding: 0;
}
.ad{
/* display:block; */
position: fixed;
bottom: 0;
right: 0;
width: 400px;
height: 0px;
/* border: 2px solid black; */
}
.btn{
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.bg{
width: 400px;
}
</style>
</head>
<body>
<iframe src="http://www.qq.com" width="100%" height="100%" frameborder="0"></iframe>
<div id="myAD" class="ad">
<img id="myClose" class="btn" src="img/close.jpg" alt="">
<a href="#"><img class="bg" src="img/0.jpg" alt=""></a>
</div>
</body>
<script>
var myAD = document.getElementById("myAD");
var myClose = document.getElementById("myClose");
var adHeight = 0;
myClose.onclick = function(){
myAD.style.display = "none";
}
var show = setInterval(adShowFunc,20);
function adShowFunc(){
if(adHeight<225){
adHeight +=2;
myAD.style.height = adHeight + "px";//字符串
} else{
myAD.style.height = "225px";
adHeight = 225;
clearInterval(show);
}
}
window.onload = function(){
show = setInterval(adShowFunc,5);
}