Question

我已经看过css过滤器“反转”，但我正在努力思考如何通过点击文本链接来反转我的所有图像（具有Id =图像）。我还需要能够再次单击该链接以删除反转滤镜。如果有人有想法会很棒。

供参考：我的所有图像都标记为Id =图像，并且都在同一个div中。反转链接（文本）有自己的div，它是固定的，z-index 2000 ..（前层）

由于

Answer 1

http://jsfiddle.net/hu8tn0qb/1/

将您的所有ID =＆＃34;图像＆＃34;进入班级=＆＃34;图像＆＃34; （您不能多次使用ID），然后添加下面的代码。

第一个代码块是jQuery，它将添加＆＃34;倒置＆＃34;对所有图像进行分类＆＃34;图像＆＃34;当id为＆＃34; invert_btn＆＃34;点击。通过使用.toggleClass，它将在第二次单击时删除该类。

＆＃13;

$('#invert_btn').click(function() {
  $(".images").toggleClass("inverted");
});

＆＃13;

.inverted {
  -webkit-filter: invert(1);
  filter: invert(1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="invert_btn">Click Me</div>

<img src="http://placekitten.com/g/200/300" class="images" />
<img src="http://placekitten.com/g/200/300" class="images" />

＆＃13;

如何创建反转图像按钮？

1 个答案: