Question

我正在制作一个HTML游戏（没有画布），玩家可以点击图片链接来做功能。然后技能继续冷却一段时间。为了直观地显示这个冷却时间，我动态创建一个半透明的div标签，其大小与文本居中的能力图像大小相同，显示冷却时间内剩余的秒数。然后，我获得点击的能力图像链接的位置，并将此div放在相同的位置减去文档scrollTop（）（因为我在某处读取，但这与当前或没有它没有区别）。问题是div没有垂直排列。左上角大约是实际图像链接的1/2，我不知道为什么。有什么想法吗？

// the ability image link click event
$(".action").click(function (e) {
    // get the position of the clicked ability image link
    var position = $(this).offset();

    // when I dynamically create the div element here is the css I use
    .css({ "position":"absolute", "top":(position.top - $(document).scrollTop()), "left":position.left, "width":"66px", "height":"66px", "line-height":"66px", "background-color":"rgba(125, 125, 125, 0.75)", "text-align":"center", "vertical-align":"middle", "font-size":"30px", "color":"red" })
}

我没有显示div标签的整个append（），因为它会让事情变得混乱。 .css（）部分是div的定义方式，我使用点击图像链接的顶部位置作为div的顶部位置，但它最终比实际图像链接低1/2。

以下是html的“相关”部分。以下是主体。

<div class="container-fluid">
        <!--Actions-->
        <div id="divActionRow" class="row" style="margin-top: 0px;">
            <div id="divPlayerActions" class="col-md-6 text-center">
                <a href="#" class="action" data-cd="5000" data-cast="1000" data-oncooldown="false" id="Cripple"> <img src="/Content/cripple.png"> </a>
                <a href="#" class="action" data-cd="8000" data-cast="2000" data-oncooldown="false" id="GroundSlam"> <img src="/Content/ground_slam.png"> </a>
            </div>
        </div>
    </div>

    <!--This is where we dynamically hold the cd divs-->
    <div id="divCDHolders">
       <!--When a cd is active this is what it looks like-->
        <div id="Cripple_cd_value" style="position: absolute; top: 448px; left: 181.5px; width: 66px; height: 66px; line-height: 66px; text-align: center; vertical-align: middle; font-size: 30px; color: red; background-color: rgba(125, 125, 125, 0.74902);">2</div>
    </div>

Answer 1

这可能会有所帮助，我不知道你为什么要处理偏移位置来制作叠加层，因为你可以将叠加层放在元素内部并使用absolute相对于点击的父级。检查此代码段：

function overl () {
  var overlay = '<div class="overlay">10</div>';
  $(this).append(overlay);
  var ov = $(this).find('.overlay');
  ov.fadeIn('fast');
  timer(ov);
  $(this).off('click',overl);
}
function timer($el) {
  var sec = $el.text();
  var timer = setInterval(function() { 
   $el.text(--sec);
   if (sec == 0) {
      $el.fadeOut('1000',function(){
        $el.remove();
      });
     $el.parent().on('click',overl);
     clearInterval(timer);
   } 
  }, 1000);
}
$(".action").on('click',overl);

.action {
  display:inline-block;
  width: 70px;
  height: 70px;
  font-size: 45px;
  line-height: 70px;
  background: red;
  color: white;
  text-align: center;
  border-radius: 10px;
  position: relative;
  font-family: 'verdana';
  cursor: pointer;
  transition: all .3s linear;
  overflow:hidden;
  margin:10px;
}
.overlay {
  display:none;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.6);
  position:absolute;
  top:0;
  left:0;
  z-index:10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="action">A</div>
<div class="action">B</div>
<div class="action">C</div>

css在另一个元素之上的绝对位置

1 个答案: