小广告效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 14px;
box-sizing:border-box;
}
body{
background: url(http://joymepic.joyme.com/article/uploads/allimg/201511/1448602825502582.gif);
}
#ad{
height: 250px;
width: 350px;
border: solid 1px #aaa;
position: fixed;
right: 0;
bottom: -250px;
}
#close{
position: absolute;
right: 20px;
top: 10px;
cursor: pointer;
display: block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
background: #000;
color: #fff;
}
p:first-of-type{
width: 100%;
line-height: 40px;
height: 40px;
background: #0aa;
position: absolute;
top: 0;
left: 0;
padding-left: 20px;
}
p:first-of-type>span:first-of-type{
font-weight: bold;
}
textarea{
position: absolute;
left: 0;
top: 40px;
width: 350px;
height: 170px;
border: none;
}
p:last-of-type{
width: 100%;
line-height: 40px;
height: 40px;
background: #0aa;
position: absolute;
bottom: 0;
left: 0;
}
p:last-of-type>input{
position: absolute;
right: 20px;
top: 10px;
}
</style>
</head>
<body>
<div id="ad">
<p>
<span>请注意</span>
<span id="close">x</span>
</p>
<div>
<textarea></textarea>
</div>
<p>
<input type="submit">
</p>
</div>
<script type="text/javascript">
var oad = document.getElementById('ad');
var close = document.getElementById('close');
var timer1,timer2;
var count=-250;
// 弹出广告
function up(){
clearInterval(timer1);
timer1 = setInterval(function(){
count++;
oad["style"]["bottom"] = count+"px";
if(count == 0){
window.clearInterval(timer1);
}
},5);
}
function down() {
timer2 = setInterval(function(){
count--;
oad["style"]["bottom"] = count+"px";
if(count == -250){
clearInterval(timer2);
setTimeout(function(){
timer1 = setInterval(function(){
count++;
oad["style"]["bottom"] = count+"px";
if(count == 0){
window.clearInterval(timer1);
}
},5);
},3000);
}
},5);
}
window.onload = up;
close.onclick = down;
</script>
</body>
</html>
WEB前端学习交流群21 598399936
