Question

我实在很迷茫，不知道从哪里开始。所以基本上我想要实现的是当点击按钮时，文本和视频将显示出来。否则在点击时隐藏它。

HTML

<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
    <video preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>

<div class="shape1"></div>
    <p class="ability1txt">Text.</p>
<div class="button.abl">
    <button id="abl1.btn" class="ability1"></button>
</div>

CSS

abl1 video{
    height: 500px;
    width: 600px;
    z-index: 1;
    position: absolute;
    margin-top: 50px;
    margin-left: 200px;
}


.ability1txt{
    position: absolute;
    text-align: center;
    width: 600px;
    font-size: 27px;
    z-index: 10px;
    margin-left: 55%;
    margin-top:8%;
    font-family: "BigNoodleTitling";
    color: white;  
}

Answer 1

使用jQuery。

你总是可以使用原始的Javascript，但是使用jQuery会让事情变得更容易。通常，Javascript用于交互。

您的Javascript代码如下所示：

$(document).ready(function() {
    $('div.button\.abl button#abl1\.btn').click(function() {
        if ($('div#abli video').is(':visible') && $('p.ability1txt').is(':visible')) {
            $('div#abli video').hide(); // or fadeOut()
            $('p.ability1txt').hide(); // or fadeOut()
        } else {
            $('div#abli video').show(); // or fadeIn()
            $('p.ability1txt').show(); // or fadeIn()
        }
    });
});

Answer 2

您可以通过javascript执行以下操作：

＆＃13;

function ab1_Click() {
   var vid1 = document.getElementById("ab1Video");
   var t1 = document.getElementById("ab1Text");
   var v = "visible"; 
   if (vid1.style.visibility != "hidden") { v = "hidden"; }
   vid1.style.visibility =  v; 
   t1.style.visibility = v;
}

＆＃13;

<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
        <video id="ab1Video" preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>

<div class="shape1"></div>
<p id="ab1Text" class="ability1txt">Text.</p>

<div class="button.abl">
    <button id="abl1.btn" class="ability1" onclick="ab1_Click()">Show/Hide</button>
</div>

＆＃13;

Answer 3

你真的不需要JavaScript来制作视频和文字显示/隐藏。通过仅使用CSS和HTML，我们可以使用策略性放置的复选框和标签隐藏任何内容。添加了一些JavaScript，以便视频在隐藏时暂停，但请求的显示/隐藏功能不需要任何JavaScript。

在演示中评论的详细信息

演示

js

// Reference the <video> and <input type='checkbox'>
var v = document.getElementById('vid0');
var c = document.getElementById('chx0');

/* Whenever label.btn is clicked, the checkbox triggers
|| the change event. When a change happens, the <video>
|| will play if the checkbox is checked and pause if 
|| it isn't
*/
c.onchange = function(e) {
  if (this.checked) {
    v.play();
  } else {
    v.pause();
  }
}

html,
body {
  width: 100%;
  height: 100%;
}


/* Although .chx is "gone", it is still able to 
|| influence and be influenced by other elements
*/

.chx {
  display: none
}

.case {
  display: none;
  height: 270px;
  width: 480px;
}


/* When checkbox is checked the figure.case
|| that follows the label.btn which in turn 
|| follows the checkbox is revealed
*/

.chx:checked+.btn+.case {
  display: block;
}

#vid0 {
  width: 100%;
  height: 100%;
  display: block;
}

.cap {
  text-align: center;
  width: 100%;
  font-size: 27px;
  color: white;
  display: table;
  background: rgba(0, 0, 0, 0.6);
}

.btn {
  font-size: 48px;
  display: inline-block;
  width: 8ch;
  height: 2ex;
  cursor: pointer;
  color: #00f;
  text-shadow: 3px 1px 2px #555;
}

.btn::before {
  content: '▶'
}


/* When the checkbox is checked, the pseudo-element
|| of label.btn that follows the checkbox changes its
|| icon to pause.
*/

.chx:checked+.btn::before {
  content: '⏸';
  font-size: 54px;
}

单击按钮时，如何显示视频和文本？

3 个答案:

演示