对使用相同javascript的图片库产生影响 [英] an effect onto gallery of images using same javascript
问题描述
我有以下代码使用我在JavaScript上使用图像实现效果。
的效果就像用户在主图像上悬停时一样，然后over1和over2就是两个图像叠加在一起，从而提供体面的信息。
i have the following code using which i implement effects on an image using javascript. the effect is like when an user hovers on the main image then the over1 and over2 are the two images which gets overlayed on it providing decent information.
我的问题是 - 我得到的代码仅用于单个图像。
当我在图像库上实现它时，即使我只悬停在一张图像上，仍然所有图像都会覆盖其信息。
now my problem is-- the code i got is for only single images. when i am implementing it on gallery of images then even i hover on only one image still all images get overlayed with their information.
我需要帮助如果我徘徊在其他图像不应该显示他们的信息只有一个应该是积极的。
i need help regarding that if i hover on then other images shouldn't be displaying their info only one should be active.
我也需要知道我应该如何将我的图像存储在文件夹中。到目前为止，我已决定为主图像制作一个，其他用于覆盖图像。
i also need to know how should i store my images in folders. so far i had decided to make one for main images and other for overlaying images.
我的代码是
my code is
<html>
<head>
<link href="css/overlaycss.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".main").mouseenter(function() {
$(".overlay").show();
});
$(".main").mouseleave(function() {
$(".overlay").hide();
});
$(".main").mouseenter(function() {
$(".overly").show();
});
$(".main").mouseleave(function() {
$(".overly").hide();
});
});
</script>
</head>
<body style="margin:0px; padding-top:0px">
<ul>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
</ul>
</body>
</html>
css是 -
li{
position:relative;
float:left;
padding-left:5px;
}
.main {
width:200px;
height:200px;
}
.overlay
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;
}
.overly
{
position:absolute;
height:50px;
width:150px;
bottom:0;
right:0;
display:none;
}
推荐答案
图像试试这个：
For displaying hover images on individual images try this:-
$(document).ready(function() {
$("ul li").mouseenter(function() {
$(this).find(".overlay").show();
$(this).find(".overly").show();
});
$("ul li").mouseleave(function() {
$(this).find(".overlay").hide();
$(this).find(".overly").hide();
});
});
这篇关于对使用相同javascript的图片库产生影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
