JS 메소드는 웹 페이지 하단에 항상 표시되는 닫기 버튼을 사용하여 도구 모음을 구현합니다.

저자：Eve Cole 업데이트 시간：2025-05-28 00:00:03

이 기사에서는 닫기 버튼이있는 웹 페이지 하단의 도구 모음을 항상 표시하기 위해 JS를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 세부 사항은 다음과 같습니다.

이것은 매우 실용적인 코드입니다. 브라우저 창의 하단에 항상 표시되는 도구 모음을 추가합니다. 공지, 연락처 및 기타 정보를 넣을 수 있습니다. 이 코드의 도구 모음에는 닫기 버튼이 있으며 언제든지 닫을 수 있습니다.

코드를 다음과 같이 복사하십시오.

<헤드>

<스타일>

Body, H1, H2, H3, H4, H5, H6, P, UL, Li, DL, DT, DD {Padding : 0; 여백 : 0;}

li {list-style : none;} img {border : none;} em {font-style : normal;}

a {색상 :#555; 텍스트 결정 : 없음; 개요 : 없음; blr : this.onfocus = this.blur ();}

A : 호버 {컬러 :#000; 텍스트 설명 : 밑줄;}

바디 {font-size : 12px; font-family : Arial, Verdana, Helvetica, sans-serif; Word-break : break-wrap : break-word;}

.bnav {텍스트-알림 : 왼쪽; 높이 : 25px; 오버플로 : 숨겨진; 너비 : 98%; 선-높이 : 25px; 배경 : #fff; 여백 : 0 1%; 경계 :#B4B4B4 1px 고체; 국경-바닥 : 없음; z-index : 999; 위치 : 고정; 하단; 하단 : 0; 왼쪽 : 0; _position : 절대;/ *의 경우/ */ */ 오버플로 : 가시;}

.Close {위치 : 절대; 오른쪽 : 5px; 높이 : 25px; 너비 : 16px; 텍스트-안정 : -9999px; 패딩 왼쪽 : 10px;}

. 너비 : 16px; 디스플레이 : 블록;}

.bnav2 {높이 : 24px; 선-높이 : 24px; 마진 : 1px; 마진 바닥 : 0; 배경 :#e5e5e5; }

.BNAV .S1 {위치 : 절대; 왼쪽 : 10px;}

.BNAV .S1 IMG {Padding-Top : 3px; 마진 오른쪽 : 7px;}

.BNAV .S2 {위치 : 절대; 오른쪽 : 30px; 색상 :#888;}

.bnav .S2 Span {Padding-Right : 10px;}

.bnav .S2 a {마진 : 0 6px;}

.RollText {위치 : 절대; 왼쪽 : 160px; 높이 : 25px; 선-높이 : 25px; 오버플로 : 숨겨진;}

.RollText dt, .rollText dd {float : 왼쪽; 너비 : 자동;}

.RollText A {디스플레이 : 블록; 높이 : 25px; 오버플로 : 숨겨진;}

.bnav3 {높이 : 25px; 너비 : 16px; 선-높이 : 25px; 여백 : 0 1%; Padding-Right : 6px; Border-Bottom : None; Z-Index : 999; 위치 : 고정; 하단; 맨 아래 : 0; 오른쪽 : 0; _position :/ *의 경우 IE6 */_ top : expression (documentElement.scrollTop + DocumentElement.ClientHeight-this.offsetheight); / * IE6 */ OVERFLOW : Visible;}

.bnav3 a {배경 : url (../ images/201008/open.gif) No-Repeat Center; 디스플레이 : 블록; 높이 : 25px; 너비 : 16px; 텍스트 안정 : -5000px;}

</스타일>

</head>

<body>

var closebn = $ .cookie ( "bnav");

if (closeBn == "0") {Closenav ();}

함수 showingav () {

$ ( ". openclose"). toggle ();

$ .cookie ( "bnav", "1", {만료 : 1});

}

함수 closenav () {

$ ( ". openclose"). toggle ();

$ .cookie ( "bnav", "0", {만료 : 1});

}

// 단일 스크롤링

함수 singleScroll () {

$ ( ". RollText dd"). 애니메이션 ({margintop : "-25px"}, 500, function () {

$ (this) .css ({margintop : "0px"}). 찾기 ( "a : first"). 부록 (this);

});

}

$ (document) .ready (function () {

setInterval ( "SingleScroll ()", 3000);

});

</스크립트>

<div>

<span>

</span>

<dl>

<dd>

<a href = "#"> 이중 축제 중에 쇼핑몰에는 헌신적 인 사람들이 있습니다. 무료로 쇼핑하십시오 </a>

<a href = "#"> Tianyue에서 판매 한 휴대 전화는 중국 본토의 라이센스 상품과 National Joint Guarantee Products </a>

<a href = "#"> 우리는 일부 소수의 홍콩과 유럽 시장 기계를 특별히 언급했습니다 </a>

<a href = "#"> 신은 더 이상 비슷한 질문을하지 마십시오. 고객 서비스 전화 번호가 폭발하려고합니다 </a>

</dd>

</dl>

<span>

</span>

<span> <a href = "javaScript : void (0)"onclick = "closenav ()"> close </a> </span>

</div>

</body>

</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.