Question

我有一个图像，我想用另一个（相同的图像，但更明亮的颜色）替换，以便当他点击某个按钮时吸引用户注意它，只是因为他知道它在那里。所以我想用另外两张替换原来的图片，每张1秒，也分别用1秒钟。

换句话说，用户在页面上，他点击按钮，原始暗图像变为亮图像1秒，然后返回暗图像1秒，然后亮图像一秒，最后回到最初的黑暗。

所以：原创 - ＆gt;替换它（1秒） - ＆gt;原始（1秒） - ＆gt;替换它（1秒） - ＆gt;原始

我知道我必须使用javascript，但我在javascript中非常弱。有人可以给我代码吗？感谢

Answer 1

Dryden是正确的，但我们至少可以指出你正确的方向。

请参阅http://www.w3schools.com/jsref/met_win_settimeout.asp
将其与onclick函数和document.getElementById（＆＃34; imageid＆＃34;）相结合.src =＆＃34; ../ img / imgname.png＆＃34 ;;
< / LI>
万。

如果您无法使用它，请发布您正在使用的代码。

Answer 2

以下是一个可能实现的概念，很容易改进......好处是你只需要一张图片。

Demo Fiddle

HTML

<img src='http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg' />
<button id='button'>Start 1 second!</button>

CSS

img {
    height:100px;
    width:100px;
}

的jQuery

var interval;

function isEven(n) {
    return isNumber(n) && (n % 2 == 0);
}

function isNumber(n) {
    return n === parseFloat(n);
}
$('#button').on('click', function () {
    var src = $('img').attr('src');
    var alt = 'http://www.online-image-editor.com/styles/2013/images/example_image.png';
    $('img').attr('src', alt);
    var count = 0;
    interval = setInterval(function () {
        count++;
        if (count == 4) {
            clearInterval(interval);
            return false;
        }

        isEven(count) ? $('img').attr('src', alt) : $('img').attr('src', src);

    }, 1000);
});

Answer 3

在CSS中，您可以在padding和height/width之间使用动画和框模型的特征，以显示background标记的img。

<强> DEMO

基本编码：

<img src="http://lorempixel.com/300/200/nature/9" />

img { background:url(http://lorempixel.com/300/200/nature/6);
  animation : 2s infinite blink;
}
@keyframes blink {
  0%, 24.9%,75.1% ,100% {
    heigh:0;
    width:0;
    padding:100px 150px
  }
  25%, 75% {
    height:200px;
    width:300px;
    padding:0 0;
  }
}

使用javascript将图像替换为另一个图像一秒钟

3 个答案:

Demo Fiddle