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

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

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

숨겨진 상태:



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

표시 상태 :


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

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

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

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.