0

画像とボタンを含む更新パネルがあります。画像コントロールは、「次の画像」ボタンをクリックすると一度に1つの画像を表示し、「前の画像」ボタンをクリックすると前の画像を表示します。コードサンプルはこんな感じ

protected void btnNext_Click(..)
{
    Image1.ImageUrl=getNextImageFromDatabase();
    UpdatePanel1.Update();
}
protected void btnPrevious_Click(..)
{
    Image1.ImageUrl=getPreviousImageFromDatabase();
    UpdatePanel1.Update();
}

今私が知りたいのは、「次の画像」をクリックしたときに画像や更新パネルのコンテンツを左にスライドさせ、「前の画像」をクリックしたときに右にスライドさせる方法はありますか？AjaxToolKitまたはJQueryを使用する方法はありますか？

4

2 に答える 2

1

スライド効果のように見えるjqueryfadeInfadeOutメソッドを使用できます

こちらの例をご覧くださいhttp://api.jquery.com/promise/#example-1

于 2012-08-04T17:45:57.450 に答える
0

Jqueryを使用すると、margin-leftを負の値にアニメーション化できるため、Imageは消えます。私は個人的にこのソリューションを使用しています：

  • ユーザーが[次へ]/[前へ]ボタンをクリックします
  • 読み込み中の画像を表示する（gif）
  • var img = new Image()javascriptで画像（）を作成する
  • その画像のオンロードアクションを設定して、古い画像を左右に移動し、新しい画像を追加します。
  • 次/前の画像のURLを取得
  • 作成されたイメージのsrcを割り当てると、ロードされたときにonloadアクションが実行されます。

この場合、AjaxToolkitは最もクリーンなソリューションではない可能性があります。おそらく、nex / prev image urlを返す簡単なサービスを作成する必要がありますが、それはほんの数行のコードです...

于 2012-08-04T17:53:52.753 に答える