html5 css3設置filter圖片濾鏡代碼



73 291 98



特效描述:html5 css3設置 filter圖片濾鏡,html5 css3 filter圖片濾鏡十個效果示例,可調節,可疊加

代碼結構

1. 引入CSS

<link href="css/index.css" type="text/css" rel="stylesheet">

2. 引入JS

<script src="js/index.js"></script>

3. HTML代碼

<div>
  <img src="img/許巍.jpg" id="img/img" way="" onClick="css3_filter(this.id)" />
  <table cellspacing="0">
    <tr>
      <td name="button" id="grayscale" onClick="css3_filter(this.id)">灰度</td>
      <td name="button" id="sepia" onClick="css3_filter(this.id)">褐色</td>
      <td name="button" id="saturate" onClick="css3_filter(this.id)">飽和度</td>
      <td name="button" id="hue-rotate" onClick="css3_filter(this.id)">色相旋轉</td>
      <td name="button" id="invert" onClick="css3_filter(this.id)">反色</td>
      <td name="button" id="opacity" onClick="css3_filter(this.id)">透明度</td>
      <td name="button" id="brightness" onClick="css3_filter(this.id)">亮度</td>
      <td name="button" id="contrast" onClick="css3_filter(this.id)">對比度</td>
      <td name="button" id="blur" onClick="css3_filter(this.id)">模糊</td>
      <td name="button" id="drop-shadow" onClick="css3_filter(this.id)">陰影</td>
    </tr>
    <tr>
      <td colspan="10" id="value">
       屬性值(點擊圖片取消所有效果)
      </td>
    </tr>
    <tr>
      <td colspan="10" id="value" onClick="stylea()">
      灰度:<output id='1'>0</output>
      褐色:<output id='2'>0</output>
      飽和度:<output id='3'>0</output>
      色相:<output id='4'>0</output>
      反色:<output id='5'>0</output>
      透明度:<output id='6'>0</output>
      亮度:<output id='7'>0</output>
      對比度:<output id='8'>0</output>
      模糊:<output id='9'>0</output>
      <br />
      陰影x偏移量:<output id='10'>0</output>
      陰影y偏移量:<output id='11'>0</output>
      陰影距離:<output id='12'>0</output>
      陰影顏色:<output id='13'>0</output>
      </td>
    </tr>
    <tr>
      <td colspan="10">
        /*已用chorme49.0版本,Mozilla Firefox45.0測試可用!*/
      </td>
    </tr>
  </table>
  </div> 



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 拖動 拖拽 拖動插件 拖拽插件 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 圖片拖動 圖片拖拽 文本框 text文本框 選項卡自動切換 按鈕控制 編輯器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子