Javascript-使图像出现然后用另一个图像替换它（闪烁）答案

【问题标题】：Javascript- Make an image appear then replace it with another image (blinking)Javascript-使图像出现然后用另一个图像替换它（闪烁）
【发布时间】：2016-02-09 10:17:50
【问题描述】：

我有一个停车场地图图像，并且每个停车场位置都有一个图像，该位置周围有一个大红色圆圈，基本上是相同的地图图像，只是一个位置周围有一个红色圆圈。

我正在尝试在我拥有第一个地图图像的地方制作闪烁的图像效果，然后将其替换为在某个点周围有一个红色圆圈的新地图图像。

HTML

<div id="map">

JavaScript

var img = document.getElementById('map').innerHtml = '<img id="map" src="../../images/Map.png" class="img-responsive" width="800" height="600"/>';
var img2 = document.getElementById('map').innerHtml = '<img id ="map2" src="../../images/<?php $location = "B04"; echo $location;?>.png" class="img-responsive" width="800" height="600">';
var i = 2;

var interval = window.setInterval(function(){
    if((img.style.visibility == 'hidden')&&(img2.style.visibility == 'visible')){
        img.style.visibility = 'visible';
        img2.style.visibility = 'hidden';
    }else{
        img.style.visibility = 'hidden';
        img2.style.visibility = 'visible';
    }
}, 1000); 
}

如何让图像出现，然后从 HTML 中删除，替换为新图像，然后再次恢复，就像闪烁一样？

谢谢。

【问题讨论】：

标签： javascript jquery html image

【解决方案1】：

我知道你的意思，而且看起来很有趣。

可以直接改变图片的src，不设置可见性，通过设置interval。它还显示了闪烁的效果。

您不需要更改地图的 innerHTML。 DIV 太额外了。

HTML

<!--I simplified the code. Don't use this code in production -->
<html>
<script src="code.js"></script>
<body onload="onloadfun()">
<!--you can set this image to be a loading image for reference.-->
<img src="loading.gif" id="map"></img>
</body>
</html>

JavaScript

var flip = false;
function onloadfun(){
    setInterval(function(){update();},1000);
}

function update(){
    var node = document.getElementById("map");
    if(flip){
        node.src = "map2.png";
        flip = false;
    } else {
        node.src = " map.png";
        flip = true;
    }
}

【讨论】：

太棒了！喜欢你的做法，非常感谢这让我发疯！ :D
还有另一种方法可以在地图上渲染一个透明的圆圈。这可能比直接更改地图更稳定。但是两种方法也可以。

【解决方案2】：

您可能还想尝试 CSS3 方法，只需使用 JavaScript/jQuery 将闪烁的图像定位到您想要的任何位置。

http://codepen.io/anon/pen/RrqMbO

HTML

<div class="container">
  <img src="http://bushbyre.e1.siteloft.com/wp-content/uploads/2015/10/Tamar_ST_MAP.jpg" class="park-img" />
  <img src="http://anspachmedia.com/wp-content/uploads/2015/08/full-circle.png" class="icon" />
  <img src="http://anspachmedia.com/wp-content/uploads/2015/08/full-circle.png" class="icon2" />
</div>

CSS

.container {
  position: relative;
}

.icon, .icon2 {
  width: 40px;
  position: absolute;

  animation: blinker 1s linear infinite;
}

.park-img {
  width: 500px;
}

@keyframes blinker {  
  100% { opacity: 0.0; }
}

jQuery

jQuery( function($) {

    $('.icon').css({
        left: '243px',
        top: '160px'
    });

    $('.icon2').css({
        left: '455px',
        top: '70px'
    });

});

希望这会有所帮助。

【讨论】：

【解决方案3】：

真的很容易做到，看看这个jsfiddle：

JsFiddle

(function() {
   var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');

window.setInterval(function(){
  if(img1.style.display == "block"){
    img1.style.display = "none";
    img2.style.display = "block";
  } else {
    img1.style.display = "block";
    img2.style.display = "none";
  }
}, 1000);

})();

【讨论】：