1. 程式人生 > >JS特效-滑鼠提示框

JS特效-滑鼠提示框

1.分析效果實現原理

  樣式:div 的 display

  事件: onmouseover   移入

      onmouseout 移出

2.特效基礎

  事件驅動:onmouseover,onmouseout

  元素屬性操作:obj.style.[屬性]

特效實現原理概括: 響應使用者操作,對頁面元素(標籤)進行某種修改

 

 

滑鼠移入提示移出隱藏程式碼

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5
<title>滑鼠移入移出事件</title> 6 <style> 7 #div1 { 8 width: 200px; 9 height: 100px; 10 background: #CCC; 11 border: 1px solid #999; 12 display: none; 13 } 14 </style> 15 16 <script> 17
function toover() { 18 document.getElementById('div1').style.display = "block"; 19 20 } 21 22 function toout() { 23 document.getElementById("div1").style.display = "none"; 24 } 25 </script> 26 </head> 27 <body> 28 <input type="checkbox" onmouseover="toover()" onmouseout="toout()">記住密碼
29 <div id="div1"> 30 為了您的資訊保安,請不要在公共場合儲存密碼 31 </div> 32 </body> 33 </html>