欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS鼠標(biāo)點(diǎn)擊改變圖片透明度

  發(fā)布時(shí)間：2016-03-08 14:49:12   作者：佚名   我要評(píng)論
這篇文章主要為大家詳細(xì)介紹了CSS鼠標(biāo)點(diǎn)擊改變圖片透明度，為大家提供改變圖片css透明度屬性的簡(jiǎn)單方法，感興趣的小伙伴們可以參考一下

很多時(shí)候在網(wǎng)站圖片處理上需要實(shí)現(xiàn)一些輔助效果，比如鼠標(biāo)在圖片上滑動(dòng)時(shí)或點(diǎn)擊時(shí)改變圖片顏色（變灰或者其他），其實(shí)一個(gè)簡(jiǎn)單的辦法就是改變圖片css透明度屬性。

如何改變呢？一種是純css，一種使用jquery或者javascript代碼控制。第一種使用:hover偽類(lèi)選擇器，本示例使用第二種。

先看最后效果：

第一步：放置圖片 

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul id="test">  
  2.       <li>  
  3.           <img class="imgopacity" src="Images/1.jpg" /></li>  
  4.       <li>  
  5.           <img class="imgopacity" src="Images/2.jpg" /></li>  
  6.       <li>  
  7.           <img class="imgopacity" src="Images/3.jpg" /></li>  
  8.   </ul>  

這里每張圖片先默認(rèn)設(shè)置一個(gè)class選擇器imgopacity（默認(rèn)圖片未選中，顯示為淡灰色）

第二步：設(shè)置圖片

css樣式如下： 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .imgopacity   
  2.   {   
  3.       filter: alpha(opacity=50);   
  4.       -moz-opacity: 0.5;   
  5.       -khtml-opacity: 0.5;   
  6.       opacity: 0.5;   
  7.   }   
  8.   ul li   
  9.   {   
  10.       list-style-type: none;   
  11.   }   

上述css樣式中0.5為圖片透明度屬性值，值范圍：0—1，值越大圖越清晰

此刻效果如下：

css默認(rèn)透明度（即淡灰色）

第三步：編寫(xiě)jquery代碼點(diǎn)擊式控制圖片透明度

當(dāng)鼠標(biāo)點(diǎn)擊某一張圖片時(shí)，將該圖片正常顯示，其他圖片變成淡灰色。

由于默認(rèn)圖片有一個(gè)class選擇器imgopacity代表淡灰色，即當(dāng)我們鼠標(biāo)點(diǎn)擊該圖片時(shí)刪除該class即可正常顯示該圖片，代碼如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. $(function () {   
  2.             $("#test img").click(function () {   
  3.                 $("#test img").addClass("imgopacity");   
  4.                 $(this).removeClass("imgopacity");   
  5.             })   
  6.         });   
  7.   

最終效果如下：

今日分享到此結(jié)束，感謝大家的閱讀，小編一定會(huì)再接再厲為大家貢獻(xiàn)更多的文章。

相關(guān)文章

  • 詳解CSS3的opacity屬性設(shè)置透明效果的用法

    這篇文章主要介紹了詳解CSS3的opacity屬性設(shè)置透明效果的用法,同時(shí)還講到了opacity透明度帶有的繼承性影響子集元素的問(wèn)題,值得初學(xué)者注意,需要的朋友可以參考下
    2016-05-09

  • CSS3中使用RGBa來(lái)調(diào)節(jié)透明度的教程

    這篇文章主要介紹了CSS3中使用RGBa來(lái)調(diào)節(jié)透明度的教程,RGBA是RGB色彩模型的一個(gè)擴(kuò)展,這個(gè)縮寫(xiě)詞代表紅綠藍(lán)三原色的首字母,Alpha值代表顏色的透明度或者說(shuō)不透明度,需要的朋
    2016-05-09

  • CSS3不透明度實(shí)例講解

    這篇文章主要為大家詳細(xì)介紹了CSS3不透明度實(shí)例，以設(shè)計(jì)燈箱廣告背景布的透明度為例，為大家介紹CSS3不透明度的調(diào)節(jié)方法，感興趣的小伙伴們可以參考一下
    2016-04-26

  • CSS3實(shí)現(xiàn)透明白塊向上漂浮動(dòng)畫(huà)特效源碼

    CSS3實(shí)現(xiàn)透明白塊向上漂浮動(dòng)畫(huà)特效源碼是一款半透明方塊向上飄動(dòng)CSS3動(dòng)畫(huà)效果，需要的朋友前來(lái)下載源碼
    2016-03-28

  • css繪制透明三角形

    這篇文章主要教大家使用css繪制透明三角形，css繪制三角形很簡(jiǎn)單，如何繪制透明的三角形，本文為大家解決這個(gè)問(wèn)題，感興趣的小伙伴們可以參考一下
    2016-03-10

  • CSS3中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié)

    這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié),其中通過(guò)text-stroke-color透明值的設(shè)置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下
    2016-03-07

  • CSS3中的Opacity多瀏覽器透明度兼容性問(wèn)題

    用來(lái)設(shè)定元素透明度的 Opacity 是CSS 3里的一個(gè)屬性。當(dāng)然現(xiàn)在還只有少部分瀏覽器支持，不過(guò)各個(gè)瀏覽器都有自己的私有屬性來(lái)支持,其中包括老版本的Mozilla和Safari
    2015-11-09

  • 兼容主流瀏覽器的CSS透明代碼(必看篇)

    下面小編就為大家?guī)?lái)一篇兼容主流瀏覽器的CSS透明代碼(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-10-18

最新評(píng)論