单击图像上的自定义文本位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单击图像上的自定义文本位置相关的知识,希望对你有一定的参考价值。

有没有人知道如何点击图像上的文字定位,

我在下面附上了我希望如何显示的图片,

enter image description here

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 图像

将相机图像保存在手机记忆库中的自定义位置

找到我的自定义代码片段 Xcode 6?

Summernote - 多个编辑器实例上的自定义按钮

如何在 CHeaderCtrl 上的 EditFilter 时设置编辑控件的位置

Swift - 如何从单元格内单击 UIImageView 上的自定义 UITableViewCell 获取行数据