Question

我有一个停车场地图图片，每个停车场都有一张图片，周围有一个大红圈，基本上是同一个地图，周围只有一个红圈。

我正在尝试使用第一张地图图像制作闪烁的图像效果，然后将其替换为在地点周围有红圈的新地图图像。

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中删除，更换为新图像，然后再次恢复，如闪烁？

谢谢。

Answer 1

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

通过设置间隔，可以直接更改图像的src，而无需设置可见性。它还显示了闪烁的效果。

您不需要更改地图的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;
    }
}

Answer 2

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

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

<强> HTML

.container {
  position: relative;
}

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

  animation: blinker 1s linear infinite;
}

.park-img {
  width: 500px;
}

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

<强> CSS

jQuery( function($) {

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

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

});

<强>的jQuery

for (int i = 0; i < table.getRowCount(); i++) {
    if (table.getValueAt(i, 1) != null) {
        if (((Boolean) table.getValueAt(i, 1)).booleanValue()) {
          String jobName = (((DefaultTableModel) table.getModel()).getValueAt(i, 0).toString());

希望这有帮助。

Answer 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);

})();

Javascript-显示图像然后用另一个图像替换它（闪烁）

3 个答案: