JavaScript を使用して Cookie を制御し、背景画像の表示と非表示を切り替える_JavaScript スキル

主要なフェスティバルの期間中、デザイナーは通常、より良い視覚的効果を得るために大きな背景画像を使用しますが、その場合は背景画像も考慮する必要があります。背景画像に「閉じる」ボタンを配置します。ユーザーが「背景を閉じる」ボタンをクリックすると、大きな背景画像が消えます。

背景画像の表示・非表示をJavaScriptを使用して、閉じるボタンをクリックした際にページに背景画像が読み込まれないように制御すると同時に、COOKIE関連のパラメータを記録します。 Cookie の有効期間が設定されると、Cookie の有効期間内にページが更新され、Cookie の有効期限が切れると、背景画像が再ロードされます。

HTML

通常、背景画像の閉じるボタンはページの先頭に配置されます。もちろん、このボタンは既製の画像です。

コードをコピー コードは次のとおりです:

<div id="top"> ;
<em id="close_btn" title="背景を閉じる"></em>

CSS

大きな背景画像も用意する必要があります。インターネットから大きな背景画像を見つけて、CSS を使用して簡単なページ レイアウトを作成します。

コードをコピーします コードは次のとおりです。

*{margin:0; }
body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"5b8b4f53", sans-serif;}
#top{clear:both;width:1000px;height:60px;margin :0 auto ;overflow:hidden;position:relative;}
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer
display:block; z-index :2;}

CSS をデプロイした後、ページにはまだ効果がありません。JavaScript を使用して背景画像をロードする必要があります。

JavaScript
ページが初めてロードされるとき (この時点では Cookie などが設定されていません)、完全なページ効果を表示するには、もちろん背景画像をロードする必要があります。 「閉じる」ボタンをクリックすると、JavaScript はページにロードされている背景画像を強制終了して表示しなくなり、Cookie を設定して、Cookie の有効期限まで大きな背景画像を表示するかどうかを制御します。 。つまり、次回ページが更新されるときに、Cookie の有効期限が切れていない場合は、大きな背景画像が読み込まれません。コード

コードをコピー コードは次のとおりです:

$(function(){

if(getCookie(" mainbg")==0){
$(" body,html").css("background","none");
$("#close_btn").hide();
} else{
$("body").css( "background","url(images/body_bg.jpg)) no-repeat 50% 0");
$("html").css("背景","url(images/html_bg.jpg)repeat- x 0 0");
$("#close_btn").show().css("背景","url(images/close_btn.jpg) no-repeat");
}
/ /クリックして閉じます
$("#close_btn").click(function(){
$("body,html").css("背景","なし");
$("# close_btn").hide();
setCookie("mainbg","0");
});
})

明らかに、ページ要素の CSS 背景属性を設定することで背景画像の読み込みを制御し、getCookie() と setCookie() という 2 つのカスタム関数を通じて Cookie を読み取り、設定します。

コードをコピー コードは次のとおりです:

//Cookie を設定

function setCookie (name,value){
var exp = new Date();
exp.setTime(exp.getTime() 1*60*60*1000); // 有効期間 1 時間
document.cookie = name "="escape (value) ";expires=" exp.toGMTString()
}
//Cookie を取得 function
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )" name "=([^;]*)(;|$)")); if(arr != null) return unescape(arr[2) ]);
}


を返します。