1

これを自分で書く方法を知りたいです。 http://www.cubancouncil.com/work/project/coppola-winery/

リンクされたページには、私が使いたい正確な機能があります。彼らのスクリプトがどのように機能すると私は信じていますか。右にスライドしてそのイメージのコンテナ div を非表示にするイメージをクリックし、固定位置にある右から左に大きなイメージをロード/スライドします。

ここの誰かがこの質問に解決策で答えるのに十分親切である場合は、さらに一歩進んでコードの一部にコメントして、適切な html にリンクできるようにしていただけませんか?

この 1 つのスクリプトを理解することで、より高度な Javascript と Jquery を理解できるようになると思います。ありがとう。

4

2 に答える 2

1

編集:いくつかのコードが提供されたより良い例を見つけました。要素を左にスライドする方法について説明しているセクションに移動します。ご不明な点がございましたら、お気軽にお問い合わせください。

また、自由に完全に機能する例 (記事の例とまったく同じ) を提供して、ブラウザーで実行できるようにしました。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <style>
    .slide {
      position: relative;
      background-color: gray;
      height: 100px;
      width: 500px;
      overflow: hidden;
    }
    .slide .inner {
      position: absolute;
      left: -500px;
      bottom: 0;
      background-color:#e3e3e3;
      height: 30px;
      width: 500px;
    }
    </style>
    <script>
        $(document).ready(function() {
          $('#slideleft button').click(function() {
            var $lefty = $(this).next();
            $lefty.animate({
              left: parseInt($lefty.css('left'),10) == 0 ?
                -$lefty.outerWidth() :
                0
            });
          });
        });
    </script>
</head>
<body style>
    <div id="slideleft" class="slide">
        <button>slide it</button>
        <div class="inner">Slide to the left</div>
    </div>
</body>
</html>

この記事ではそのほとんどを説明していますが、簡単に概要を説明します。本質的に、私たちがやっていることは、あなたがスライドさせようとしているものが何であれ、それが出てくるように左の位置を変更していることです. 最初に、CSS を -500px に設定して、画面の外に出しました。JavaScript はボタンのクリックをリッスンし、左の位置を変更して div を移動します。ただし、 Jquery のanimate()関数がほとんどの作業を行います。

これについてややこしいのは、三項演算子です。詳細については、こちらを参照してください。基本的に、左のプロパティが 0 かどうかを確認するだけです。0 の場合は、外側の -500px に戻します。左が 0px でない場合は、画面の外になければならないことがわかっているので、0px に戻します。

他に何かご不明な点がありましたら、お知らせください。

于 2012-08-29T21:07:34.837 に答える
1

簡単なフィドルを作成しました（ホバーで動作することに注意してください!!）が、うまくいくはずです。私の国では少し遅いので、私の脳は適切に機能しません:) ここでフィドル

$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();  
$(".wrapper").hover(function(){        
$(".inner").stop().animate({top:-innerHeigth},1000);
 //alert(innerHeigth)
 },function(){
 $(".inner").stop().animate({top:0},1000);

 });
 });
于 2012-08-30T01:43:34.387 に答える