js, css_javascript 기술로 자동 숨길 수 있는 플로팅 박스 작성-JS 튜토리얼-php.cn

js, css_javascript 기술로 자동 숨길 수 있는 플로팅 박스 작성

WBOY

풀어 주다： 2016-05-16 16:56:47

원래의

1170명이 탐색했습니다.

오늘은 js와 css를 사용하여 자동으로 숨겨질 수 있는 플로팅 박스를 작성하는 간단한 예제를 작성하겠습니다. CSS는 확실히 스타일을 제어하는 데 사용되고, js는 표시 및 숨기기를 제어하는 데 사용됩니다. 표시 및 숨기기는 일반적으로 두 가지 방법으로 구현됩니다. 1. js를 사용하여 표시 속성을 제어합니다. 2. js를 사용하여 크기를 제어합니다.

오늘 제가 이야기할 내용은 요소의 크기를 조절하여 요소를 표시하거나 숨기는 것입니다. 마우스가 밖으로 나갈 때 해당 요소에 대한 마우스 이동 및 이동 이벤트를 등록하는 것입니다. 개체 범위에서 너비를 1로 설정합니다. 마우스가 다시 움직이면 개체를 안으로 이동하여 너비를 복원합니다. 매우 간단합니다. 살펴보겠습니다!

숨겨진 상태:

js, css_javascript 기술로 자동 숨길 수 있는 플로팅 박스 작성

왼쪽의 좁은 선이 숨긴 후 뜨는 상자입니다.

표시 상태 :

왼쪽 플로팅 박스 위로 마우스를 올리면 플로팅 박스가 다시 표시됩니다.

CSS 스타일:

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

 
 html, body { margin:0px; 여백:0px; 오버플로:자동; -색상: 연청색; 0px 10px } 
.w { 위치:절대; 높이:10px; 테두리:2px 홈 기본값; - moz-user-select:none; t { line-height:20px; width:160px; color:white; :bold; border-bottom:1px outset blue; 
.winBody { height:270px; 오버플로-y:auto; blue; padding:10px; background-color:white; 

JS 코드: 

코드 복사

코드는 다음과 같습니다.

HTML 코드:

코드 복사

코드는 다음과 같습니다.

학생 정보

학생 ID: 0123456789

이름: Xiao Ming
대학: 소프트웨어 대학

전공: 소프트웨어 공학

클래스: 클래스 1

 
플로팅 상자를 사용하여 정보를 표시해야 할 때 가리키면 표시됩니다. 이는 필요하지 않을 때 마우스를 멀리 이동하면 자동으로 표시됩니다. 그 자체. 매우 간단하지만 사용자를 편안하게 만드는 것을 만드는 것이 우리의 끊임없는 추구입니다.