7
我正在寻找使用jquery在另一个图像的右上角覆盖图像。Jquery图像叠加？
基本上我希望当用户的鼠标悬停在图像上方时，第二个图像出现在右手边的其他图像上，然后当它们停在它的上方时消失。我如何用Jquery实现这一点？
A
回答
11
@Senad是非常正确的，你不需要jQuery。但是，如果您遇到更复杂的情况并且正在寻找类似的功能，请尝试：
将它们包装在包含元素中。只要你喜欢，含元素position:relative 设置覆盖图像设置为position:absolute; top:0; left:0;和风格的高度和宽度...然后使用jQuery来处理悬停事件... HTML：
<div>
<img id="main" src="myimg" />
<img id="overlay" src="myimg"
/></div>
CSS：
div {
position:relative;
}
#main {
width:256px;
div {
position:relative;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
}
代码：
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
在这里看到一个工作示例：http://jsfiddle.net/jsney/10/
4
你不需要的jQuery的，你可以使用CSS，例如
<a href="#" class="my-overlay">My Overlay</a>
CSS
a.my-overlay {
background: url('/images/first-image.jpg') no-repeat;
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }
这是非常简单的解决方案，并为大家接受的。
+2
尽管我同意你最好在可能的情况下使用纯CSS，但这并不能回答OP的问题。也许他仍然想学习如何用jQuery来做到这一点。 – Sparky 2011-05-24 18:02:11
+0
'：hover'伪元素中的上层类是否有原因？ （真的是一个问题，而不是批评 - 虽然我* *（亲自）喜欢在html/css中使用小写。） – 2011-05-24 18:03:00
+0
我总是使用大写字母，在滚动时更容易在文件中找到它们... – 2011-05-24 18:04:16
1
让我们假设你的第一个图像被包裹在一个div中。
1 /添加另一个DIV用“显示：无”关于DIV 3 /的slideToggle div样式和一个类你选择 2 /的悬停负载IMG（如果还没有做过的事情）包含第二个图像和瞧！
$('div .firstImage').hover(function(){
$('.secondImage').slideToggle();
});
当然，您需要为包含第二个图像的div设置正确的定位样式。
0
我们也可以使用“jquery.ImageOverlay.js”插件来实现这一点。
这里就是这个例子。
ASPX代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" />
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.metadata.js"></script>
<script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script>
</head>
<body>
<form id="form1" runat="server">
<h1>
jQuery Image Overlay</h1>
<fieldset>
<legend><b>Without any options : </b></legend>
<ul id="firstGallery" class="image-overlay">
<li><a href="http://www.yahoo.com">
<img alt="Palm Tree" src="Images/palmtree.jpg" />
<div class="caption">
<h3>
Write a Title Here</h3>
<p>
Put a Caption Here</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Iguana" src="Images/iguana.jpg" />
<div class="caption">
<h3>
Another Title</h3>
<p>
click for more info</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Ceynote" src="Images/ceynote.jpg" />
<div class="caption">
<h3>
Just a Title Here</h3>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color,
overlay_speed, overlay_speed_out) : </b></legend>
<ul id="secondGallery" class="image-overlay">
<li><a href="http://www.mozilla.com/">
<img alt="firefox" src="Images/firefox-512-200x200.png" />
<div class="caption">
<h3>
Get Firefox</h3>
</div>
</a></li>
<li><a href="http://www.mozilla.com/">
<img alt="jungle" src="Images/jungle.jpg" />
<div class="caption">
<h3>
Tall Overlay</h3>
<p>
The overlay height is based upon the content it contains</p>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata">
metadata plugin</a> : </b></legend>
<ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }">
<li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/">
<img alt="bamboo" src="Images/bamboo.jpg" />
<div class="caption">
<h3>
Connect to a Lightbox</h3>
<p>
overlay origin is overridden, not animated</p>
</div>
</a></li>
<li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com">
<img alt="Ships" src="Images/josh-ships.jpg" />
<div class="caption">
<h3>
'Ships' by Josh Neal</h3>
<p>
different in/out speeds</p>
</div>
</a></li>
<li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }"
href="http://www.mozilla.com/">
<img alt="cypress" src="Images/cypress.jpg" />
<div class="caption">
<h3>
Digg This!</h3>
<p>
colors, overlay speed overridden, overlay always open</p>
</div>
</a></li>
</ul>
</fieldset>
<script type="text/javascript">
// JavaScript for the Image Overlay galleries.
$("#firstGallery").ImageOverlay();
$("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' });
$("#thirdGallery").ImageOverlay();
</script>
</form>
</body>
</html>
================================== ==========================================
CSS：
.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }
.image-overlay a
{
margin: 9px;
float: left;
background: #fff;
border: solid 2px;
overflow: hidden;
position: relative;
}
.image-overlay img
{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.image-overlay .caption
{
float: left;
position: absolute;
background-color: #000;
width: 100%;
cursor: pointer;
/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
longtime IE abuse of it, so opacity is not offically supported - use at your own risk.
To play it safe, disable overlay opacity in IE. */
/* For Firefox/Opera/Safari/Chrome */
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
margin: 10px 0 10px 2px;
font-size: 20px;
font-weight: bold;
padding: 0 0 0 5px;
}
.image-overlay p
{
text-indent: 0;
margin: 10px;
font-size: 1em;
}
下载： 可见它链接到下载.js文件和图像文件，并以多种方式实现实现的实例。
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html
1
这里有一个简单的方法，我做到了按照上述托马斯的代码。 在我的情况下，我想在图片上放置一个覆盖图（基本上是一个带有大加号的灰色框），以显示它是可点击的，并且会放大灯箱中的缩略图。 我需要做的很多，所以我使用的类不是ID的。
我的图像和叠加图像尺寸相同。 。隐藏只是隐藏覆盖，直到悬停功能显示它。
我没有显示灯箱，所以这个问题更清楚。
请注意，a.hoverTrigger也会覆盖.overlay img。 如果你不这样做，你会得到可怕的闪烁效果。
标记：
<div class="merchImg">
<a href="#" class="hoverTrigger"><img src="_img/_new-store/item.png" /></a>
<a href="#" class="hoverTrigger"><img class="overlay hide" src="_img/_new-store/overlay.png" /></a>
</div>
CSS：
.merchImg {
position: relative;
}
.merchImg .overlay {
position: absolute;
top:0;
left:0;
}
的jQuery：
$(".hoverTrigger").mouseenter(function() {
$(this).parent().find('a .overlay').show();
});
$(".hoverTrigger").mouseleave(function() {
$(this).parent().find('a .overlay').hide();
});
相关问题
- 1. 叠加图像
- 2. jQuery的图像悬停颜色叠加
- 3. JQuery图像叠加（并摆脱imagecopymerge）
- 4. Jquery Animate重叠加载图像
- 5. WPF图像叠加
- 6. CSS图像叠加
- 7. 圆圈图像叠加
- 8. iPhone MKMapKit图像叠加
- 9. 图标叠加像SVN
- 10. 图像的叠加字幕
- 11. 组合图像的叠加
- 12. HTML/CSS图像叠加
- 13. 叠加图像不显示
- 14. Slimbox - 在图像前叠加
- 15. iTextSharp的叠加图像
- 16. 加载时图像重叠
- 17. 图像叠加问题
- 18. 使图像叠加响应
- 19. 图像叠加帮助 - 它全部叠加在一个图像上！
- 20. FFMPEG无法循环叠加输入图像进行动态图像叠加
- 21. 将叠加层添加到图像
- 22. 叠印图像
- 23. jQuery UI的滑块：叠加范围图像
- 24. 为jQuery淡入淡出的文本叠加图像插件
- 25. jquery叠加与动画高度的图像
- 26. JQuery加载图像
- 27. 将包含图像叠加图像的图像分组到图像中心
- 28. 静态图像重叠jQuery图像幻灯片
- 29. 图像不能正确堆叠使用jQuery图像旋转器
- 30. 堆叠重叠的图像视图
使用什么标记？ – 2011-05-24 17:56:16