Question

我制作了一个小型图片库，当它悬停在一个放大的图像上时，当它悬停在一个图像上时它恢复到正常大小，不幸的是我的徘徊功能不能正常工作而且我没有一个想法如何解决它，下面是代码，here是如何工作的（带有错误）。

        #main{
        width: 1000px;
        height: 720px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-style: solid;
        border-radius: 7px;
        border-color:silver


    }

    #title{
        position:relative;
        width:679px;
        font-size: 26px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        left:-4px;
        top:121px;
        border: solid;
        background-color:silver;
        text-align:center;
        z-index:-100;


    }
    #MainImage{
        background-image: url('zlf246.jpg');
        position:relative;
        width: 680px;
        height: 560px;
        margin-left: 155px;
        background-repeat: no-repeat;
        z-index:-200;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-style: solid;
        border-radius: 7px;
        border-color:silver

    }

        #PicGallaryR {
        width: 150px;
        height: 560px;
        float: right;
        direction: rtl;

    }

        #PicGallaryL {
        width: 150px;
        height: 560px;
        float: left;

    }

        #PicGallaryB {
        width: 993px;
        height: 145px;

    }
        a, .imgArt {
        width:150px;
        height:140px;

    }

    </style>
        <script>

    $(function () {
    $(".imgArt").bind("mouseenter", function () {

        var n = $(this).clone();
        var of = $(this).offset();
        var isRight = $(this).closest("div").attr("id") == "PicGallaryR";
        var options = {
            position: 'absolute',
            top: of.top,
            margin: 0
        };
        if (isRight) options["right"] = 918;
        else options["left"] = of.left;
        n.css(options)
            .appendTo($("#main"))
            .animate({
            width: 300,
            height: 280
        });

var originalWidth = $(this).css('width');
var originalHeight = $(this).css('height');

n.bind("mouseleave", function () {
    $(this).animate({
        width: originalWidth,
        height: originalHeight
    }, 300, "linear");
});
    });

    }); 
        </script>
    </head>


    <body>  

        <div id="main">
            <div id="PicGallaryL">
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
            </div>
        <div id="PicGallaryR">
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>

        </div>
        <div id="MainImage">
            <div id="title">Sterling silver ethnic filigree ring, Yemenite Art</div>

        </div>
        <div id="PicGallaryB">
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>


        </div>


    </div>
    </body>

    </html>

使图像在没有错误的情况下轻松播出

0 个答案: