Jquery圖像疊加？

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/

來源

2011-05-24 18:01:19

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; }

這是非常簡單的解決方案，併爲大家接受的。

來源

2011-05-24 17:57:35

+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設置正確的定位樣式。

來源

2011-05-24 18:00:40 Jibou

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> 
         &#39;Ships&#39; 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

來源

2013-01-05 06:31:34

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(); 
});

來源

2013-01-14 02:22:54 flipthekid

Jquery圖像疊加？

回答

相關問題