Question

我有一个由许多<div>组成的html块。我使用这些<div>来创建模态窗口，方法是在target（在CSS中完成）中改变它们的不透明度。这些<div>由id区分，并且都具有相同的类名。 <div>的边框为 10px 。鼠标悬停时，边框仅更改为 38px ，仅适用于右边框和左边框（在css中完成）。鼠标悬停时，我想显示后退和下一个箭头正好出现在左右边框的中间。不同的'div'有不同的高度。

我的方法：我使用event.target.id来获取调用该函数的id <div>。然后我使用getBoundingClientRect()在屏幕上获得该元素的矩形表示。我使用.top .bottom .left .right来获取每四个点的x和y坐标。从这些点我找到高度，然后将<div> s .left和.right设置为相等。我使用alert(）返回结果，有时会返回正确的值，有时根本没有值。返回结果是这两个中的任何一个。并且箭头不会被放置在它们想要的位置。我是Javascript的新手，我还在学习，所以如果你也解释你的答案我会很感激。 HTML代码如下：

<html>
<head>
    <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="midpointHeight.js"></script>
    <script type="text/javascript" src="modalDialogHover.js"></script>
</head>

<!--first modal-->  
<a href="#X">
    <image src="X.gif" id="X" class="Gif" />
</a>
<div id="h" class="modalDialog">
 <div id="miniModal_h" class="miniModal" onmouseover="getMidPointHeight(event)">
  <a href="#close" title="Close" class="close" id="close"><div class="close_btn"></div></a>
  <a href="#p" title="Next" class="next" id="next"><div class="next_btn"></div></a>                 
  <p>
     <!--some text here-->
  </p>                              
 </div>
</div>


<!--second modal-->     
<a href="#p">
<image src="p.gif" id="p" class="Gif" />
</a>
<div id="p" class="modalDialog">
    <div id="miniModal_p" class="miniModal" onmouseover="getMidPointHeight(event)">
        <a href="#close" title="Close" class="close"><div class="close_btn"></div></a>
        <a href="#h" title="Back" class="back" id="back"><div class="back_btn"></div></a>
        <a href="#c" title="Next" class="next" id="next"><div class="next_btn"></div></a>
        <p>
            <!--some text here-->
        </p>
    </div>
</div>
</html>

CSS中的

：

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999; 
    opacity: 0; 
}
.modalDialog > div {    
    width: 704px;
    position: relative;
    margin: 10% auto;
    background: white;
    border-image: url("grey_flat_tile.png");
    border-image-repeat: repeat;
    border-image-slice: 30%;
    border-width: 10px;
}
.modalDialog:target{
    opacity:1;      
}
.next_btn { 
    display: none;          
    background-image: url("arrow_right.png");
    position: absolute;
    right: -30px;
    width: 20px;
    height: 22px;
}
.back_btn{                      
    display: none;  
    background-image: url("arrow_left.png");
    position: absolute;
    left: -30px;
    width: 20px;
    height: 22px;
}
.visible {
    display: block;
}

在jQuery中隐藏/显示面板上的左右按钮：

jQuery(document).ready(function(){
    jQuery(".miniModal").hover(
        function(){
            jQuery(".close_btn").addClass("visible"),
            jQuery(".next_btn").addClass("visible"),
            jQuery(".back_btn").addClass("visible")
        },
        function(){
            jQuery(".close_btn").removeClass("visible"),
            jQuery(".next_btn").removeClass("visible"),
            jQuery(".back_btn").removeClass("visible")
        }
    )
});

在javascript中找到中点高度并在正确位置显示箭头：

function getMidPointHeight(event){

    var miniModal= event.target.id;
    //alert(miniModal);

    var smallRect = document.getElementById(event.target.id).getBoundingClientRect();

    var sX = smallRect.left;
    var sY = smallRect.top;
    var sW = smallRect.right;
    var sH = smallRect.bottom;

    //alert(sX + "," + sY + "," + sW + "," + sH);

    var sHeight = (sH - sY);

    var smidHeight = (sHeight / 2);
    var arrow_loc = (smidHeight)+"px";

    alert(arrow_loc);

    var next_btn = document.getElementById("next_btn");
    next_btn.style.top = arrow_loc;

    var back_btn = document.getElementById("back_btn"); 
    back_btn.style.top = arrow_loc; 
}

如何可靠地使用javascript找到HTML元素的位置

0 个答案: