开发者社区云计算文章正文

网页右下角广告窗口

2023-09-15 22

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 网页右下角广告窗口

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