我有一个登陆页面,我想要做的就是在完成播放后淡出对象以显示下面的背景.使用jQuery或任何其他方法淡出标记<video>或<div>标记都没问题.
<div id="video">
<video width="100%" height="auto" autoplay="autoplay">
<source src="monarch.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="monarch.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
我正在尝试让我的HTML5视频元素在加载时淡入淡出,(我现在正在使用Javascript canplaythrough,你可以在下面看到的代码中看到它,但它有点苛刻.)我怎样才能获得HTML5视频元素轻轻淡入？我可以使用JavaScript或jquery,但我不太了解任何一个,所以一些完整的代码将非常有用!
这是代码:(如果你运行代码与运行代码片段,它不能正常工作,所以我强烈建议去我的网站,这是我的视频页面,如果你等待30秒/分钟,它的工作原理(直到视频加载):jeffarries.com/videos.
<script>
var e = document.getElementById("myVideo");
e.style.display = 'none'
var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
var e = document.getElementById("myVideo");
e.style.display = 'block'
};
</script> <video style="display: block;" id="myVideo" width="320" height="176" controls>
<source src="http://www.jeffarries.com/videos/jeff_arries_productions_intro.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>谢谢你的时间和精力!
我的网站始终使用相同的导航菜单,而不是为每个页面重写HTML代码,我可以像使用CSS一样链接到第二个HTML文件(包含导航HTML代码)吗？或者这会产生问题吗？
标题基本概括了所有内容。margin: top;我希望HTML 元素上的CSSmain_content与浏览器窗口（的百分比）相关（以便main_content始终位于浏览器窗口的底部。我该如何实现这一点？
我已经尝试过这个但行不通。（它body {height:100vh}似乎没有形成body任何高度，因为它main_content没有按应有的方式粘在底部。
body {height:100vh}
#main_content {position:absolute; width:100%; display:block; left:0; bottom:0; text-align:center; padding:20px;}<div>Extra Infomation </div>
<div id="main_content">
<p>here you can learn about me and my adventures</p>
</div>（现在不要尝试这个）如果您访问我的网站，您将看到“了解我和我的冒险”标题，以及“最近的活动”以及下面的其他内容，这就是该部分我想要在浏览器窗口的底部，最好是“了解我和我的冒险”部分从页面底部伸出。
我一直在搞乱这个移动友好的导航菜单,由于某种原因,我的菜单将打开(JS IF语句),但不关闭(JS ELSE声明.所以我坚持为什么它打开但不关闭？
PS我是JavaScript的新手,所以我看起来可能很简单,谢谢!
这是我正在使用的代码:
function myFunction(x) {
x.classList.toggle("change");
}
function navChange() {
var x = document.getElementById("myNav").style.height
if (x = "0%"){
document.getElementById("myNav").style.height = "100%";
} else {
document.getElementById("myNav").style.height = "0%";
}
}.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181; …