<!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" onclick="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>
<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" onclick="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>
