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

更新のたびにイメージが変更される (そして再度ロードされる) ため、フラッシュが発生します。古い背景は、新しい背景がソースからのダウンロードを終了する前にクリアされます。本当にフラッシュを発生させたくない場合は、2 つの div を上下に配置し、繰り返しごとに順番を入れ替える必要があります。

于 2012-07-19T01:06:53.067 に答える