css3filter(滤镜)属性和jquery过滤器.filter()

最新推荐文章于 2022-05-01 19:16:09 发布

面条请不要欺负汉堡

最新推荐文章于 2022-05-01 19:16:09 发布

阅读量2.2k

点赞数

分类专栏： css3 jquery 文章标签： css3filter滤镜属性 jquery过滤器.filter

本文链接：https://blog.csdn.net/gao_xu_520/article/details/79257752

版权

jquery 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css3

15 篇文章 0 订阅

订阅专栏

一.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>

面条请不要欺负汉堡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3filter(滤镜)属性和jquery过滤器.filter()

一.css3filter(滤镜)属性(1).语法filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();brightness(%) 亮度(值越
复制链接

扫一扫