Javascript- Сделайте снимок, затем замените его другим изображением (мигает)

У меня есть изображение карты автостоянки, и у меня есть изображение для каждого места автостоянки с большим красным кругом вокруг пятна, по сути, то же изображение карты с красным кругом вокруг пятна.Javascript- Сделайте снимок, затем замените его другим изображением (мигает)

Я пытаюсь сделать эффект мигающего изображения, где у меня есть первое изображение карты, а затем заменить его новым изображением карты, имеющим красный круг вокруг пятна.

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, заменяется на новый, а затем привел обратно , как в мигающем?

спасибо.

источник

2016-02-09 Conor Thompson

Я знал, что вы имеете в виду, и это кажется интересным.

Это нормально просто изменить src изображения напрямую, не устанавливая видимость, задавая интервалы. Он также показывает эффект мигания.

Вам не нужно менять внутреннийHTML на карте. 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; 
    } 
}

источник

2016-02-09 10:26:59 mob41

Awesome! Любите, как вы поехали, спасибо очень, что сводило меня с ума! : D –

Существует еще один способ сделать это, создавая прозрачный круг на карте. Это может быть более стабильным, чем изменение карты напрямую. Но два метода тоже в порядке. – mob41

Вы также можете попробовать 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' 
    }); 

});

Надеюсь, это поможет.

источник

2016-02-09 10:54:17

очень легко сделать, проверить это 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); 

})();

источник

2016-02-09 11:04:41 MiVvlt

Javascript- Сделайте снимок, затем замените его другим изображением (мигает)

ответ

Смежные вопросы