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

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

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

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

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

先看最后效果：

第一步：放置圖片 

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è)置一個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)透明度（即淡灰色）

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

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

由于默認(rèn)圖片有一個class選擇器imgopacity代表淡灰色，即當(dāng)我們鼠標(biāo)點(diǎn)擊該圖片時刪除該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é)束，感謝大家的閱讀，小編一定會再接再厲為大家貢獻(xiàn)更多的文章。

相關(guān)文章

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

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

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

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

  • CSS3不透明度實例講解

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

  • CSS3實現(xiàn)透明白塊向上漂浮動畫特效源碼

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

  • css繪制透明三角形

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

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

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

  • CSS3中的Opacity多瀏覽器透明度兼容性問題

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

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

    下面小編就為大家?guī)硪黄嫒葜髁鳛g覽器的CSS透明代碼(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-18

最新評論