Question

我制作了一个小图库当悬停图像时，它会放大我希望右侧的图像从右到左放大对于主图像，我尝试了“位置：rtl”，但它对我不起作用

这是代码：

<style>
#main{

    width:1000px;
    height:720px;
    border: solid;


}

#title{
    position:relative;
    width:680px;
    font-size: 26px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    left:-3px;
    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;
    border: solid;
    margin-left: 155px;
    background-repeat: no-repeat;
    z-index:-200
}

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

}

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

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

}
    a, .imgArt {
    border-top-style: solid;
    border-top-width: thin;
    width:150px;
    height:140px;

}

</style>
    <script>

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

    var n = $(this).clone();
    var of = $(this).offset();
    n.css({position:'absolute', top: of.top, left: of.left, margin: 0})
      .appendTo($("#main"))
      .animate({
        width:300,
        height:280
        });

    n.bind("mouseleave", function() {
      $(this).stop(true).remove()
    });
  });



}); 

    </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>

Answer 1

如果将鼠标悬停在右侧面板的img上，只需设置“正确”的CSS

的Javascript

$(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"] = -190;
    else options["left"] = of.left;
    n.css(options)
        .appendTo($("#main"))
        .animate({
        width: 300,
        height: 280
    });

    n.bind("mouseleave", function () {
        $(this).stop(true).remove()
    });
});

});

检查小提琴here

使图像从右到左重新调整大小

1 个答案: