该网站的想法是在后台播放一段视频，当您访问该视频时，它会占据浏览器的整个宽度和高度。然后向下滚动并查看其余内容。到目前为止，我的视频部分正在运行。给我带来麻烦的部分是一张 iphone 的图片，它也需要包括在内。大约一半的手机覆盖了一部分视频。另一半您需要向下滚动才能看到(连同其余内容)。我需要手机 1. 无论窗口大小，始终出现在该位置；和 2. 缩放为手机大小与窗口大小的相同比例。
我已经尝试了很多方法来实现这个功能，但它似乎对我来说还没有用。
<script>
$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});
</script>
</head>
<body>
<iframe id="video" src="http://www.youtube.com/embed/SLTVLIjvdnw?HD=1;autoplay=1;controls=0;showinfo=0;" frameBorder="0" allowfullscreen></iframe>
<div id="box">
<img id="iphone" src="img/phone.png" alt="iPhone" />
</div>
<div id="test"></div>
</body>
html, body {
border: 0px;
margin:0px;
padding:0px;
}
body {
overflow: hidden;
}
#test {
width:400px;
height:400px;
background-color:blue;
}
#box {
position:absolute;
max-width:280px;
left:10%;
top:380px;
}
#iphone {
max-width: 100%;
}
最佳答案
这是一个纯 CSS 解决方案，假设我正确理解了问题:
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.video {
background: black;
width: 100%;
height: 100%;
}
.iphone {
width: 50%;
margin: 0 auto;
display: block;
margin-top: -25%;
position: relative;
z-index: 2;
}
关于javascript - 使图像在屏幕上显示一半，另一半滚动查看，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24459725/