技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSDN网页右下角正方形广告#可弹出缩进#可关闭【源码】

作者:admin    时间:2021-4-30 14:26:39    浏览:

网页右下角正方形广告很常见,不过CSDN网站的这个右下角广告设计得非常好,它可以弹出缩进,也可关闭,比大多数那些只能直接关闭的设计好,于是我就把它的源码拿下来,现分享给同样喜欢这个设计的人。

网页右下角正方形广告
网页右下角正方形广告

demodownload

完整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>

execcodegetcode

代码解释

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.jpglink设置的广告链接地址。

<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在重启浏览器(或新开标签页)后丢失。

特别注意,使用localStoragesessionStorage,要同时修改第105行的代码localStoragesessionStorage

h = "false" === localStorage.getItem("indexSuperise_" + c.trackSuperId),

相关文章推荐

相关文章
    x
    x
    • 站长推荐