0

横の画像は拡大して通常に戻りますが、縦の画像は拡大してから縦ではなく横に戻します。私はこのフィドルを持っています。よくわかりませんが、問題は jQuery にあると思います。私はjQueryを初めて使用しますが、各画像はフォーム送信ボタンでもあるため、これが必要なものを達成する唯一の方法のようです。これは www.starcuts10.com/poems で見ることができます

CSS:

#container {
    display: block;
    width: 100%;
    position: relative;
}

.img {
    position: relative;
    z-index: 0;
}

.end {
    margin-right: 0;
}

.clear {
    clear: both;
}

.img a img {
    position: relative;
    border: 0 solid #fff;
 }

.form_align {
    display: inline;
    float: left:
}

jQuery:

$(document).ready(function() {
    var cont_left = $("#container").position().right;

    if ($('span').hasClass('horz')) {
        $("input").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
                height: "405",
                width: "638",
                right: "+=50",
                bottom: "+=150"
            }, "fast");
        }, 
        function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "250",
                width: "425",
                right: "-=50",
                bottom: "-=150"
            }, "fast");
        });


        $(".img").each(function(index) {
            var right = (index * 160) + cont_left;
            $(this).css("right", right + "px");
        });
    } 
    else {
        $("input").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
                height: "638",
                width: "405",
                right: "+=50",
                bottom: "+=150"
            }, "fast");
        }, 
        function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "425",
                width: "250",
                right: "-=50",
                bottom: "-=150"
            }, "fast");
        });

        $(".img").each(function(index) {
            var right = (index * 160) + cont_left;
            $(this).css("right", right + "px");
        });
    }
});

HTML:

<div id="container">
    <table>
        <tr>
            <span class="horz">
                <span class="vert">    
                    <td>
                        <form class="form_align" method ="post" action="#">
                            <a href=""><input type="image" src="http://starcuts10.com/images/blue_box.png" class="img"></a>
                            <input type="hidden" name="img" value="http://starcuts10.com/images/blue_box.png"> 
                            <input type="hidden" name="poem" value="">
                        </form>
                    </td>
                </span>
                <span class="vert">    
                <td>
                    <form class="form_align" method ="post" action="#">
                        <a href=""><input type="image" src="http://starcuts10.com/images/red_box.png" class="img"></a>
                        <input type="hidden" name="img" value="http://starcuts10.com/images/red_box.png"> 
                        <input type="hidden" name="poem" value="">
                    </form>
                </td>
            </span>  
        </tr>
    </table><br><br><br>
</div>
4

1 に答える 1

0

jqueryロジックに問題があります。

あなたは必要ありませんif ("span.horz") { .. } else { .. }

あなたがする必要があるのは、：$(".horz input")との両方にホバー効果を与えること$(".vert input")です。

また、htmlが間違っています。スパンはTD内にある必要があります

これは実用的なフィドルです：http：//jsfiddle.net/RwJhn/1/

于 2012-10-29T13:57:57.433 に答える