0

このスクリプトは、ユーザーが画像の上にマウスを置くと、テキストが画像の下から上に移動するようになっています。jQueryがクラスを適切に呼び出しているとは思わないため、機能していません。jqueryプラグインのコードと、このプラグインで動作するはずのhtmlのセクションを含めました。質問がある場合は、遠慮なく質問してください。応答を待っています。使用を開始しました。 jQueryは今日、うまくいくときに楽しんでいますが、しばらくの間答えを探していて、なぜ私がこれを理解できないのか困惑しています。

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script>

  $(function(){
  $(' #d1').contenthover({
   overlay_width:300,
   overlay_height:150,
   effect:'slide',
   slide_direction:'bottom',
   overlay_x_position:'center',
   overlay_y_position:'bottom',
   overlay_background:'#000',
   overlay_opacity:0.8
   });
   });

  </script>

  <section id="s-explore">

   <div class="pagebreak"><span>The Lifestyle</span> <i class="down">&lt;</i></div>

    <div class="wrapper layout">

    <div class="col">
        <div class="media">
            <img id="d1" src="images/main.png" />
                <div class="contenthover">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames</p>
                    <p><a href="#" class="mybutton">Lorem ipsum</a></p>
                </div>
        </div>

        <div class="body">
            <h1>Vestibulum</h1>
            <h2>quis<br />Vestibulum</h2>
        </div>
    </div>

作業コード：

 <!DOCTYPE HTML>
 <html>
 <head>

 <link href="hover-content-style.css" rel="stylesheet" type="text/css" />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

  <script>

  $(function(){


   $('#d1').contenthover({
    overlay_width:300,
    overlay_height:150,
    effect:'slide',
    slide_direction:'bottom',
    overlay_x_position:'center',
    overlay_y_position:'bottom',
    overlay_background:'#000',
    overlay_opacity:0.8
    });

    });

    </script>

    <title>JQuery slide on top of image - animation</title>

    </head>

    <body>
      <img id="d1" src="images/vito_red.png" width="318" height="269" />
         <div class="contenthover">
           <h3>Lorem ipsum dolor</h3>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
           <p><a href="#" class="mybutton">Lorem ipsum</a></p>
          </div>

      <script src="hoverslide.js"></script>

      </body>
4

1 に答える 1

0

js次のファイルを含める必要があります： http ：//www.backslash.gr/demos/contenthover-jquery-plugin/jquery.contenthover.min.js

これが実際の例です。http://jsfiddle.net/btevfik/MbLNN/

于 2013-03-25T05:00:01.883 に答える