0

基本的に、私はこの種の機能を望んでいますが、それほど複雑ではありません: http://www.blueacorn.com/team/

私は、LinkedIn アカウントのみにリンクするさまざまな li を含む写真の ul を持っています (例のように Twitter ではありません)。これらの写真の 1 つにカーソルを合わせると、jQuery アニメーションがその上に画像を表示し、それをクリックして LinkedIn に移動できるようにしたいと考えています。(最終的には、これらはすべて異なる人の写真になります。)

ここに私の JFiddle があります: http://jsfiddle.net/h5y64/

可能であれば、ボックスごとに id を作成したくありません。ボックスは 40 個以上 (そして増加中) になるためです。

私の主な問題は次のとおりです。

1) カーソルを合わせた画像の上で divHover を適切にアニメーション化することができません (あちこちに行きます!)

2) divHover を別の Web ページにリンクすることができません。

これを動的に行う方法があると確信していますが、わかりません。

ところで、この質問は似ていますが、ブロックごとに id を作成することに依存しています: How to position a hover div based on the position of the element

これの良い例を実際に見つけることができませんでした（理解できました）。しかし、問題を説明するのは難しいので、見逃したのかもしれません。

私はまだjQueryを初めて使用するので、可能であれば回答を控えてください。:)

前もって感謝します！

4

3 に答える 3

1

私はそれを行う方法の簡単な例を作りました。blueacorn と同じように、事前に各 li にオーバーレイを追加したので、複数の li を表示できます。(1 つがまだ滑り落ちている場合は、他の人が同時に滑り上がる可能性があります)。

また、許可されていないaaroundなど、HTML にいくつかの問題がありました。li

これが私の例です：

デモ：

http://jsfiddle.net/bYcmc/

HTML:

<ul>
    <li>
        <div>
            <img src="http://w3schools.com/css/klematis.jpg" />
            <a href=""></a>
        </div>
        <h6>Name 1</h6>
    </li>
    .
    .
    .
</ul>

JS:

$('li').hover(function() {
    $(this).find('a').stop().animate({
        'top': '0%'
    }, 300);
}, function() {
    $(this).find('a').stop().animate({
        'top': '100%'
    }, 300);
})​
于 2012-10-02T21:32:00.067 に答える
0

以下のコードは、要件に従って完全に機能します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Scroll - Up - Down</title>
    <!-- SCRIPTS -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        $(".scroll-up-down li").mouseover(function(){
            $(this).find("span.hover-link").show();
        });

        $(".scroll-up-down li").mouseout(function(){
            $(this).find("span.hover-link").hide();
        });


    });
    </script>
    <!-- SCRIPTS -->

    <!-- STYLES -->
    <style type="text/css">

        body                        { background:#CCC; font-family:Arial, Helvetica, sans-serif; }
        h1                          { font-size:16px; text-align:center; }
        .scroll-up-down             { border:1px dashed #bbb;  margin:0 auto; padding:0; text-align:center; width:400px; }
        .scroll-up-down li          { display:inline-block; list-style:none; margin:10px; position:relative; text-align:center; width:100px; z-index:999; }
        .scroll-up-down li span.hover-link              { background:url(hover-div.png) no-repeat;
                                                          border:5px solid #000;
                                                          color:#FFF;
                                                          font-size:12px;
                                                          font-weight:bolder;
                                                          display:none;
                                                          height:60px; 
                                                          left:0;
                                                          list-style:none;
                                                          padding-top:40px; 
                                                          position:absolute; 
                                                          filter: alpha(opacity=50);
                                                          opacity: 0.5;
                                                          text-align:center;
                                                          top:0; 
                                                          vertical-align:bottom;
                                                          width:100px; 
                                                          z-index:1000; 

                                    }
        .scroll-up-down li span.hover-link a.linkedin-icon { background:url(linked-icon.png) no-repeat 0 -50px;  display:inline-block; height:40px; width:40px; }
        .scroll-up-down li span.hover-link a.linkedin-icon:hover { background-position:0 0;   display:inline-block; height:40px; width:40px; }
        .scroll-up-down li a span   { font-size:12px; }
        .scroll-up-down li a        { display:inline-block; text-decoration:none; }
        .scroll-up-down li a img    { border:5px solid #000; height:100px;  width:100px; }

    </style>
    <!-- / STYLES -->
</head>

<body>
    <h1> User Profiles Grid</h1>
    <ul class="scroll-up-down">

        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. ABC</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>

        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. PQR</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>

        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. XYZ</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>


        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. LMN</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>

        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. DEF</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>

        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. JKL</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>


        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. RST</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>

        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. QWE</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>

        <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. YUI</span></a>
        <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span>
        </li>


    </ul>
</body>
</html>
于 2012-10-03T11:25:08.720 に答える
0

この JSFiddleでアプローチします。注意すべき重要な部分は、サムネイルの相対的な配置と divHovers の絶対的な配置です。また、サムネイルごとに 1 つずつ、複数のホバー要素が作成されていることにも注目してください。

編集:<li>また、要素を の内部に直接ネスト<ul>し、そこからアンカー タグをネストすることで、適切な HTML を作成しました。

于 2012-10-02T21:41:53.307 に答える