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

我心飞翔 分类:实例代码

本章节分享一段代码实例,它使用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>

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

相关阅读:

(1).document.querySelectorAll()方法可以参阅document.querySelectorAll()一章节。

(2).document.querySelector()可以参阅document.querySelector()一章节。

(3).innerHTML可以参阅innerHTML一章节。

(4).getAttribute()可以参阅getAttribute()一章节。

css3 filter属性作用演示代码实例,这样的场景在实际项目中还是用的比较多的,关于css3 filter属性作用演示代码实例就介绍到这了。

css3 filter属性作用演示代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容