|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSDN網(wǎng)頁右下角正方形廣告#可彈出縮進#可關閉【源碼】
作者:admin 時間:2021-4-30 14:26:39 瀏覽:網(wǎng)頁右下角正方形廣告很常見，不過CSDN網(wǎng)站的這個右下角廣告設計得非常好，它可以彈出縮進，也可關閉，比大多數(shù)那些只能直接關閉的設計好，于是我就把它的源碼拿下來，現(xiàn)分享給同樣喜歡這個設計的人。
網(wǎng)頁右下角正方形廣告
完整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://howtostagehomes.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設置的是大圖，圖片可以是網(wǎng)絡引用，如http://***/big.jpg，link設置的廣告鏈接地址。
<script>
window.csdn.indexSuperise({
smallMoveImg:'small.png',
bigMoveImg:'big.png',
link:'http://howtostagehomes.com/',
trackSuperId:476,
smallMove:'notMove',
trackSId:1063
});
</script>
3、程序包包含的indexSuperise.js文件，是主要js程序，這里面有幾個地方需要注意一下。
1）、設置廣告圖片位置
x.css(
{
bottom: "50px"
});
這里設置的是廣告圖片距離網(wǎng)頁底部的距離。
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的區(qū)別是localStorage保存的cookie是永久的，而sessionStorage保存的cookie在重啟瀏覽器（或新開標簽頁）后丟失。
特別注意，使用localStorage或sessionStorage，要同時修改第105行的代碼localStorage或sessionStorage。
h = "false" === localStorage.getItem("indexSuperise_" + c.trackSuperId),相關文章推薦
- 站長推薦
