Question

当我点击页面底部的链接时，有人可以帮助我显示div的显示方式吗？

正如您在上图中看到的那样，页面底部有链接。虽然当我点击底部的链接时，div（视频div）显示在页面顶部。但我希望div应该显示在我点击div的地方。

以下是我的html部分：

<body>
<div id="ActualContentBox">
        <h2 align="center"> Selenium WebDriver Videos</h2>
        <h4 align="center"><i>Click on any link below to watch the Video</i></h4><br/>
        <ul>
            <h3>
                <li>How to Install Eclipse and configure Selenium WebDriver</li>
            </h3>
            <ul>
                <li><a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U8')">How to Install Eclipse and configure Selenium WebDriver</a></li>
            </ul>
  </ul>
</div>
<div id="videoDiv" style="display:none;">
            <div id="titleHeaderDiv">
                <a href="#" ><img id="closeDiv" src="images/close-1.png" alt="Click to close" onclick="closeDivFunc()"></a>
            </div>
            <iframe id="video1" allowfullscreen="" webkitallowfullscreen=""></iframe>
        </div>
</body>

以下是我的css：

div#ActualContentBox
{
    border: 5px groove #BEB5B2;
    margin: 0 auto;
    width:80%;
    height:auto;
}

div#overlayDiv
{
    position: fixed;
    overflow: auto;
    background:red;
    background-image: url("../images/transparent.jpg");
    height: 500px;
    width: 80%;
    left: 135px;
    top: 175px;
    margin: 0 auto;

}

div#videoDiv
{
    position:absolute;
    left: 400px;
    top: 300px;
    border: 5px groove #BEB5B2;
    height:360px;
    overflow: auto;
}

div#titleHeaderDiv
{
    position: absolute;
    top:0px;
    background-color:#F1F1F1;
    height:50px;
    width:500px;
}

img#closeDiv
{
    width:100%;
    position: absolute;
    overflow: auto;
    height: 30px;
    width: 30px;
    right: 10px;
    top: 10px;
}

iframe#video1
{
    position: relative;
    /*bottom: 0;
    right: 0;
    border: 3px solid #73AD21;*/

    top:50px;
    width:500px;
    height:300px;
}

Answer 1

您想在每个列表项中创建一个视频div，并默认隐藏它。点击链接后，再显示视频。

如果您只想要一个视频实例，那么您可以获取光标的pageX和pageY并在该位置显示视频。

<强> HTML

<li class="video-container">
    <a href=""></a>
    <div class="video"></div>
</li>

<强> CSS

.video-container {
    position: relative;
}

.video {
    position: absolute;
    bottom: 0; right: 0;
    display: hidden;
}

<强> JS

$('.video-container > a').click(function(e) {
    $(this).next().css('display', 'block');
});

这应该让你开始。

滚动到页面底部时如何滚动div元素

1 个答案: