守望先锋等级代练
點擊這里給我發消息 010-82967418
當前位置:網站建設>網絡知識
網站建設知識之實現鼠標移開圖片變暗
點擊量:1902 發布時間:2014-3-1 10:23:54

網站建設知識之實現鼠標移開圖片變暗,方法一利用css樣式:
樣式代碼:
div{
float: left;
width: 180px;
height: 180px;
margin: 0auto;
background: url(xinyisheji.jpg) centercenterno-repeat;
z-index: 1;
}
a{
filter: alpha(opacity=80);
opacity: 0.8;
width: 180px;
height: 180px;
display: block;
background: #333;
z-index: 100;
}
a:hover{
filter: alpha(opacity=0);
opacity: 0;
}
網頁調取:

<div><a href="#"></a></div>

方法二:js效果
Js代碼:

網站建設知識之實現鼠標移開圖片變暗
 

網頁調取:

<img id="imgInfo" src=" http://www.vfqbh.icu/" style="filter: alpha

(opacity=90);" onmouseover="opacity_change(0)" onmouseout="opacity_change

(1)"/>


兩種方式都各有優缺,我們只測試了幾個瀏覽器,大家可以多測試幾個瀏覽器的兼容。
文章由新翼設計北京網站建設公司(http://www.vfqbh.icu)編輯整理,轉載請注

明出處!

Copyright2006-2013 xinyisheji.com
新翼設計出品-北京網站建設,北京網站設計,北京網站制作,我們值得信賴. 京 ICP備:10043999
htm網站地圖 | xml網站地圖 | 網站統計
+86-010-82967418 52431618  
[email protected]  
www.vfqbh.icu www.xinyisheji.com  
北京市海淀區西三旗上奧世紀中心B-8層  
QQ在線咨詢
  • 點擊這里給我發消息
  • 點擊這里給我發消息
  • 點擊這里給我發消息
售后咨詢熱線
點擊這里給我發消息
010-82967418
守望先锋等级代练