我做了一个小图片库 悬停图像时它会放大 我希望右侧的图像从右向左放大 对于主图像，我尝试了“position: 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>
最佳答案
如果悬停在右侧面板的 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()
});
});
});
检查 fiddle here
关于jquery - 使图像从右到左重新调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25192674/