Question

我试图在我拥有的某些文字上添加图片。这类似于retailmenot.com的透露优惠券代码。当用户点击图片时，图片会被删除并显示下面的文字，同时将用户链接到外部网址。

基础层可以如下：

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

我想在点击文字时加载带有以下内容的图片：

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

基础层的高度为＆＃34; base＆＃34;是可变的，因此必须调整图像大小以适应它。我有一个工作示例，我放置图像，然后调整大小，但这可能会导致问题，因为图像无法调整大小，看起来很乱。如果javascript被禁用，我希望脚本回退到只显示基础文本。

如何使用jquery或javascript在页面加载时添加并自动调整此类叠加层的大小？

Answer 1

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

这将解决您的问题。

Answer 2

你可以这样做：

$(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

Answer 3

如果你可以在底座上有叠加层，那么：

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

你可以这样做，不需要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();

使用jquery在文本上添加图像

3 个答案: