鼠標(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>
方法二
<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í)圖片向右上變大,離開圖片變回原大小
<img src="../../Content/themes/login/image/Jiben.png" width="200px" onmouseover="this.width=230" onmouseout="this.width=200"/>
- android計(jì)算pad或手機(jī)的分辨率/像素/密度/屏幕尺寸/DPI值的方法
- Android加載大分辨率圖片到手機(jī)內(nèi)存中的實(shí)例方法
- android 分辨率適配的方法
- android開發(fā)中獲取手機(jī)分辨率大小的方法
- android根據(jù)分辨率自動(dòng)調(diào)整字體大小的實(shí)例代碼
- Android基礎(chǔ)之使用Fragment適應(yīng)不同屏幕和分辨率(分享)
- Android的單位以及屏幕分辨率詳解
- 獲取屏幕分辨率的VBS代碼
- Js控制彈窗實(shí)現(xiàn)在任意分辨率下居中顯示
- iOS像素對(duì)齊概念解析
相關(guān)文章
使用Visual?Studio?2022開發(fā)前端的詳細(xì)教程
這篇文章主要介紹了使用Visual?Studio?2022開發(fā)前端,在瀏覽器中可以使用CDN源引用需要的客戶端庫,可如果在企業(yè)內(nèi)網(wǎng)使用,無法訪問CDN源時(shí),需要將客戶端庫下載到本地使用,需要的朋友可以參考下2022-05-05用jscript實(shí)現(xiàn)新建和保存一個(gè)word文檔
用jscript實(shí)現(xiàn)新建和保存一個(gè)word文檔...2007-06-06JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù)詳解
這篇文章主要介紹了JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08window.location的重寫及判斷l(xiāng)ocation是否被重寫
這篇文章主要介紹了window.location的重寫及判斷l(xiāng)ocation是否被重寫,需要的朋友可以參考下2014-09-09解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問題
今天小編就為大家分享一篇解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08基于JavaScript實(shí)現(xiàn)活動(dòng)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)活動(dòng)倒計(jì)時(shí)效果,距離活動(dòng)時(shí)間還剩多少,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04詳解使用mocha對(duì)webpack打包的項(xiàng)目進(jìn)行"冒煙測試"的大致流程
這篇文章主要介紹了詳解使用mocha對(duì)webpack打包的項(xiàng)目進(jìn)行"冒煙測試"的大致流程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04JS+CSS相對(duì)定位實(shí)現(xiàn)的下拉菜單
這篇文章主要介紹了JS+CSS相對(duì)定位實(shí)現(xiàn)的下拉菜單,涉及JavaScript結(jié)合css的定位技術(shù)實(shí)現(xiàn)下拉菜單的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換(17)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12