单击图像上的自定义文本位置
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单击图像上的自定义文本位置相关的知识,希望对你有一定的参考价值。
有没有人知道如何点击图像上的文字定位,
我在下面附上了我希望如何显示的图片,
function showSpoiler(obj) {
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
body,
input {
font-family: "Trebuchet ms", arial;
font-size: 0.9em;
color: #333;
position: absolute;
top: 1em;
}
.spoiler {}
.spoiler .inner {}
<div class="spoiler">
<img onclick="showSpoiler(this);" src="http://konpakuto.com/logo.jpg />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
答案
- 您可以将.inner类div放在图像上方作为初学者。
- 在.inner类上使用绝对定位,因此当显示.inner并将其与中心对齐时,图像不会向下移动。
- 从顶部移动一些边距的图像,为文本留出一些空间。
- 要在解锁和锁定之间切换,您可以使用标记/计数变量,该变量在每次单击时更改值。
.
.spoiler {
background: black;
width: 100%;
position:relative;
}
.spoiler img {
margin-top: 60px;
background: black;
width: 100%;
}
.spoiler .inner {
font-size:20pt;
position:absolute;
color:white;
top:5px;
width:100%;
text-align:center;
}
var count=0;
function showSpoiler(obj) {
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (count==0){
inner.textContent = "UNLOCK";
setTimeout(function(){inner.textContent = "";},2000);
count=1;
}
else{
inner.textContent = "LOCK";
setTimeout(function(){inner.textContent = "";},2000);
count=0;
}
}
body,
input {
font-family: "Trebuchet ms", arial;
font-size: 0.9em;
color: #333;
position: absolute;
top: 1em;
}
.spoiler {
background: black;
width: 100%;
position:relative;
}
.spoiler img {
margin-top: 60px;
background: black;
width: 100%;
}
.spoiler .inner {
font-size:20pt;
position:absolute;
color:white;
top:5px;
width:100%;
text-align:center;
}
<div class="spoiler">
<div class="inner">
LOCK
</div>
<img onclick="showSpoiler(this);" src="http://konpakuto.com/logo.jpg" />
</div>
以上是关于单击图像上的自定义文本位置的主要内容,如果未能解决你的问题,请参考以下文章
在我的自定义列表项中单击书签图像的侦听器,多次更改另一个 row_item 图像