快捷導(dǎo)航

鼠標(biāo)移入移出事件改變圖片的分辨率的兩種方法

更新時(shí)間：2013年12月17日 15:20:07 作者：

做一個(gè)鼠標(biāo)移入移出圖片事件，首先是改變分辨率的兩種方法，鼠標(biāo)移入圖片和移出圖片的分辨率不同，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下

最近在做一個(gè)鼠標(biāo)移入移出圖片事件，有幾種方法大家可以試一下
首先是改變分辨率的兩種方法，鼠標(biāo)移入圖片和移出圖片的分辨率不同
方法一

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>圖片列表：鼠標(biāo)移入/移出改變圖片透明度</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> 

方法二

復(fù)制代碼代碼如下:

 
<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> 

還有一種方法是鼠標(biāo)移入移出圖片，改變圖片的大小
在<body>標(biāo)簽中加入一下代碼即可，鼠標(biāo)移動(dòng)到圖片時(shí)圖片向右上變大，離開圖片變回原大小

復(fù)制代碼代碼如下:

 
<img src="../../Content/themes/login/image/Jiben.png" width="200px" onmouseover="this.width=230" onmouseout="this.width=200"/> 

您可能感興趣的文章:

相關(guān)文章

JS變量中有var定義和無var定義的區(qū)別以及es6中l(wèi)et命令和const命令
這篇文章主要介紹了JS變量中有var定義和無var定義的區(qū)別以及es6中l(wèi)et命令和const命令,需要的朋友可以參考下
2017-02-02
JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法
這篇文章介紹了JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法，有需要的朋友可以參考一下
2013-07-07
javascript實(shí)現(xiàn)點(diǎn)擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法,涉及javascript鼠標(biāo)事件及頁面跳轉(zhuǎn)的相關(guān)技巧,簡單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
JavaScript調(diào)試的多個(gè)必備小Tips
這篇文章主要給大家介紹了關(guān)于JavaScript調(diào)試的多個(gè)必備小Tips，文章給出了詳細(xì)的介紹與示例代碼，有需要的朋友們可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)吧。
2017-01-01
微信小程序methods中定義的方法互相調(diào)用的實(shí)例代碼
這篇文章主要介紹了微信小程序methods中定義的方法互相調(diào)用的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-08-08
js完整倒計(jì)時(shí)代碼分享
這篇文章主要為大家詳細(xì)介紹了js完整倒計(jì)時(shí)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
問題解析有JSDoc還需要TypeScript嗎
這篇文章主要介紹了有JSDoc還需要TypeScript的問題示例解析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
基于原生JS實(shí)現(xiàn)分頁效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生js實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
微信小程序調(diào)用后臺(tái)service教程詳解
這篇文章主要介紹了微信小程序調(diào)用后臺(tái)service教程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11