使用jquery在文本上添加圖像

我試圖在一些文本上添加圖像。這與retailmenot.com的揭示優惠券代碼類似。當用戶點擊圖片時，圖片被移除並顯示下面的文本，同時將用戶鏈接到外部網址。使用jquery在文本上添加圖像

基底層可以是如下：

<div class="base"> 
    <h3>Some text</h3> 
</div>

我想加載超過它下面的圖像被點擊文本時：

<div class="overlay"> 
    <img src="http://example.com/image.jpg"/> 
</div>

基底層的與高度類「基」是可變的，所以圖像必須調整大小以適應它。我有一個工作的例子，我放置圖像，然後調整它的大小，但這會產生問題，當JavaScript可能無法啓用，因爲圖像無法調整大小，看起來凌亂。如果javascript被禁用，我希望腳本回退到只顯示底層文本。

如何使用jquery或javascript在頁面加載時添加並自動調整此類疊加層的大小？

來源

2014-10-29 user2694306

你想要的類名稱是將圖像或者什麼後的不同？ – cuSK 2014-10-29 20:16:30

您是否嘗試過檢查html是如何在您想要模仿的網站中構建的？使用主要css – charlietfl 2014-10-29 20:16:36

概念並不困難我想要相同的css名稱 – user2694306 2014-10-29 20:17:19

讓你html頁有這樣下面的代碼

<div class="base"> 
</div>

不要放置任何代碼關於HTML頁面圖像。然後在你的jQuery代碼中。

var img = '<img src="http://example.com/image.jpg"/>'; 
var txt = 'Some text'; 
$(document).ready(function(){ 
    $(this).find('.base').html(txt).show(); 
    $(this).find('.base').click(function(){ 
     if($(this).html() == img) 
      $(this).html(txt).show(); 
     else 
      $(this).html(img).show(); 
    }); 
});

這將解決您的問題。

來源

2014-10-29 20:35:21 cuSK

這將取代html或者只是暫時添加「內容」。當用戶點擊圖片時，它將被刪除，所以我只想確保在這種情況下這是可行的。 – user2694306 2014-10-29 20:47:45

@ user2694306你沒有提到你的問題中的點擊操作。好的。當用戶點擊「base」類的內容時，是否要將文本內容更改爲圖像，反之亦然？ – cuSK 2014-10-29 20:52:52

確切地說，它應該自動切換到圖像，然後關閉，但從未退出一次 – user2694306 2014-10-29 21:04:53

你可以這樣說：

$(document).ready(function() { 
    //Set overlay position and dimension to same as base 
    $base = $(".base"); 
    $overlay = $(".overlay"); 
    $overlay.offset($base.offset()); 
    $overlay.height($base.outerHeight()); 
    $overlay.width($base.outerWidth()); 

    $overlay.show(); 

    //Hide overlay on click (show hidden text) 
    $(".overlay").click(function() { 
     $(this).fadeOut(); 
    }); 
});

，並與CSS：

.overlay{ 
/* Hide overlay if no js */ 
    position: absolute; 
    display: none;  
}

看看這裏：JSFiddle

來源

2014-10-29 21:00:12

如果你可以在底座上的疊加，如例如：

<div class="base"> 
    <h3>Some text</h3> 
    <div class="overlay"> 
     <img src="http://example.com/image.jpg"/> 
    </div> 
</div>

您可以CSS這一點，沒有必要的javascript：

.base{ 
    position: relateive; 
} 
.overlay{ 
    position: absolute; /* or fixed if scrollbars involved */ 
    display: none; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
/* or replace right and bottom with: */ 
/* width: 100%; 
    height: 100%; */ 
}

現在，您可以使用JavaScript來切換可見：

$('.overlay').fadeIn();

來源

2014-10-29 21:04:54 Martijn

使用jquery在文本上添加圖像

回答

相關問題