|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSDN網(wǎng)頁(yè)右下角正方形廣告#可彈出縮進(jìn)#可關(guān)閉【源碼】
作者:admin 時(shí)間:2021-4-30 14:26:39 瀏覽:網(wǎng)頁(yè)右下角正方形廣告很常見(jiàn)，不過(guò)CSDN網(wǎng)站的這個(gè)右下角廣告設(shè)計(jì)得非常好，它可以彈出縮進(jìn)，也可關(guān)閉，比大多數(shù)那些只能直接關(guān)閉的設(shè)計(jì)好，于是我就把它的源碼拿下來(lái)，現(xiàn)分享給同樣喜歡這個(gè)設(shè)計(jì)的人。
網(wǎng)頁(yè)右下角正方形廣告
完整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://m.gazebo2go.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、廣告用到j(luò)query，因此需要在開(kāi)頭引用jquery文件jquery.min.js。
如果程序運(yùn)行失敗，廣告出不來(lái)或無(wú)效果，請(qǐng)確保該引用文件位置是正確的。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2、設(shè)置廣告大圖和小圖
如下js代碼中，smallMoveImg設(shè)置的是小圖，bigMoveImg設(shè)置的是大圖，圖片可以是網(wǎng)絡(luò)引用，如http://***/big.jpg，link設(shè)置的廣告鏈接地址。
<script>
window.csdn.indexSuperise({
smallMoveImg:'small.png',
bigMoveImg:'big.png',
link:'http://m.gazebo2go.com/',
trackSuperId:476,
smallMove:'notMove',
trackSId:1063
});
</script>
3、程序包包含的indexSuperise.js文件，是主要js程序，這里面有幾個(gè)地方需要注意一下。
1）、設(shè)置廣告圖片位置
x.css(
{
bottom: "50px"
});
這里設(shè)置的是廣告圖片距離網(wǎng)頁(yè)底部的距離。
2）、css文件的引用
p = '<link href="indexSuperise.css" rel="stylesheet">';
這里設(shè)置css文件地址
3）、廣告特效文件qrcode.min.js引用
var u = document.createElement("script");
u.src = "qrcode.min.js", o("body").append(u)這里設(shè)置廣告特效文件qrcode.min.js的引用，該文件包含在程序包里，不可缺少。
4）、關(guān)閉廣告設(shè)置
{
/* 關(guān)閉廣告 */
x.remove()
/*
使用下面語(yǔ)句 點(diǎn)擊關(guān)閉按鈕后廣告永久不再顯示；
若把 localStorage 改為 sessionStorage，
則重啟瀏覽器（或新開(kāi)標(biāo)簽頁(yè)）時(shí)廣告重新顯示。
*/
// x.remove(), localStorage.setItem("indexSuperise_" + c.trackSuperId, !1)
})看代碼注釋。localStorage 和 sessionStorage 保存cookie的區(qū)別是localStorage保存的cookie是永久的，而sessionStorage保存的cookie在重啟瀏覽器（或新開(kāi)標(biāo)簽頁(yè)）后丟失。
特別注意，使用localStorage或sessionStorage，要同時(shí)修改第105行的代碼localStorage或sessionStorage。
h = "false" === localStorage.getItem("indexSuperise_" + c.trackSuperId),相關(guān)文章推薦
標(biāo)簽: 廣告 右下角廣告 可關(guān)閉廣告
- 站長(zhǎng)推薦
