个人中心
gpt4 book ai didi

javascript - 如何使用CSS3转换整页并支持IE8、IE9？

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

我正在开发一个问答问答游戏，我应该在其中每页(整页)只显示一个问题。每个页面都有 2 个按钮 YES 和 NO。

如果不滚动，当用户点击NO 时，整个页面会向左移动并显示正确答案。当用户单击YES 时，整个页面会向下过渡到下一个问题。

我检查了 FullPageJs JS库之类的，但是我想在没有任何库的情况下进行。

我只尝试过从上到下过渡整页，但无法从左到右过渡。
我怎样才能实现整页的这种转换并支持 IE8 和 IE9？
谢谢!

HTML:

    <body>
    <div class="site-wrapper">
        <div class="site-wrapper-inner">
            <div class="container">
                <div class="row">
                    <div class="brand-image-container">
                        <div class="centerer"></div>
                        <img src="http://placehold.it/150x70" alt="" /> 
                    </div>                      
                </div>
                <div class="row">
                    <div class="img-container">
                        <div class="centerer"></div>
                        <img src="http://placehold.it/400x250" alt="" />    
                    </div>

                <div class="wrapper">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus amet optio vel alias nobis nostrum quaerat quas doloremque, libero dicta pariatur cupiditate, reiciendis quo nihil dolorem. Tempora saepe suscipit consequatur!
                    </p>                    
                </div>
            </div>
            </div>

        <div class="footer">
            <a href="#" class="button btn-medium btn-true">TRUE</a>
            <a href="#" class="button btn-medium btn-false">FALSE</a>
        </div>              
        </div>
    </div>
</body>

CSS:

* {
  box-sizing: border-box; }

html {
  font-family: "Lucida Sans", sans-serif, Arial;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

p {
  margin: 0; }

.site-wrapper {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #CBD7F5;
  overflow: hidden; }

.site-wrapper-inner {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background-color: #aaa;
  overflow: hidden; }

.container {
  width: 100%;
  background-color: #eeeeee;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  height: 100%;
  float: left; }

.wrapper {
  width: 100%;
  margin: 10px auto;
  text-align: center;
  padding: 0 10px; }

.img-container, .brand-image-container {
  position: relative;
  padding: 0 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  /* Align center inline elements */
  font: 0/0 a;
  /* Hide the characters like spaces */ }

.brand-image-container {
  margin-bottom: 10px; }

.centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%; }

.img-container img {
  vertical-align: middle;
  display: inline-block;
  max-height: 100%;
  /* <-- Set maximum height to 100% of its parent */
  max-width: 100%;
  /* <-- Set maximum width to 100% of its parent */ }

.footer {
  padding: 15px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  background-color: #345; }

.button {
  display: inline-block;
  margin: 0;
  font-weight: 400;
  line-height: 1.42857143;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0;
  border: 1px solid transparent;
  background-image: none;
  cursor: pointer; }

.btn-medium {
  margin: 10px 15px;
  font-size: 20px;
  line-height: 1.33333333;
  text-shadow: none; }

.btn-true, .btn-false {
  padding: 5px 20px;
  color: #ffffff;
  border-radius: 0;
  border: 1px solid #336699;
  background-color: #337799; }

a {
  text-decoration: none; }

.go-down-section {
  margin-top: -1000px;
  transition: all 0.7s ease-in-out;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out; }

.go-right-section {
  margin-left: -100%;
  transition: all 0.7s ease-in-out;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out; }

.go-away {
  top: 0;
  position: absolute; }

@media (min-width: 640px) {
  .wrapper {
    width: 400px; } }
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .wrapper {
    width: 400px; }

  .footer {
    font-size: 21px; } }

JS:

$(document).ready( function() {
  $('#true1').click( function(){
    $('.section-one').addClass('go-down-section');
  });
  $('#false2').click( function(){
    $('.section-two').addClass('go-right-section');
    $('.section-three').addClass('go-away');
  });

});

更新:

这是一个codepen page with full code

最佳答案

I have checked the FullPageJs JS libraries such as, but I want to do it without any library.

如果你想学习或作为练习，你可以去做。

如果你真的想要一个好的最终产品，经过数千次测试，我强烈建议你去图书馆。为什么？好吧，图书馆不会因为人们懒于编写 200 行代码而变得庞大和流行。以下是一些原因:

  • 经过数千人在不同设备和浏览器中的高度测试(Windows Phone、Android、iOS、触摸屏计算机、Opera、Safari...)
  • 与触摸设备的兼容性。
  • 与动态滚动(Apple 笔记本电脑、魔术鼠标...)的兼容性。
  • 与旧浏览器(IE 8、Opera 12...)的兼容性。
  • 现代浏览器和触摸设备 (css3) 的良好性能。
  • 在调整视口(viewport)大小时重新计算部分和幻灯片。
  • 在 URL 中返回 anchor 。
  • 响应模式。
  • 辅助功能(键盘、滚动条、浏览器历史记录)。
  • 使用回调来触发操作。
  • 大量的方法和选项。

如果您使用 fullPage.js，您只需压缩 7Kb 即可获得所有这些内容。

关于javascript - 如何使用CSS3转换整页并支持IE8、IE9？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30436975/

24 4 0
文章推荐： 如果客户端停止(SIGSTOP)，Python TCP 服务器将永远阻止发送给客户端
文章推荐： java - 如何在 Eclipse 中将 GitHub 托管项目导入为 Java 项目？
文章推荐： linux - 在 unix shell 脚本中嵌套 for 循环
文章推荐： C++ 唯一字符检查
太空宇宙
个人简介

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

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