文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何防止用户滚动到页面的一部分，直到音频文件播放了一定的时间？

问如何防止用户滚动到页面的一部分，直到音频文件播放了一定的时间？
EN

Stack Overflow用户
提问于 2016-12-06 09:08:14
回答 1查看 36关注 0票数 0

我想阻止用户滚动经过“刚刚过去”的雾树图片，直到到达歌曲中的某一点。

所有的css都是字体之类的。我想在第六区之前停止滚动。

下面是html：

​

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<title>LMC 3255 Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="morefonts.css">

<style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
    body, html {
        height: 100%;
        color: #777;
        line-height: 1.8;
    }

    /* Create a Parallax Effect */
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7 {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 100%;
    }

    .bgimg-1 {
        background-image: url('images/snowyMountains.jpg');
    }
    .bgimg-2 {
        background-image: url('images/blackbirdEye.jpg');
    }
    .bgimg-3 {
        background-image: url('images/birdsInTree.jpg');
    }
    .bgimg-4 {
        background-image: url('images/birdsOfFire.jpg');
    }
    .bgimg-5 {
        background-image: url('images/areOne.jpg');
    }
    .bgimg-6 {
        background-image: url('images/justAfter.jpg');
    }
    .bgimg-7 {
        background-image: url('images/menOfHaddam.jpg');
    }

    .bgvid { 
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0;
        width: 100%;
    }

    .animatedBG {
        animation-name: lightning;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    .w3-wide {letter-spacing: 10px;}
    .w3-hover-opacity {cursor: pointer;}
</style>

<body>
<audio autoplay>
  <source src="images/OpenCountryJoy.mp3" type="audio/mp3">
</audio>

<!-- First Parallax Image with Title Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
    <div class="w3-display-middle" style="white-space:nowrap;">
        <span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">BLACKBIRD</span>
    </div>
</div>

<!-- Container-->
<div class="w3-content w3-container w3-padding-64" id="about">
    <h3 class="w3-center">Tucker LoCicero</h3>
    <p class="w3-center">
        A remediation of<br>
        <em>Thirteen Ways of Looking at a Blackbird</em><br>
        by Wallace Stevens<br>
    </p>
</div>

<!--ONE-->
<div class="bgimg-2 w3-display-container w3-opacity-min" id="stanza1bg">
    <div class="w3-display-middle">
        <span class="w3-xxlarge w3-text-light-grey w3-wide">ONE</span>
    </div>
</div>

<div class="w3-content w3-container w3-padding-64" id="stanza1">
    <h3 class="w3-center">Among twenty snowy mountains,<br>
        The only moving thing<br>
        Was the eye of the blackbird.<br>
    </h3>
</div>

<!--TWO-->
<div class="bgimg-3 w3-display-container w3-opacity-min" id="stanza2bg">
    <div class="w3-display-middle">
       <span class="w3-xxlarge w3-text-light-grey w3-wide">TWO</span>
   </div>
</div>

<div class="w3-content w3-container w3-padding-64" id="stanza2">
    <h3 class="w3-center">I was of three minds,<br>
        Like a tree<br>
        In which there are three blackbirds.<br>
    </h3>
</div>

<!--THREE-->
<div class="bgimg-4 w3-display-container w3-opacity-min" id="stanza2bg">
    <div class="w3-display-middle">
       <span class="w3-xxlarge w3-text-light-grey w3-wide">THREE</span>
   </div>
</div>


<div class="w3-content w3-container w3-padding-64" id="stanza3">
    <h3 class="w3-center">The blackbird whirled in the atumn winds.<br>
        It was a small part of the pantomime.<br>
    </h3>
</div>

<!--FOUR-->
<div class="bgimg-5 w3-display-container w3-opacity-min">
    <div class="w3-display-middle">
       <span class="w3-xxlarge w3-text-light-grey w3-wide">FOUR</span>
   </div>
</div>

<div class="w3-content w3-container w3-padding-64" id="stanza4">
    <h3 class="w3-center">A man and a woman<br>
        Are one.<br>
        A man and a woman and a blackbird<br>
        Are one.<br>
    </h3>
</div>

<!--FIVE-->
<div class="bgvid w3-display-container w3-opacity-min" id="stanza5bg">
    <video loop muted autoplay poster="img/videoframe.jpg" class="bgvid">
        <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
    </video>
    <div class="w3-display-middle">
       <span class="w3-xxlarge w3-text-light-grey w3-wide">FIVE</span>
   </div>
</div>

<div class="w3-content w3-container w3-padding-64" id="stanza5">
    <h3 class="w3-center">I do not know which to prefer,<br>
        The beauty of inflections<br>
        Or the beauty of innuendoes,<br>
        The blackbird whistling<br>
        Or just after.<br>
    </h3>
</div>

<div class="bgimg-6 w3-display-container w3-opacity-min">
    <div class="w3-display-middle">
       <span class="w3-xxlarge w3-wide">[just after]</span>
   </div>
</div>

<!--SIX-->


<div class="w3-content w3-container w3-padding-64" id="stanza6">
    <h3 class="w3-center">Icicles filled the long window<br>
        With barbaric glass.<br>
        The shadow of the blackbird<br>
        Crossed it, to and fro.<br>
        The mood<br>
        Traced in the shadow<br>
        An indecipherable cause.<br>
    </h3> 
</div>

<!--SEVEN-->
<div class="bgimg-7 w3-display-container w3-opacity-min">
    <div class="w3-display-middle">
       <span class="w3-xxlarge w3-text-light-grey w3-wide">SEVEN</span>
   </div>
</div>

<div class="w3-content w3-container w3-padding-64" id="portfolio">
    <h3 class="w3-center">O thin men of Haddam,<br>
        Why do you imagine golden birds?<br>
        Do you not see how the blackbird<br>
        Walks around the feet<br>
        Of the women about you?<br>
    </h3>
</div>

<!--TEN-->
<div class="bgvid w3-display-container w3-opacity-min" id="stanza10bg">
    <video loop autoplay poster="img/videoframe.jpg" class="bgvid">
        <source src="images/greenLight.mp4" type="video/mp4">
    </video>
    <div class="w3-display-middle">
       <span class="w3-xxlarge w3-text-light-grey w3-wide">TEN</span>
   </div>
</div>

<div class="w3-content w3-container w3-padding-64" id="stanza10">
    <h3 class="w3-center">At the sight of blackbirds<br>
        Flying in a green light,<br>
        Even the bawds of euphony<br>
        Would cry out sharply.<br>
    </h3>
</div>

<!--THIRTEEN-->
<div class="w3-display-container w3-opacity-min">
    <img src="images/eveningAllAfternoon.jpg" style="width: 100%">
    <div class="w3-display-middle">
        <h3 class="w3-center w3-text-light-grey" style="font-size: 1000%">
            T<br>
            H<br>
            I<br>
            R<br>
            T<br>
            E<br>
            E<br>
            N<br>
        </h3>
   </div>
</div>

<div class="w3-content w3-container w3-padding-64">
    <h3 class="w3-center">It was evening all afternoon.<br>
            It was snowing<br>
            And it was going to snow.<br>
            The blackbird sat<br>
            In the cedar-limbs.
        </h3> 
</div>

</body>
</html>

​

请参阅live website (在chrome上查看)。

javascript
html
css
EN

回答 1

Stack Overflow用户

发布于 2016-12-06 10:48:37

想明白了！我刚刚将display设置为“style=：none”，并在正确的时间使用了setTimeout()到fadeIn()。

​

代码语言：javascript
复制
    $(document).ready(function(){
        setTimeout(function() {$("#somehiddenDiv").fadeIn();}, 7100);
    });

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40986154

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档