주요 축제는 주요 주류 웹 사이트의 홈페이지는 대규모 배경 사진을 사용하여 일부 사용자 가이 큰 배경 맵에 사용되지 않는다는 것을 고려할 것입니다. "닫기"버튼을 배경 차트에 놓으면 "배경 닫기"버튼 만 클릭하면 큰 배경 차트가 사라집니다.
JavaScript를 사용하여 디스플레이를 제어하고 배경 버튼을 클릭하면 CSS를 제어하여 백그라운드 맵이로드되지 않으면 쿠키가 실패하면 배경 사진이 다시 나타납니다. 짐을 실은.
HTML
일반적인 배경 사진의 닫기 버튼은 페이지 상단에 닫는 배경 버튼을 배치합니다.
다음과 같이 코드 코드를 복사하십시오.
<div id = "Top">
<em id = "close_btn"> </em>
</div>
CSS
또한 큰 배경 사진을 준비해야합니다. 인터넷에서 큰 배경 사진을 찾아 간단한 페이지 레이아웃을 만듭니다.
다음과 같이 코드 코드를 복사하십시오.
*{마진 : 0;
Body {font : 12px/18px "Microsoft Yahei", Tahoma, Arial, Verdana, "/5b8b/4f53", Sans-Serif;}
#{Clear : 1000px;
#close_btn {60px : 오른쪽;
디스플레이 : 블록; Z Z Index : 2;}
CSS를 배포 한 후이 페이지는 배경 사진을로드하기 위해 JavaScript를 사용해야합니다.
자바 스크립트
첫 번째 로딩 페이지 (현재 쿠키 등이 없음)가 있으면 백그라운드 사진을로드하여 전체 페이지 효과를 표시해야합니다. "닫기"버튼을 클릭하면이 시점에서 JavaScript는 페이지에로드 된 배경 사진, 즉 표시되지 않은 쿠키를 설정하고 쿠키의 만료 시간을 통해 큰 배경 그림을 제어합니다. 즉, 페이지가 새로 고침되면 쿠키가 만료되지 않으면 큰 배경 사진이로드되지 않고 큰 배경 사진이로드됩니다. 코드를 참조하십시오.
다음과 같이 코드 코드를 복사하십시오.
$ (function () {
iftcookie ( "mainbg") == 0) {
$ ( "body, html").
$ ( "#Close_btn");
} 또 다른 {
$ ( "body").
$ ( "html"). CSS ( "배경", URL (images/html_bg.jpg));
$ ( "#close_btn").
}
// 닫으려면 클릭하십시오
$ ( "#Close_btn").
$ ( "body, html").
$ ( "#Close_btn");
setCookie ( "mainbg", "0");
});
})
분명히, 우리는 페이지 요소의 CSS 배경 배경 속성을 설정하여 배경 다이어그램의로드를 제어하고 getCookie ()과 setCookie ()의 두 가지 사용자 정의 기능을 통해 쿠키를 읽고 설정합니다.
다음과 같이 코드 코드를 복사하십시오.
// 쿠키를 설정합니다
함수 setCookie (이름, 값) {
var exp = 새로운 날짜 ();
exp.settime (exp.gettime () + 1*60*60*1000);
document.cookie = name + "=" + Escape (value) + "; expires =" + exp.togmtring ();
}
// 쿠키 기능을 수행합니다
함수 getCookie (이름) {
var anrr = document.cookie.match ( "("( "(^|)" "+name+"= ([^;]*) (; | $) ")));
if (arr! = null) recape unesce (arr [2]);
}