一.css3filter(滤镜)属性
(1).语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
brightness(%) 亮度(值越大越亮) eg:brightness(200%)
blur(px) 设置模糊(值越大越模糊) eg:blur(5px)
contrast(%)调整图像的对比度 eg:contrast(200%)
drop-shadow 设置阴影效果 eg:drop-shadow(0px 6px 11px #000)
grayscale(%)灰度(值越大越灰) 值在0%到100%之间 eg:grayscale(50%)
hue-rotate(deg)色相旋转(超过360是又绕一圈) 值为angle eg:hue-rotate(90deg)
invert(%) 反色 值在0%和100%之间 eg:invert(100%);
opacity(%) 透明度 值在0%和100%之间 eg:opacity(30%);
saturate(%) 饱和度 eg:saturate(400%);
sepia(%) 褐色 值在0%和100%之间 eg:sepia(100%)
url
注意:1.drop-shadow(h-shadow v-shadow blur spread color)
<offset-x> <offset-y> (必须)设定水平、垂直方向阴影距离
blur(可选)值越大,越模糊
spread(可选)正值会使阴影扩张和变大,负值会是阴影缩小.
color(可选)
2.filter: url(svg-url#element-id)
IE8 及更低版本浏览器通常使用 opacity 属性。
(2).列子
.filter{
overflow: hidden;
}
.filter img{
float: left;
margin: 25px;
}
.filter-img{
-webkit-filter:contrast(108%) hue-rotate(21deg) brightness(125%) drop-shadow(0px 6px 11px #000);
filter:contrast(108%) hue-rotate(21deg) brightness(125%) drop-shadow(0px 6px 11px #000);
}
<div class="filter">
<img src="images/w.jpg" alt="">
<img class="filter-img" src="images/w.jpg" alt="">
</div>
二.jquery过滤器.filter()
(1).简述
这个方法主要用来遍历列表中的元素,或者有着并列关系的元素,filter()方法其实是个过滤选择器,旨在从众多的并列的“兄弟姐妹”中查找到符合匹配条件的那一来。
(2).语法
a. .filter( selector )一个用于匹配元素的选择器字符串。
所提供的选择器是对每个元素进行测试;这个选择器匹配的所有元素将包含在结果中。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
<script>
$('li').filter(':even').css('background-color', 'red');
</script>
结果是1,3,和5项的背景变为红色,因为他们匹配这个选择器(记得:even 和 :odd使用基于0的索引)
b. .filter(function(index){..})一个函数用作测试集合中的每个元素。this 是当前DOM元素。
接受一个函数作为参数,然后根据函数的返回值判断,如果返回值是true,这个元素将被保留,如果返回值是false,这个元素将被剔除。
<ul>
<li><strong>list</strong> item 1 - 1 个strong </li>
<li><strong>list</strong> item <strong>2</strong> -2个 <span>strong</span></li>
<li><strong>list</strong> item <strong>3</strong> -3个 <strong>strong</strong></li>
<li>list item 3</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
$( "li" ).filter(function( index ) {
console.log(index)//索引
return $( "strong", this ).length === 3;
}).css( "background-color", "red" );
//注意: $( "strong", this ).length === 3;this是li对象,这种写法后面那个是作用域,在li中含有3个<strong>标签的。JQuery中$()返回的是个对象,所以判断某个元素是否存在,要根据取到的长度来判断,if($("#aa").length>0){...}
</script>
再来,使用索引
$( "li" ).filter(function( index ) {
console.log(index % 3 == 2)
return index % 3 == 2;
}).css( "background-color", "red" );
这对代码将会导致第三和第六列表项背景变为红色,因为它使用模运算符( % )选择每一个项目和index值,除以3时,余2 。
c. .filter(element) 一个或多个DOM元素来匹配当前元素集合
<ul>
<li class="filter-css">list item 1</li>
<li>list item 2</li>
<li class="filter-css">list item 3></li>
<li>list item 3</li>
<li class="filter-css">list item 5</li>
<li>list item 6</li>
</ul>
$( "li" ).filter(".filter-css").css( "background-color", "red" );
结果是为含有 "filter-css" 类的 li添加红色背景。
d. .filter( jQuery object ) 现有jQuery对象,用于进一步筛选当前元素集合
$( "li" ).filter( $(".filter-css")).css( "background-color", "red" );
效果跟c 是一样的。
(3).列子
当索引为0或是含有 "filter-css" 类的 li添加红色背景。
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
</head>
<body >
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="filter-css">list item 3></li>
<li>list item 3</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
<script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
<script>
$(document).ready(function(){
$( "li" ).filter(function (index) {
return index == 0 || $(this).attr("class") == "filter-css";
}).css( "background-color", "red" );
});
</script>
</html>