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

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

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

숨겨진 상태:



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

표시 상태 :


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

CSS 스타일:

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

코드는 다음과 같습니다.

} //차단

함수 myhide(){

//document.getElementById('mydiv').style.display = "block";
document.getElementById('mydiv').style.width="1px"
}

//테스트를 위해 일부 콘텐츠를 무작위로 생성하여 효과 테스트를 용이하게 합니다.
for(var i=0; i" (new Array(20)).join(( Math.random()*1000000).toString(36) " ") "

")

새 함수(w,b,c,d,o){
d= document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b"
(var i=0; iw.style.width = d.documentElement.clientWidth "px";
w.style.height = d.documentElement.clientHeight "px"
})() ;
}



HTML 코드:




코드 복사

코드는 다음과 같습니다.

학생 정보

학생 ID: 0123456789

이름: Xiao Ming

대학: 소프트웨어 대학

전공: 소프트웨어 공학

클래스: 클래스 1

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