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

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

WBOY

リリース： 2016-05-16 17:00:19

オリジナル

1298 人が閲覧しました

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

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

HTML

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

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

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) ]); 
} 


 を返します。