1

私はレストランのウェブサイトを作っています。所有者は内部のパノラマ写真を撮り、サイトのBGパン/スキミングでパノラマを撮影したいと考えています。したがって、基本的にパノラマはBGであり、画像上で回転またはパンする必要があります。これは可能ですか？スローモーションなどで画像の位置を変更するようなjQueryを考えていたのですが、jQueryで必要なコードを思い付くのに十分ではありませんでした。私はほとんどanimate.cssに頼りましたが、少なくともIE8以上のブラウザー互換性が必要です。

前もって感謝します。:)

4

2 に答える 2

3

これが貧乏人のバージョンです：

​.slide {
 height:160px;
 width:50px;
 background-position:160px 0;    
 background-image:url(http://i.imgur.com/vdDQgb.jpg)  
}

HTML：

<div class="slide"></div>
<div id="num"></div>

JS：

var limit = 60;
var start = 120;    
var moveBy = 1;    
var timer1 = setInterval(function() {  
    $('#num').text(start);
    $('.slide').css('background-position',start+'px 0') ;
    start--;
    if(start<0) {
       alert("done"); 
       clearTimeout(timer1);
    }    
},50)
于 2012-10-25T20:08:32.303 に答える
1

最新のブラウザでスムーズにパンできるようにするには、「ハーフ」ピクセルをサポートしているため、実際にキャンバスを確認する必要があります。これはIE8では機能しないことは知っていますが、ピクセル全体をジャンプすることと、ピクセル間を補間することの違いは非常に大きいです。キャンバスでのケンバーン効果のjavascript（jQuery）の例については、http： //www.willmcgugan.com/blog/tech/2011/2/26/ken-burns-effect-with-javascript-and-canvas/を参照してください。

たぶん、IE8の非キャンバスフォールバックがオプションになるでしょう。たとえば、上下のcssプロパティを変更して、比較的配置された画像を移動しますか？

于 2012-10-25T20:04:25.090 に答える