Javascript Jquery图像叠加？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6114640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery image overlay?
提问by Skizit
I'm looking to overlay an image in the right hand corner on another image using jquery.
我希望使用 jquery 在另一个图像的右上角叠加一个图像。
Basically I want the 2nd image to appear over the other image in the right hand corner when the user's mouse hovers above the image and then vanish when they stop hovering over it. How would I achieve this with Jquery?
基本上，当用户的鼠标悬停在图像上方时，我希望第二张图像出现在右手角的另一张图像上，然后当他们停止悬停在图像上方时消失。我将如何使用 Jquery 实现这一目标？
回答by Thomas Shields
@Senad is quite right, you don't need jQuery for that. However, if you have a more complicated situation and are looking for similar functionality, try:
@Senad 是对的，您不需要 jQuery。但是，如果您有更复杂的情况并且正在寻找类似的功能，请尝试：
Wrap them in a containing element. Set the containing element to position:relativeSet the overlay image to position:absolute; top:0; left:0;and style the height and width as you like...then use jQuery to handle the hover event...
HTML:
将它们包裹在一个包含元素中。将包含元素position:relative设置为将覆盖图像设置为position:absolute; top:0; left:0;并根据需要设置高度和宽度的样式...然后使用 jQuery 处理悬停事件... HTML：
<div>
<img id="main" src="myimg" />
<img id="overlay" src="myimg"
/></div>
CSS:
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;
}
Code:
代码：
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
See a working example here: http://jsfiddle.net/jsney/10/
在此处查看一个工作示例：http: //jsfiddle.net/jsney/10/
回答by Senad Me?kin
You don't need jQuery for that, you can use CSS for that, for example
你不需要 jQuery，你可以使用 CSS，例如
<a href="#" class="my-overlay">My Overlay</a>
CSS
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; }
This is much easier solution and acceptable for everyone.
这是一个更简单的解决方案，每个人都可以接受。
回答by Jibou
Let's assume your first image is wrapped inside a div.
让我们假设您的第一个图像被包裹在一个 div 中。
1/ Add another div with a "display:none" style and a class of your choice 2/ On hover load the img (if it hasn't been done before) on the div 3/ slideToggle the div that contain the second image and voila !
1/ 添加另一个具有“display:none”样式和您选择的类的 div 2/ 在 div 3/slideToggle 包含第二个图像的 div 上悬停加载 img（如果之前未完成）和瞧！
$('div .firstImage').hover(function(){
$('.secondImage').slideToggle();
});
Of course, you need to set the proper positioning style to the div containing the second image.
当然，您需要为包含第二个图像的 div 设置适当的定位样式。
回答by flipthekid
Here's a simple way I did it following thomas's code above. In my case I wanted to put an overlay (basically a greyed out box with a big plus sign) on an image that shows it's clickable and will enlarge the thumbnail in a lightbox. I need to do that alot so am using classes not ID's.
这是我按照上面的 thomas 代码执行的一种简单方法。在我的例子中，我想在一个图像上放置一个覆盖（基本上是一个带有大加号的灰色框），显示它是可点击的，并将放大灯箱中的缩略图。我需要这样做很多，所以我使用的是类而不是 ID。
My image and overlay image are the same dimensions. .hide just hides the overlay until the hover function show's it.
我的图像和叠加图像的尺寸相同。.hide 只是隐藏覆盖，直到悬停功能显示它。
I'm not showing the lightbox stuff so it's clearer for this issue.
我没有展示灯箱的东西，所以这个问题更清楚。
Notice that a.hoverTrigger wraps the .overlay img as well. If you don't do that you will get the dreaded flickering effect.
请注意， a.hoverTrigger 也包装了 .overlay img。如果你不这样做，你会得到可怕的闪烁效果。
markup:
标记：
<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:
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();
});
回答by Jayesh Sorathia
We also can achieve this using "jquery.ImageOverlay.js" plugin.
我们也可以使用“jquery.ImageOverlay.js”插件来实现这一点。
here is example for this.
这是一个例子。
ASPX Code :
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 :
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;
}
Downloads :Visit this link to download .js files and images files and live example of implementation in many ways.
下载：访问此链接以下载 .js 文件和图像文件以及以多种方式实现的实时示例。
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html
