2

我有一些用于为天气雷达制作动画的 javascript，但图像会在每个时间间隔闪烁。有谁知道如何解决这一问题？这是我到目前为止的代码。一个.. http://jsfiddle.net/5a2BZ/46/

HTML

<script src="http://code.jquery.com/jquery-1.5.2rc1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>


<div id="slider">
    <div id="bar">
    </div>
</div>

JavaScript

$('#bar').draggable({
    containment: 'parent'
});

var animate = null;
var even = true;

animate = setInterval(function () {

    if (even) {
        $("#bar").css("background-image", "url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg')");
        even = false;
    } else { 
        $("#bar").css("background-image", "url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342654440.jpg')");
        even = true;
    }

}, 500);



var el = document.getElementById('bar'); 
el.addEventListener("touchstart", touchHandler, true);
el.addEventListener("touchmove", touchHandler, true);
el.addEventListener("touchend", touchHandler, true);
el.addEventListener("touchcancel", touchHandler, true);

function touchHandler(event){
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                              first.screenX, first.screenY,
                              first.clientX, first.clientY, false,
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

CSS

#slider {
    width: 700px;
    border: 1px solid #000;
    height: 500px;
}

#bar {
    border: 1px solid #000;
    left:30px;
    top:30px;
    height: 355px;
    cursor: pointer;
    width: 666px;
}
4

4 回答 4

2

使用与您的雷达图像匹配的静态图像作为背景。这不是最好的解决方案，但似乎对我有用。这是CSS和HTML。我没有更改javascript。

#slider {
width: 700px;
border: 1px solid #000;
height: 500px;
}

#bar {
border: 1px solid #000;
left:30px;
top:30px;
height: 355px;
cursor: pointer;
width: 666px;
}
#well{
width: 100%;
height: 100%;
z-index:-1;
position:relative;
background-image: url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg');
}

并将您的酒吧包裹在一个井周围，例如：

<div id="slider">
    <div id="bar">
        <div id="well">
        </div>
    </div>
</div>​

​这里是完整的解决方案：http: //jsfiddle.net/5a2BZ/70/

于 2012-07-19T00:54:44.180 回答
1

亚历克斯和肖恩都是正确的。

这是一个版本，它允许它处理任意数量的图像（在合理范围内）。

http://jsfiddle.net/5a2BZ/66/

<script src="http://code.jquery.com/jquery-1.5.2rc1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.j></script>

<style>
.slider {
    width: 700px;
    border: 1px solid #000;
    height: 500px;
}

.bar {
    border: 1px solid #000;
    left:30px;
    top:30px;
    height: 355px;
    cursor: pointer;
        width: 666px;
    }

    .bar img {
        display: none;   
    }
</style>

<div class="slider">
    <div class="bar">
        <img src="http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg"/>
        <img src="http://static.baynews9.com/images/wx/bn9/radar/7_county/1342654440.jpg"/>
    </div>
</div>​


<script>
$('.bar').draggable({
    containment: 'parent'
});

var animate = null,
    i = 0;

animate = setInterval(function () {
    var imgs = $('.bar').children('img'),
        currentImg = imgs.eq(i-1),
        nextImg = imgs.eq(i);

    if (i === 0) {
        currentImg = imgs.eq(imgs.length - 1);
    }            

    currentImg.hide();
    nextImg.show();

    if (i >= imgs.length - 1) {
        i = 0;
    }
    else {
        i += 1;
    }

}, 500);



var el = document.getElementById('bar'); 
el.addEventListener("touchstart", touchHandler, true);
el.addEventListener("touchmove", touchHandler, true);
el.addEventListener("touchend", touchHandler, true);
el.addEventListener("touchcancel", touchHandler, true);

function touchHandler(event){
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                              first.screenX, first.screenY,
                              first.clientX, first.clientY, false,
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}
</script>

​
于 2012-07-19T01:08:54.190 回答
0

如果我是你，我宁愿有几个带有正确图像的 DIV，并在需要时显示和隐藏这些 div，这样你就不会有任何闪烁。

像这样的一些简单代码：

    <div id="slider" class="Normal" style="position: relative; ">

<img alt="" src="http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg" style="" class="bar img1">
<img alt="" src="http://static.baynews9.com/images/wx/bn9/radar/7_county/1342654440.jpg" style="display:none;" class="bar img2">

    </div>

然后你可以在你的 JavaScript 中有这样的东西：

if (even) {
        $(".bar").hide();
        $(".img1").show();
        even = false;
    } else { 
        $(".bar").hide();
        $(".img2").show();
        even = true;}

这是演示：http: //jsfiddle.net/webwarrior/xnePc/4/

这将首先隐藏具有类横幅的所有图像，然后显示类“img1”/“img2”的特定图像。img1 和 img2 也可以是 id。

也看看这个库，以获得更多想法：

http://sorgalla.com/projects/jcarousel/

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

希望这可以帮助。

于 2012-07-19T01:01:39.693 回答
0

发生闪烁是因为图像在每次刷新时都在更改（并再次加载）。旧背景在新背景结束从其源下载之前被清除。如果您真的不希望发生闪烁，您应该使用两个 div，将一个放在另一个的顶部，并在每次迭代中交替顺序。

于 2012-07-19T01:06:53.067 回答