집 >웹 프론트엔드 >JS 튜토리얼 >Jquery 툴바 및 웹 페이지 플로팅의 특정 구현 코드

Jquery 툴바 및 웹 페이지 플로팅의 특정 구현 코드

WBOY원래의: 2016-05-16 17:04:111266검색

툴바의 jquery 구현 방법 및 웹 페이지 플로팅 툴바 jQuery 구현 방법
/*
기본 구조 index.php 튜토리얼의 HTML 코드와 뉴스 네트워크 style.css 튜토리얼의 CSS 코드를 업데이트하겠습니다.

고정 패널(id 도구 모음 그룹 포함)과 두 개의 부동 측면을 만들었습니다. 두 번째 단계에서 아이콘과 도구 설명 풍선(왼쪽), 빠른 메뉴 및 "숨기기 버튼" 목록을 추가할 것입니다. "(숨겨진 도구 모음에 추가).
패널이 숨겨져 있고 다시 활성화하고 싶을 때 유용한 "표시 버튼"도 기대할 수 있습니다. 이러한 이유로 우리는 ID가 toolsbarbut인 div 태그를 추가합니다.

HTML 및 CSS 코드
여기서 웹페이지의 기본 구조가 나와 있습니다.

html 코드

코드 복사 코드는 다음과 같습니다.

< ;div id =”toolbarbut”>

컨테이너 –> ;

>< /div>

css 코드

코드 복사 >

코드는 다음과 같습니다. div#toolbar, div#toolbarbut { position:fixed; /* 막대의 고정 위치 설정 */ bottom: 0px ; 오른쪽: 0px;

z-index: 9999; /* 막대를 맨 위에 유지 */

높이: 36px 
배경: url(images/bcktool.png); /* CSS3 */ 
-moz-border-radius-topleft: 
-khtml-border-radius-topleft: 
-webkit-border-top-left-radius: 8px; 🎜>-moz-border -radius-topright: 
-khtml-border-radius-topright: 8px; 
-webkit-border-top-right-radius: 
-moz-box; -shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* 삽입으로 내부 그림자 생성 */ 
-khtml-box-shadow: 0px 1px 10px #666 
-webkit-box- 그림자: 0px 1px 10px # 666; 
/* CSS3 끝 */ 
테두리 상단: 1px 솔리드 #eee; 
테두리 왼쪽: 1px 솔리드 #eee 
테두리 오른쪽: 1px #eee; 
 } 

div#toolbar { 
width: 85%; 
min-width: 700px; /* 창 크기가 과도하게 조정될 경우 너비를 제한합니다. */ 
margin: 0px auto ; /* 중앙 도구 모음 */ 
left: 0px 
} 

div#toolbar a:hover { 
border: none; (a:hover {border -bottom: 1px dotted #666;}) News Aggregator의 테두리 */ 
} 

div#toolbarbut { /* '숨기기 상태'에 대한 div */ 
너비: 60px; 
높이: 15px; 
여백: 없음 
} 

float: 왼쪽; 🎜>} 
 
.rightside { 
float: right; 
} 

 
표시/숨기기 버튼 이제 "표시 버튼"에 코드를 추가할 수 있습니다. 




코드 복사


 코드는 다음과 같습니다.

표시줄

다음 속성은 CSS 클래스와 관련이 있습니다.

코드 복사

 코드는 다음과 같습니다.

span.showbar a { /* 표시 버튼 */
padding: 5px;

font-size: 10px; color: #989898; } 오른쪽은 나중에 완료했지만 이제 add " "숨기기 버튼"은 그림과 같이 ID가 있는 오른쪽 파티션에 있습니다.

코드 복사

 코드는 다음과 같습니다.

🎜>

css

코드 복사

코드는 다음과 같습니다.

 
span.downarr { /* 숨기기 버튼 */ 
float: right; 
border-left: 1px solid #a4a4a4; 

span.downarr a { 
디스플레이: 블록; 
너비: 36px; 
높이: 26px; 
배경: url(images/downarrow.png) 반복 없음 5px 7px; 
} 

 
jQuery로 효과 표시/숨기기 먼저 jQuery를 다운로드하고(올바른 폴더에 복사) 헤더 index.php 태그를 활성화해야 합니다. 

코드 복사 코드는 다음과 같습니다.

!– … –>

<스크립트 유형=”text/javascript 튜토리얼” src=”js/jquery-1.3.2.min.js”> 
 
 패널에서 "숨기기 버튼"을 숨기려면 패널을 복원할 수 있도록 툴바를 클릭할 때 보이지 않는 "표시 버튼"이 있어야 합니다. 다음 jQuery 솔루션( 태그 뒤에 추가된 코드)을 사용할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

이제 HTML 왼쪽에

막대를 숨기고 표시할 수 있으며 CSS 코드
다음 XHTML 코드로 색인을 업데이트할 수 있습니다. 아이콘의 순서를 생성하기 위해 순서가 지정되지 않은 일반 목록(소셜 ID 포함)을 추가하고 전체 목록 내에 DIV 태그(Dip 클래스 포함)를 추가하여 툴팁 버블 내에 태그 중첩을 구현합니다.

코드 복사

코드는 다음과 같습니다.

html

css代码

*– 왼쪽 –*/

ul#social li {
display: inline;
}

a.rss {
디스플레이: 인라인 블록;
너비: 104px;
높이: 35px;
왼쪽 여백: 5px;
배경: url(images/rss.png) no-repeat;
}

a.facebook, a.twitter, a.digg, a.delicious, a.stumble {
display: inline-block;
너비: 40px;
높이: 35px;
여백 상단: 1px;
}

a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a.delicious:hover, a.stumble:hover {
배경 -위치: 1px 1px; /* 간단한 CSS 호버 효과 */
}

a.facebook {
background: url(images/facebook.png) no-repeat;
}

a.twitter {
배경: url(images/twitter.png) no-repeat;
}

a.delicious {
배경: url(images/delicious.png) no-repeat;
}

a.digg {
배경: url(images/digg.png) no-repeat;
}

a.stumble {
background: url(images/stumble.png) no-repeat;
}

.tip {
위치: 절대; /* 중요 */
top: -75px;
너비: 250px;
높이: 78px;
배경: url(images/tip.png) no-repeat;
플로트: 왼쪽;
디스플레이: 없음;
}

/* 아이콘의 사용자 정의 거리 */
#tipfacebook {
left: 75px;
}

#tiptwitter {
왼쪽: 120px;
}

#tipdelicious {
왼쪽: 165px;
}

#tipdigg {
왼쪽: 210px;
}

#tipstumble {
왼쪽: 255px;
}

.tip ul {
padding: 22px 0 0 25px;
}

.tip ul li {
디스플레이: 인라인;
왼쪽 여백: 3px;
}

.tip ul li a {
글꼴 크기: 18px;
색상: #989898;
}

.tip ul li a:hover {
color: #666;
}

.tip ul li small {
font-size: 10px;
}

jquery代码

//목록 요소 위에 마우스를 올리면 툴팁 표시
$(“ul#social li”).hover(function() {
$(this).find(“div”).fadeIn(“fast”).show(); //IE용 'show()' 추가
$(this).mouseleave(function () { //마우스가 요소 밖으로 이동할 때 툴팁 숨기기
$(this).find(“div”).hide()
})
});

성명：

이전 기사：javaScript_Basic 지식을 통해 이 예제에 대한 자세한 설명과 작동 원리를 알아보세요.다음 기사：javaScript_Basic 지식을 통해 이 예제에 대한 자세한 설명과 작동 원리를 알아보세요.

Jquery 툴바 및 웹 페이지 플로팅의 특정 구현 코드

관련 기사