文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用CSS3转换完整页面并支持IE8、IE9？

问如何使用CSS3转换完整页面并支持IE8、IE9？
EN

Stack Overflow用户

提问于 2015-05-25 11:08:53

回答 1查看 216关注 0票数 0

我正在做一个问答游戏，在游戏中，我应该每页只显示一个问题(整页)。每个页面都有两个按钮：、YES、和NO。

在不滚动的情况下，当用户单击NO时，整个页面将向左移动，并显示正确的答案。当用户单击“是”()、“是”(YES)、“是”()时，整个页面将向下传输，以回答下一个问题。

我已经检查了整页 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');
  });

});

更新：

这是一个有完整代码的代码页

javascript

jquery

html

css

internet-explorer

回答 1

Stack Overflow用户

发布于 2015-05-26 16:06:08

我已经检查了FullPageJs JS库，例如，，但是我想在没有任何库的情况下完成它。

如果你想学习或者把它作为一个练习，你可以去做它。

如果您真的想拥有一个好的终端产品，并经过数千人的测试，我强烈建议您使用一个库。为什么？好吧，库不会因为人们懒得编码200行而变得庞大和受欢迎。以下是一些原因：

高测试在不同的设备和浏览器由成千上万的人(Windows，Adroid，iOS，触摸屏计算机，Opera，Safari.)
与触摸设备兼容。
兼容动态滚动(苹果笔记本电脑，魔法鼠标.)
兼容旧浏览器(IE 8，Opera 12.)。
良好的性能，现代浏览器和触摸设备(css3)。
调整视口大小时，重新计算区段和幻灯片。
返回URL中的锚。
响应模式。
辅助功能(键盘、滚动条、浏览器历史记录)。
使用回调来触发操作。
有很多方法和选择。

如果使用fullPage.js，只需7 7Kb就可以得到所有这些。

票数 1

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

原文链接：

https://stackoverflow.com/questions/30436975

复制

相似问题

问如何使用CSS3转换完整页面并支持IE8、IE9？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS3转换完整页面并支持IE8、IE9？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS3转换完整页面并支持IE8、IE9？
EN