使用jquery在文本上添加图像
我正在尝试在我拥有的一些文本上添加一个图像。这类似于RetailMeNot.com的显示优惠券代码。当用户点击该图像时，该图像被移除，并在同时将用户链接到外部url的同时显示其下的文本。
基本层可以如下所示：
<div class="base">
<h3>Some text</h3>
</div>当文本被点击时，我想加载一个带有以下内容的图片：
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>具有" base“类的基本层的高度是可变的，因此必须调整图像的大小以适应它。我有一个工作的例子，我放置图像，然后调整它的大小，但当javascript可能不被启用时，这会产生问题，因为图像无法调整大小并且看起来很混乱。如果javascript被禁用，我希望脚本回退到只显示底层文本。
如何使用jquery或javascript在页面加载时添加此类覆盖图并自动调整其大小？
回答 3
Stack Overflow用户
发布于 2014-10-30 04:35:22
让您的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();
});
});这将解决您的问题。
Stack Overflow用户
发布于 2014-10-30 05:00:13
你可以这样做：
$(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
Stack Overflow用户
发布于 2014-10-30 05:04:54
如果可以将覆盖放在基础中，则如下所示：
<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();https://stackoverflow.com/questions/26639709
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号