DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 鼠標移入移出事件改變圖片的分辨率的兩種方法
鼠標移入移出事件改變圖片的分辨率的兩種方法
編輯:JavaScript綜合知識     

 做一個鼠標移入移出圖片事件,首先是改變分辨率的兩種方法,鼠標移入圖片和移出圖片的分辨率不同,具體實現如下,感興趣的朋友可以參考下

最近在做一個鼠標移入移出圖片事件,有幾種方法大家可以試一下  首先是改變分辨率的兩種方法,鼠標移入圖片和移出圖片的分辨率不同  方法一   代碼如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>圖片列表:鼠標移入/移出改變圖片透明度</title>  <style>  ul,li{margin:0;padding:0;list-style-type:none;}  #imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}  #imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}  #imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}  #imgList li.current img{opacity:1;filter:alpha(opacity=100);}  </style>  <script>  window.onload = function ()  {  var oLi = document.getElementsByTagName("li");  for (var i = 0; i < oLi.length; i++)  {  oLi[i].onmouseover = function ()  {  this.className = "current"  };  oLi[i].onmouseout = function ()  {  this.className = ""  }  }  }  </script></head>  <body>  <ul id="imgList">  <li><img src="/jscss/demoimg/201203/kitesky_com_car1.jpg" /></li>  <li><img src="/jscss/demoimg/201203/kitesky_com_car2.jpg" /></li>  </ul>  </body>  </html>    方法二  代碼如下: <script type="text/javascript">  function makevisible(cur,which){  if (which==0)  cur.filters.alpha.opacity=100  else  cur.filters.alpha.opacity=20  }    </script>  <body>  <img src="../../Content/themes/login/image/JianKong.png" width="200px" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible(this,0)"/>  </body>    還有一種方法是鼠標移入移出圖片,改變圖片的大小  在<body>標簽中加入一下代碼即可,鼠標移動到圖片時圖片向右上變大,離開圖片變回原大小  代碼如下: <img src="../../Content/themes/login/image/Jiben.png" width="200px" onmouseover="this.width=230" onmouseout="this.width=200"/> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved