오늘은 js와 css를 사용하여 자동으로 숨겨질 수 있는 플로팅 박스를 작성하는 간단한 예제를 작성하겠습니다. CSS는 확실히 스타일을 제어하는 데 사용되고, js는 표시 및 숨기기를 제어하는 데 사용됩니다. 표시 및 숨기기는 일반적으로 두 가지 방법으로 구현됩니다. 1. js를 사용하여 표시 속성을 제어합니다. 2. js를 사용하여 크기를 제어합니다.
오늘 이야기할 내용은 요소의 크기를 조절하여 요소의 표시 및 숨기기를 구현하는 것입니다. 원칙은 마우스가 개체 범위를 벗어나는 경우 이벤트를 등록하는 것입니다. 1. 마우스가 다시 개체 안으로 이동하면 너비를 1로 설정합니다. 너비가 복원되었습니다. 매우 간단합니다. 살펴보겠습니다!
숨겨진 상태:
왼쪽의 좁은 선은 숨긴 후의 플로팅 프레임입니다.
디스플레이 상태:
왼쪽의 플로팅 박스 위로 마우스를 슬라이드하면 플로팅 박스가 다시 표시됩니다.
CSS 스타일:
다음과 같이 코드 코드를 복사합니다.
<스타일>
* { 글꼴 크기:12px; 글꼴 계열:Verdana, 宋体 }
HTML, 본문 { 여백:0px; 오버플로: 숨김 }
.b { 여백:0px; 오버플로:자동 }
.line0 { 줄 높이:20px; 배경색:밝은 노란색 }
.line1 { 줄 높이:18px 배경색:밝은 파란색 }
.w { 위치: 절대: 10px; 높이: 300px; 테두리: 2px 홈: 없음 }
.t { line-height:20px; width:160px; color:white; border-bottom:1px 텍스트 정렬: 센터;
.winBody { 높이:270px; 너비:160px; 오버플로-y:auto; 테두리-상단:1px 배경색:흰색;
</style>
JS 코드:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
함수 myshow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //차단하다
함수 myhide(){
//document.getElementById('mydiv').style.display = "블록";
document.getElementById('mydiv').style.width="1px";
}
//테스트를 위해 일부 콘텐츠를 무작위로 생성하여 테스트 효과를 촉진합니다.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"</div>");
새로운 함수(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="클래스이름";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = 함수(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
<span style="white-space:pre"> </span>}
</script>
HTML 코드:
다음과 같이 코드 코드를 복사합니다.
<본문>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>학생 정보</div>
<div>
학생 ID: <label>0123456789 </label><br><br>
이름: <label>샤오밍</label><br><br>
대학: <label>소프트웨어 대학</label><br><br>
전공: <label>소프트웨어 공학</label><br><br>
클래스: <label>클래스 1</label><br><br>
</div>
</div>
</body>
플로팅 상자를 사용하여 정보를 표시해야 할 때 가리키면 표시됩니다. 이는 더 이상 필요하지 않을 때 마우스를 멀리 이동하면 자동으로 사라집니다. . 매우 간단하지만 사용자를 편안하게 만드는 것을 만드는 것이 우리의 끊임없는 추구입니다.