css3 filter屬性作用演示程式碼例項

antzone發表於2017-04-13
CSSS3Filter

本章節分享一段程式碼例項，它使用javascript來動態的設定元素的filter屬性。

有興趣的朋友可以做一下參考，關於filter屬性的用法可以參閱css3 filter屬性一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
.imgbox {
  width: 860px;
  margin: 20px auto;
  height: 256px;
}
img {
  display: block;
  width: 410px;
  float: left;
}
img:last-of-type {
  float: right;
}
.box {
  width: 860px;
  margin: 0 auto;
}
input[type="button"] {
  font-size: 14px;
  padding: 10px 12px;
  border: none;
}
input[type="button"].hover, input[type="button"]:hover {
  background: #2BA5D3;
  color: #fff;
}
.inner {
  width: 860px;
  text-align: center;
  margin: 0 auto;
  padding: 0 0 20px 0;
  font-size: 20px;
  font-family: 'microsoft yahei';
}
</style>
<script>
window.onload = function () {
  var img = document.querySelectorAll('img')[1];
  var btn = document.querySelectorAll('input');
  var div = document.querySelector('.inner');
  img.style.WebkitFilter = 'grayscale(0.8)';
  div.innerHTML = 'grayscale：灰度，值為0-1之間小數';
  for (var index = 0; index < btn.length; index++) {
    btn[index].onclick = function () {
      switch (this.value) {
        case 'grayscale':
          img.style.WebkitFilter = 'grayscale(0.8)';
          break;
        case 'sepia':
          img.style.WebkitFilter = 'sepia(0.8)';
          break;
        case 'saturate':
          img.style.WebkitFilter = 'saturate(50)';
          break;
        case 'hue-rotate':
          img.style.WebkitFilter = 'hue-rotate(90deg)';
          break;
        case 'invert':
          img.style.WebkitFilter = 'invert(0.3)';
          break;
        case 'opacity':
          img.style.WebkitFilter = 'opacity(0.2)';
          break;
        case 'brightness':
          img.style.WebkitFilter = 'brightness(0.8)';
          break;
        case 'contrast':
          img.style.WebkitFilter = 'contrast(210)';
          break;
        case 'blur':
          img.style.WebkitFilter = 'blur(5px)';
          break;
        case 'drop-shadow':
          img.style.WebkitFilter = 'drop-shadow(10px 10px 5px #aaa)';
          break;
      }
      div.innerHTML = this.value + '：' + this.getAttribute('data-info');
    }
  }
}
</script>
</head>
<body>
  <div class="imgbox" id="imgBox">
    <img src="demo/js/img/girl.jpg">
    <img src="demo/js/img/girl.jpg">
  </div>
  <div class="inner"></div>
  <div class="box">
    <input type="button" value="grayscale" data-info="灰度，值為0-1之間小數">
    <input type="button" value="sepia" data-info="褐色，值為0-1之間小數">
    <input type="button" value="saturate" data-info="飽和度，值為num">
    <input type="button" value="hue-rotate" data-info="色相，值為0-360之間的色輪數">
    <input type="button" value="invert" data-info="反色，值為0-1之間小數">
    <input type="button" value="opacity" data-info="不透明度，值為0-1之間小數">
    <input type="button" value="brightness" data-info="亮度，值為0-1之間小數">
    <input type="button" value="contrast" data-info="對比度，值為num">
    <input type="button" value="blur" data-info="模糊，值為length">
    <input type="button" value="drop-shadow" data-info="陰影，同box-shadow寫法">
  </div>
</body>
</html>

上面的程式碼實現了演示功能，程式碼非常的簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.document.querySelectorAll()方法可以參閱document.querySelectorAll()一章節。

（2）.document.querySelector()可以參閱document.querySelector()一章節。

（3）.innerHTML可以參閱innerHTML一章節。

（4）.getAttribute()可以參閱getAttribute()一章節。

相關文章