萬盛學電腦網 >> 腳本專題 >> 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"/>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved