0

ここにあるコードからハッキングして細断処理した javascript 画像パンナーに手を出しました...より簡単な方法のためにこれを放棄しましたが、いくつかのことを行う方法についてアドバイスが必要です。

左ボタンと右ボタンにこのコードがあります。

<div id="wrap">

<div class="entrance-hall pan-image">


</div>
</div>

<input type="button" value="Move Left" class="nav-left" onclick="pan_animate('-=20%')"  />
<input type="button" value="Move Right" class="nav-right"  onclick="pan_animate('+=20%')" />

これはjavascript用です。

function pan_animate(px) {
$('.pan-image').animate({
    'marginLeft' : px
});
}

ラッピング div 内で画像を左または右に 20% パンしますが、...

  1. パーセンテージ単位ではなくスムーズにスクロールする
  2. 左右のコンテナの端を通り過ぎるのをやめる
  3. 画像の中心から始めます。

多くを求めていませんか？これが理にかなっており、誰かが助けてくれることを願っています!

乾杯。

cssが追加されました

#wrap {
margin-bottom:60px;
border:4px solid white;
overflow:hidden;
}


 .pan-image {
position:relative;
width:2106px; 
height:395px;
left:50%;
margin-left:-1053px;
 }

 /* -- ===entrance hall=== -- */

.entrance-hall { 
background:url(/staging/kennawayhouse.org.uk/images/1-entrance-hall.jpg);
}
4

1 に答える 1

0
  • パーセンテージ単位ではなく、スムーズにスクロールする

これを実現する 1 つの方法は、単純にeasing関数を使用することです。jQuery animate API から:

イージング

.animate() の残りのパラメーターは、使用するイージング関数を指定する文字列です。イージング関数は、アニメーション内のさまざまなポイントでアニメーションが進行する速度を指定します。jQuery ライブラリの唯一のイージングの実装は、swing と呼ばれるデフォルトのイージングと、一定のペースで進行するリニアと呼ばれるイージングです。プラグイン、特に jQuery UI スイートを使用すると、より多くのイージング機能を利用できます。

次に、コードを次のように変更できます。

function pan_animate(px) {
    $('.pan-image').animate({'marginLeft' : px}, 'linear'); // Swing and Linear comes in jQuery, but swing is the default value.
}

そして、いくつかの滑らかさが知覚されます。

  • 左右のコンテナの端を通り過ぎるのをやめる

cssこれにはハックが必要ですが、内部要素に関する問題を解決position:absolute;left:5x;top:5px できる可能性があります。mayよりも正確な回答が必要な場合は、css コードを投稿できます。

編集

CSSコードに基づいて、移動時にマージンが親の制限を超えた場合に警告する機能を実現しました:

function pan_animate(px) {
    
    $marginLeftCss = $(".pan-image").css("marginLeft").replace(/[^-\d\.]/g, '');
    $n = px.replace(/[^-\d\.]/g, '');
    $x = (px.indexOf("-")==0) ? 1 - ($n/100):($n/100);
    
    $marginLeft = $marginLeftCss * $x;
    
    $width = $(".pan-image").width();
    $width += $(".pan-image").parent().width();
    
    if($marginLeft > - $width && $marginLeft < $width) //4212 = width*2
        $('.pan-image').animate({'marginLeft' : px}, 'linear');
    else
        alert("pan image reached it\'s end "  + $marginLeft);
}

フィドルを確認できます：http://jsfiddle.net/brunovieira/3wHn3/7/

  • 画像の中心から始めます。

要素を中央に$(".pan-image")配置するには、css の 2 つのアプローチを使用できますposition:relative;margin-left:auto;margin-right:auto。または、相対位置がオプションでない場合は、次のようなjQuery を使用して要素を中央に配置できます。

$parentHeight = $(".pan-image").parent().height();
$parentWidth = $(".pan-image").parent().width();

$panImageHeight = $(".pan-image").height();
$panImageWidth = $(".pan-image").width();

$(".pan-image").css('position','absolute','top',($parentHeight - $panImageHeight)/2 + 'px', 'left',($parentWidth - $panImageWidth)/2+'px');

繰り返しますが、コーディングによっては、上記の条件が機能しない場合があります。

于 2012-10-30T15:52:15.317 に答える