css3 filter属性作用演示代码实例

吐槽君发布于 2年前分类：实例代码

本章节分享一段代码实例，它使用javascript来动态的设置元素的filter属性。

有兴趣的朋友可以做一下参考，关于filter属性的用法可以参阅css3 filter属性一章节。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

上面的代码实现了演示功能，代码非常的简单，更多内容可以参阅相关阅读。