0

シャドーボックスにカーソルを合わせて開くことができるようにしたいので、しばらく検索しましたが、その方法の概念をまだ完全には理解していません。ここに私のHTMLがあります：

<table id="tapaintings">
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting1.jpg" rel="shadowbox[paintings]" title="painting1"> <img src="images/thumbnails/t_painting1.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting2.jpg" rel="shadowbox[paintings]" title="painting2"> <img src="images/thumbnails/t_painting2.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting3.jpg" rel="shadowbox[paintings]" title="painting3"> <img src="images/thumbnails/t_painting3.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting4.jpg" rel="shadowbox[paintings]" title="painting4"> <img src="images/thumbnails/t_painting4.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting5.jpg" rel="shadowbox[paintings]" title="painting5"> <img src="images/thumbnails/t_painting5.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting6.jpg" rel="shadowbox[paintings]" title="painting6"> <img src="images/thumbnails/t_painting6.jpg" alt="painting"></a></td>
            </tr>
        </table>

これまでの私のjquery：

$(document).ready(function() {
    $("img").mouseenter(function() {
        $(this).attr("src", "images/painting1.jpg");
    });
});

現時点では、最初の画像を拡大しようとしていますが、サムネイルにカーソルを合わせてシャドーボックスを開くことができるようにしたいと考えています。同様に、mouseleave を使用してシャドーボックスを閉じることができるように、写真を連続的に循環できるようにしたいと考えています。私はjQueryの初心者なので、この概念を理解できなかったので、助けていただければ幸いです。

4

2 に答える 2

0

こんな感じですか？

$(function(){
    $('#tapaintings a').mouseenter(function(){
        var id = $(this).attr('id');
        $('a#' + id + ' img').animate({
            'height' : '80px',
            'width'  : '80px'
        });
    });
.........

このフィドルを参照してください

于 2013-07-23T02:43:28.577 に答える
0

jQuery オブジェクト宣言の前に $ がないと思います。また、ファイルに拡張子 (.jsp; .png; など) があることを確認してください。これを試してください (まだ確認していません):

$(document).ready(function(){
    $("img").mouseenter(function() {
        $(this).attr("src", images/painting1.jsp);
    });
});
于 2013-07-23T01:54:48.933 に答える