CSS filter属性用于编辑图像或视觉效果,无需任何专门的软件。 CSS 过滤器使用默认值工作,因此它们不会为用户提供任何更改其强度的控制。jQuery 动态更改 CSS 过滤器中的强度值,从而使用户可以完全控制图像。
句法:
.demo {
filter: [];
}
示例:以下是如何将 50% 模糊过滤器应用于元素。
.demo {
filter: blur(50%);
}
图像过滤器:为了创建图像过滤器,我们有用于输入变量的滑块,这些变量通过 jQuery 传递每个过滤器的强度值,并且该过滤器将通过 CSS 应用。
项目结构:
示例:在本示例中,我们将使用 demo.html 文件中的 HTML 来设计结构。之后,我们将通过在 demo.css 文件中使用 CSS 来使用过滤器,然后在 demo.js 文件中使用 JavaScript 提供对这些过滤器的控制。
demo.html
demo.css
/** @format */
body {
text-align: center;
color: white;
}
.main {
width: 100vw;
display: flex;
}
.range_panel {
background-color: rgb(39, 39, 39);
width: 300px;
height: 100vh;
padding: 30px;
padding-top: 100px;
}
span {
display: block;
margin: 10px;
}
.image {
padding: 100px;
}
.image img {
width: 30vw;
}
demo.js
function main() {
$(".image_main").css(
"-webkit-filter",
"grayscale(" +
$("#id1").val() +
"%) blur(" +
$("#id2").val() +
"px) brightness(" +
$("#id3").val() +
"%) sepia(" +
$("#id4").val() +
"%) opacity(" +
$("#id5").val() +
"%) contrast(" +
$("#id6").val() +
"%) saturate(" +
$("#id7").val() +
"%) invert(" +
$("#id8").val() +
"%)"
);
}
演示文件
/** @format */
body {
text-align: center;
color: white;
}
.main {
width: 100vw;
display: flex;
}
.range_panel {
background-color: rgb(39, 39, 39);
width: 300px;
height: 100vh;
padding: 30px;
padding-top: 100px;
}
span {
display: block;
margin: 10px;
}
.image {
padding: 100px;
}
.image img {
width: 30vw;
}
演示.js
function main() {
$(".image_main").css(
"-webkit-filter",
"grayscale(" +
$("#id1").val() +
"%) blur(" +
$("#id2").val() +
"px) brightness(" +
$("#id3").val() +
"%) sepia(" +
$("#id4").val() +
"%) opacity(" +
$("#id5").val() +
"%) contrast(" +
$("#id6").val() +
"%) saturate(" +
$("#id7").val() +
"%) invert(" +
$("#id8").val() +
"%)"
);
}
输出: