Psuedo-element Solution

Question

我有一堆图像，点击我希望图像变成白色，模仿某种淡化效果。所以你点击它1秒钟就会从原始图像淡化为白色。当用户点击其他内容时，我还需要它返回原始图像。

这可以用JavaScript吗？ - 如果是这样我应该看什么（我对图形非常糟糕）。

我曾尝试过不透明但我不想在图像后面看到背景

Answer 1

改善Spencer Wieczorek解决方案（两种方式似乎是我认为最好的解决方案）：

如何动态创建白色div（并将其淡入淡出）而不是将其放入html代码中？

请参阅fiddle。

$("#myImage").click(function(){
    $(this)
    .parent().css({position:'relative'}).end()
    .after($('<div>')
           .hide()
           .css({position:'absolute'
                 , top: $(this).position().top
                 , left: $(this).position().left
                 , width: $(this).width()
                 , height: $(this).height()
                 , background: '#FFF'
                })
           .fadeIn('fast')
           .on({
                click : function(e){
                   $(this).fadeOut('fast', function(){ $(this).remove();});
                }
           })
          );
});

然后，你没有任何东西可以添加到html代码或css样式中，Jquery可以做任何事情。

@Spencer Wieczorek：我做了我自己的答案，因为我不同意你设计css风格的方式（固定位置真的不好，特别是如果页面滚动例如......）。我的更多......独立-y;）

Answer 2

Psuedo-element Solution

您可以使用带有伪元素的包装器来覆盖您正在寻找的内容 - 并且动画由切换的CSS类（这是性能的理想选择）处理。

CodePen Demonstration

<强> HTML

<div class="whiteclicker">
  <img src="http://lorempixel.com/400/200" alt=""/>
</div>

<强> SCSS

@import "compass/css3/transition";

body { background: gainsboro; text-align: center; }

.whiteclicker {
  display: inline-block;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: white;
    opacity: 0;
    @include transition(opacity 1s ease);
  }
  &.active::after {
    opacity: 1;
  }
}

<强> JS

$('.whiteclicker').click(function(){
  $(this).toggleClass('active');
});

Answer 3

您可能想要尝试将两个图像堆叠在一起。见：

<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
     if(currentImage==1){
         currentImage++;
         document.getElementById("image").innerHTML = image2;
     }
     if(currentImage==2){
         currentImage--;
         document.getElementById("image").innerHTML = image1;
     }
}
</script>
<style>
     .images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>

对于褪色我只想看看你能做到的。

编辑：

<script type="text/javascript">
var fadecount = 100;
function fade() {
    document.getElementById("imageToFade").style.opacity = fadecount;
    fadecount--;
    if(fadecount==0){
        clearTimeout(fade);
    }
}
function start_fade(){
    var fade = setTimeout(fade(), 10);
}
</script>

Answer 4

使用Base 64，您可以只拥有图片的二进制版本，然后是全白图片，并根据.click将src重新分配给白色base64 ......

document.getElementById（“img”）。src =“data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8 / w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg ==“

在点击之后只需更改为全白版本，技术上是从点击事件驱动的js，并且不涉及仅存在于不同层的两个不同元素......

JavaScript - 单击时使图像变为白色

4 个答案:

Psuedo-element Solution