个人中心
gpt4 book ai didi

javascript - 点击显示网站

转载 作者：太空宇宙 更新时间：2023-11-04 13:20:11 25 4
gpt4 key购买 nike

我正在尝试制作一个类似 http://html5up.net/overflow 的网站，我真正不喜欢的一件事是您可以在单击“按预期进行”按钮之前向下滚动。对我来说，如果您也可以手动向下滚动，那么按下按钮并让它为您滚动的意义就大打折扣了。

我的问题是，有没有办法让页面的其余部分仅在您按下该按钮后立即显示，这样用户就被迫按下按钮并看到自动滚动，然后他才能看到其余部分网站。

我希望下一个按钮也能“根据此消息采取行动”

感谢任何帮助。

这是代码

<body>

    <!-- Header -->
        <section id="header">
            <header>
                <h1>Overflow</h1>
                <p>By HTML5 UP</p>
            </header>
            <footer>
                <a href="#banner" class="button style2 scrolly scrolly-centered">Proceed as anticipated</a>
            </footer>
        </section>

    <!-- Banner -->
        <section id="banner">
            <header>
                <h2>This is Overflow</h2>
            </header>
            <p>A brand new site template designed by <a href="http://n33.co">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a>.<br />
            It’s fully responsive, built on <a href="http://skeljs.org">skelJS</a>, and of course entirely free<br />
            under the <a href="http://html5up.net/license/">Creative Commons license</a>.</p>
            <footer>
                <a href="#first" class="button style2 scrolly">Act on this message</a>
            </footer>
        </section>

    <!-- Feature 1 -->
        <article id="first" class="container box style1 right">
            <a href="http://ineedchemicalx.deviantart.com/art/Time-goes-by-too-fast-335982438" class="image full"><img src="images/pic01.jpg" alt="" /></a>
            <div class="inner">
                <header>
                    <h2>Lorem ipsum<br />
                    dolor sit amet</h2>
                </header>
                <p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.</p>
            </div>
        </article>

    <!-- Feature 2 -->
        <article class="container box style1 left">
            <a href="http://ineedchemicalx.deviantart.com/art/Kingdom-of-the-Wind-348268044" class="image full"><img src="images/pic02.jpg" alt="" /></a>
            <div class="inner">
                <header>
                    <h2>Mollis posuere<br />
                    lectus lacus</h2>
                </header>
                <p>Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. Etiam egestas scelerisque ac duis magna lorem ipsum dolor.</p>
            </div>
        </article>

    <!-- Portfolio -->
        <article class="container box style2">
            <header>
                <h2>Magnis parturient</h2>
                <p>Justo phasellus et aenean dignissim<br />
                placerat cubilia purus lectus.</p>
            </header>
            <div class="inner gallery">
                <div class="row flush">
                    <div class="3u"><a href="images/fulls/01.jpg" class="image full"><img src="images/thumbs/01.jpg" alt="" title="Ad infinitum" /></a></div>
                    <div class="3u"><a href="images/fulls/02.jpg" class="image full"><img src="images/thumbs/02.jpg" alt="" title="Dressed in Clarity" /></a></div>
                    <div class="3u"><a href="images/fulls/03.jpg" class="image full"><img src="images/thumbs/03.jpg" alt="" title="Raven" /></a></div>
                    <div class="3u"><a href="images/fulls/04.jpg" class="image full"><img src="images/thumbs/04.jpg" alt="" title="I'll have a cup of Disneyland, please" /></a></div>
                </div>
                <div class="row flush">
                    <div class="3u"><a href="images/fulls/05.jpg" class="image full"><img src="images/thumbs/05.jpg" alt="" title="Cherish" /></a></div>
                    <div class="3u"><a href="images/fulls/06.jpg" class="image full"><img src="images/thumbs/06.jpg" alt="" title="Different." /></a></div>
                    <div class="3u"><a href="images/fulls/07.jpg" class="image full"><img src="images/thumbs/07.jpg" alt="" title="History was made here" /></a></div>
                    <div class="3u"><a href="images/fulls/08.jpg" class="image full"><img src="images/thumbs/08.jpg" alt="" title="People come and go and walk away" /></a></div>
                </div>
            </div>
        </article>

    <!-- Contact -->
        <article class="container box style3">
            <header>
                <h2>Nisl sed ultricies</h2>
                <p>Diam dignissim lectus eu ornare volutpat orci.</p>
            </header>
            <form>
                <div class="row half">
                    <div class="6u"><input type="text" class="text" name="name" placeholder="Name" /></div>
                    <div class="6u"><input type="text" class="text" name="email" placeholder="Email" /></div>
                </div>
                <div class="row half">
                    <div class="12u">
                        <textarea name="message" placeholder="Message"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="12u">
                        <ul class="actions">
                            <li><a href="#" class="button form">Send Message</a></li>
                        </ul>
                    </div>
                </div>
            </form>
        </article><section id="footer">
        <ul class="icons">
            <li><a href="#" class="fa fa-twitter solo"><span>Twitter</span></a></li>
            <li><a href="#" class="fa fa-facebook solo"><span>Facebook</span></a></li>
            <li><a href="#" class="fa fa-google-plus solo"><span>Google+</span></a></li>
            <li><a href="#" class="fa fa-pinterest solo"><span>Pinterest</span></a></li>
            <li><a href="#" class="fa fa-dribbble solo"><span>Dribbble</span></a></li>
            <li><a href="#" class="fa fa-linkedin solo"><span>LinkedIn</span></a></li>
        </ul>
        <div class="copyright">
            <ul class="menu">
                <li>&copy; Untitled. All rights reserved.</li>
                <li>Design: <a href="http://html5up.net/">HTML5 UP</a></li>
            </ul>
        </div>
    </section>

</body>

所以基本上是通过单击继续...按钮，我想显示横幅部分，以及 act... 按钮。当按下操作按钮时，我想显示网站的所有其余部分。

我现在已经半修复了，但是在第二次点击后我不能再滚动了，请帮忙，www.fenrak.com 我下载了它所以你可以看到

最佳答案

在 body 元素上使用 overflow:hidden 样式。单击按钮时使用 Javascript 将其删除。

[编辑]示例:

在样式部分:

body{
  overflow:hidden;
}

在 javascript 部分(使用 jquery):

$(document).ready(function(){
  $("#BUTTON_ID").click(function(){
    $("body").css("overflow", "visible");
  });
});

(顺便说一句，未经测试的代码)

关于javascript - 点击显示网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24125653/

25 4 0
文章推荐： javascript - remove() 方法在 animate() 中不起作用
文章推荐： c++ - 从 Visual Basic 调用 C++ DLL
文章推荐： javascript - 跨度元素未正确更新
文章推荐： html - CSS -ms-flex 盒子模型布局
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com