<!doctype html> <html> <head> <meta charset="utf-8"> <title>网页右下角广告窗口</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> #div { width:300px; height:250px; background-color:#00bc12; position:fixed; bottom:-250px; right:0px; transition:all 1.5s ease; } #close { width:20px; height:20px; background-color:green; text-align:center; line-height:20px; float:right; margin:10px; cursor:pointer; } .center{ font-size: 12px; color: #fff; } </style> </head> <body> <div id="div"> <div id="close" οnclick="closeWin()">×</div> <div class="center">我是展示内容</div> </div> <script> var div; window.onload = function() { div = document.getElementById("div"); div.style.bottom = "0px" } function closeWin() { var close = document.getElementById("close"); if (close.innerText == "×") { close.innerText = "√"; div.style.bottom = "-200px" } else { close.innerText = "×"; div.style.bottom = "0px" } } </script> </body> </html>
