<!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