当前位置:首页 > 网页设计 >Javascript >

javascript实现右下角广告框效果_js右下角广告样式

发布时间:2017-07-12 10:26:53 作者:佚名 阅读:(272)

做网站经常会遇到在网站右下角放一个广告,今天吾爱编程就我大家分享一下,网站右下角的广告代码,需要的朋友可以参考一下:

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript实现右下角广告框效果 --吾爱编程</title>
</head>
<body>
<script src="https://www.itbiancheng.com/static/js/jquery191.js"></script>
<script type="text/javascript">
$(function(){
    $(document).ready(function(){
    var divObj=document.createElement("div");
    divObj.innerHTML="<style type=\'text/css\'>#advbox{width: 300px;height: 250px;position: fixed;right: 0;bottom: 0;}.ad_v{ width: 310px;height: 250px;position: relative;}#icons{display: block;width: auto;height: 12px;line-height:12px;color: #7d7d7d;font-size: 12px;font-weight: bolder;position: absolute;right: 15px;top: -15px;cursor: pointer;}.hides{display: none;}</style><div id=\'advbox\'><div class=\'ad_v\'><span id=\'icons\'>关闭</span><a href=\'https://www.itbiancheng.com\'><img src=\'https://www.itbiancheng.com/uploads/allimg/160421/1-160421125320643.jpg\'</a></div></div>";
    var first=document.body.lastChild;//得到页面的最后一个元素
    document.body.insertBefore(divObj,first);
    });
    
    $(document).on('click', "#icons", function () {
        $("#advbox").hide();
    })    
})
</script>
</body>
</html>

欢迎分享转载→ javascript实现右下角广告框效果_js右下角广告样式

© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们