0

我只有一本用于 iPad 的 HTML5 漫画书，我正在制作交互式。在漫画书的第 8 页（见下面的链接），我所指的场景在右下角，应该看起来很暗，因为目前在它下面有一个深色版本，让它看起来好像很亮尚未开启。

漫画的链接

这就是我想要发生的事情：

  1. 点击时，播放声音（完美）
  2. 单击时，深色背景层的不透明度会随着播放声音开始时听到的短电音效同步闪烁。不透明度应以 0 结束，以显示灯现在已打开。

这是目前发生的情况：

  1. 点击时，播放声音（完美）
  2. 单击时，深色背景图层的不透明度设置为 0，但一旦用户释放单击，它就会返回 1。

基本上，我会在不透明度参数之间引入一个延迟和一个“闪烁”来模拟闪烁的光。

HTML 

<a href="#" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();">

    <div class="ibox" id="p8s5">

        <div id="flicker"></div>    

        <button id="playButt" class="animated flash" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();">                
        </button>

    </div> 

</a>

CSS

div#flicker {
opacity: 1;
-transition-property: opacity;
-webkit-transition-duration: 0s;
-webkit-transition-delay: 0s;
position: absolute;
bottom: 1px; right: 1px;
width: 245px; height: 341px;
background: url('img/p8s5.jpg') no-repeat;
}

div#flicker:active, div#flicker:focus {
  opacity:0;
}

希望你能帮忙。

非常感谢，马特

4

1 回答 1

2

这个jsfiddle可以解决你的问题。

首先，它用css3创建一个动画：

.animateFlicker {
    -webkit-animation: flicker 17s;    
}

@-webkit-keyframes flicker{
    0% {opacity:1}
    3% {opacity:0}
    6% {opacity:0}
    7% {opacity:1}
    8% {opacity:0}
    9% {opacity:1}
    10% {opacity:0}
    99% {opacity:0}
    100% {opacity:1}
}

然后它用jQuery监听click事件来执行动画并在时间结束后停止它。

$('#flicker').click(function(){
    var $this = $(this);
    $this.addClass('animateFlicker');
    setTimeout(function() 
    {
        $this.removeClass('animateFlicker');
    }, 17000);    
});​

注意我只使用了 webkit，因此您需要对其进行更改以使其在所有浏览器中都能正常工作。

于 2012-07-04T23:03:08.777 回答