js實現按鈕的滑動效果

xpkdi 10年前發布 | 3K 次閱讀 JavaScript

 通過更改按鈕的顯示樣式，來實現按鈕動態滑動

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>無標題文檔</title>

    </head>

    <style>



.search{ background:#008800; color:#fff; border:none; height:26px; line-height:20px; width:63x;}  
.searchhover{background:#000099; color:#fff; border:none; height:26px; line-height:20px; width:63px; }   
</style>    


</head>    
<body onload="js()">    
   <input type="button"   id="btn" class="search"  name="btn" value="登 錄"/>    
   <input type="button"   id="btn2" class="search"  name="btn" value="注 銷"/>    
  <script type="text/javascript" >     

function js()  
{  
 // 使ie6 button支持hover屬性 obj是要支持hover的實體  hover是btn:hover的樣式，init是初始樣式      
 obj="btn";  
 alert(navigator.appName);  
 if(navigator.appName == "Microsoft Internet Explorer" && parseFloat(navigator.appVersion) == 4){// 判斷ie6     
  var o = document.getElementsByName(obj);    
  for(var i=0;i<o.length;i++){   
   if(o[i].type == "button"){     
    //o[i].className = "search";     
    o[i].onmouseover = function(){ this.className = "searchhover"}     
    o[i].onmouseout  = function(){ this.className = "search"};     
   }     
  }     
 }     
 }   
</script>     
</body>    
</html>    </pre>
 本文由用戶 xpkdi 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！