CSDN网页右下角正方形广告#可弹出缩进#可关闭【源码】
作者:admin 时间:2021-4-30 14:26:39 浏览:网页右下角正方形广告很常见，不过CSDN网站的这个右下角广告设计得非常好，它可以弹出缩进，也可关闭，比大多数那些只能直接关闭的设计好，于是我就把它的源码拿下来，现分享给同样喜欢这个设计的人。
网页右下角正方形广告
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="kp_box_476" data-pid="476">
<script src="indexSuperise.js"></script>
<script>
window.csdn.indexSuperise({
smallMoveImg:'small.png',
bigMoveImg:'big.png',
link:'http://www.webkaka.com/',
trackSuperId:476,
smallMove:'notMove',
trackSId:1063});
</script>
<img class="pre-img-lasy" data-src='1.png'>
</div>
<style type="text/css">
.meau-gotop-box{
bottom:0px !important;
}
</style>
<div class="meau-gotop-box"></div>
</body>
</html>
代码解释
1、广告用到jquery，因此需要在开头引用jquery文件jquery.min.js。
如果程序运行失败，广告出不来或无效果，请确保该引用文件位置是正确的。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2、设置广告大图和小图
如下js代码中，smallMoveImg设置的是小图，bigMoveImg设置的是大图，图片可以是网络引用，如http://***/big.jpg，link设置的广告链接地址。
<script>
window.csdn.indexSuperise({
smallMoveImg:'small.png',
bigMoveImg:'big.png',
link:'http://www.webkaka.com/',
trackSuperId:476,
smallMove:'notMove',
trackSId:1063
});
</script>
3、程序包包含的indexSuperise.js文件，是主要js程序，这里面有几个地方需要注意一下。
1）、设置广告图片位置
x.css(
{
bottom: "50px"
});
这里设置的是广告图片距离网页底部的距离。
2）、css文件的引用
p = '<link href="indexSuperise.css" rel="stylesheet">';
这里设置css文件地址
3）、广告特效文件qrcode.min.js引用
var u = document.createElement("script");
u.src = "qrcode.min.js", o("body").append(u)这里设置广告特效文件qrcode.min.js的引用，该文件包含在程序包里，不可缺少。
4）、关闭广告设置
{
/* 关闭广告 */
x.remove()
/*
使用下面语句 点击关闭按钮后广告永久不再显示；
若把 localStorage 改为 sessionStorage，
则重启浏览器（或新开标签页）时广告重新显示。
*/
// x.remove(), localStorage.setItem("indexSuperise_" + c.trackSuperId, !1)
})看代码注释。localStorage 和 sessionStorage 保存cookie的区别是localStorage保存的cookie是永久的，而sessionStorage保存的cookie在重启浏览器（或新开标签页）后丢失。
特别注意，使用localStorage或sessionStorage，要同时修改第105行的代码localStorage或sessionStorage。
h = "false" === localStorage.getItem("indexSuperise_" + c.trackSuperId),相关文章推荐
相关文章
x
- 站长推荐
