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

【问题标题】：make images re-size from right to left使图像从右到左重新调整大小
【发布时间】：2014-10-01 07:04:05
【问题描述】：

我做了一个小图片库悬停图像时它会放大我希望右侧的图像从右向左放大朝向主图像，我尝试了“位置：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>

【问题讨论】：

悬停时的基本 css 动画。检查这篇文章。 [在悬停时使用 css 创建缩放效果][1] [1]：stackoverflow.com/questions/15757036/…

标签： jquery css animation jquery-animate

【解决方案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

【讨论】：