Fatal编程技术网

Javascript HTML5转换

javascript html css

Javascript HTML5转换,javascript,html,css,css-transitions,Javascript,Html,Css,Css Transitions,为了寻找HTML5转换的一些例子，我调整了我的发现，最终得到了我想要的东西 <!DOCTYPE html> <html> <head> <style> div { width: 50px; height: 50px; } div.myDiv { position: absolute; -webkit-transi

为了寻找HTML5转换的一些例子，我调整了我的发现，最终得到了我想要的东西

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
          width: 50px;
          height: 50px;
        }

        div.myDiv {
          position: absolute;
          -webkit-transition-property: top, opacity;
          -webkit-transition-duration: 1s, 1s;
          -webkit-transition-timing-function:ease-in-out, ease-in-out;

          -moz-transition-property: top, opacity;
          -moz-transition-duration: 1s, 1s;
          -moz-transition-timing-function:ease-in-out, ease-in-out;

          -o-transition-property: top, opacity;
          -o-transition-duration: 1s, 1s;
          -o-transition-timing-function:ease-in-out, ease-in-out;

          transition-property: top, opacity;
          transition-duration: 1s, 1s;
          transition-timing-function:ease-in-out, ease-in-out;
        }
        #one {
          top: 0px;
          background-color: blue;
          opacity: 1;
        }

        #two {
          top: 50px;
          background-color: green;
          opacity: 0;
        }

        #three {
          top: 100px;
          background-color: red;
          opacity: 0;
        }

        #container {
          width: 50px;
          height: 150px;
          position: relative;
          overflow:hidden;
        }
    </style>
    <script>

    function one() {
      document.getElementById('one').style.top = "0px";
      document.getElementById('two').style.top = "50px";
      document.getElementById('three').style.top = "100px";

      document.getElementById('one').style.opacity = "1";
      document.getElementById('two').style.opacity = "0";
      document.getElementById('three').style.opacity = "0";
    }
    function two() {
      document.getElementById('one').style.top = "-50px";
      document.getElementById('two').style.top = "0px";
      document.getElementById('three').style.top = "50px";

      document.getElementById('one').style.opacity = "0";
      document.getElementById('two').style.opacity = "1";
      document.getElementById('three').style.opacity = "0";
    }

    function three() {
      document.getElementById('one').style.top = "-100px";
      document.getElementById('two').style.top = "-50px";
      document.getElementById('three').style.top = "0px";

      document.getElementById('one').style.opacity = "0";
      document.getElementById('two').style.opacity = "0";
      document.getElementById('three').style.opacity = "1";
    }
    </script>
</head>
<body>
<div id='container'>
    <div class="myDiv" id='one'>
    </div>
    <div class="myDiv" id='two'>
    </div>
    <div class="myDiv" id='three'>
    </div>
</div>
<input type='button' onclick='one();' value='one!'></input>
<input type='button' onclick='two();' value='two!'></input>
<input type='button' onclick='three();' value='three!'></input>
</body>
</html>


div{
宽度：50px；
高度：50px；
}
div.myDiv{
位置：绝对位置；
-webkit转换属性：顶部，不透明度；
-webkit转换持续时间：1s，1s；
-webkit过渡计时功能：易入易出；
-moz过渡属性：顶部，不透明度；
-moz转换持续时间：1s，1s；
-moz过渡计时功能：缓进缓出；
-o-过渡特性：顶部，不透明度；
-o-过渡持续时间：1s，1s；
-o-转换-定时-功能：易入易出；
过渡属性：顶部，不透明度；
过渡时间：1s，1s；
过渡定时功能：缓进缓出；
}
#一个{
顶部：0px；
背景颜色：蓝色；
不透明度：1；
}
#两个{
顶部：50px；
背景颜色：绿色；
不透明度：0；
}
#三{
顶部：100px；
背景色：红色；
不透明度：0；
}
#容器{
宽度：50px；
高度：150像素；
位置：相对位置；
溢出：隐藏；
}
功能一（）{
document.getElementById（'one'）.style.top=“0px”；
document.getElementById（'two'）.style.top=“50px”；
document.getElementById（'three'）.style.top=“100px”；
document.getElementById（'one'）.style.opacity=“1”；
document.getElementById（'two'）.style.opacity=“0”；
document.getElementById（'three'）.style.opacity=“0”；
}
函数二（）{
document.getElementById（'one'）.style.top=“-50px”；
document.getElementById（'two'）.style.top=“0px”；
document.getElementById（'three'）.style.top=“50px”；
document.getElementById（'one'）.style.opacity=“0”；
document.getElementById（'two'）.style.opacity=“1”；
document.getElementById（'three'）.style.opacity=“0”；
}
职能三（）{
document.getElementById（'one'）.style.top=“-100px”；
document.getElementById（'two'）.style.top=“-50px”；
document.getElementById（'three'）.style.top=“0px”；
document.getElementById（'one'）.style.opacity=“0”；
document.getElementById（'two'）.style.opacity=“0”；
document.getElementById（'three'）.style.opacity=“1”；
}
我在某个地方读到，不建议从javascript更改css属性。我认为这是一种不好的做法。我相信一定有更优雅、更好的方法来做到这一点

有什么想法吗？（fiddle）

我不确定在JavaScript中更改CSS属性是否一定是一种不好的做法，不过如果您的用户可能会关闭JavaScript，您可能不希望以这种方式更改对网站功能至关重要的属性

您的JavaScript可以按照如下方式进行重构，其明显的优点是添加或删除框非常简单（请参阅fiddle）：

转换是CSS，而不是HTML5。关键是div必须包含内容（文本、图像…）。我只是用方框来举例。无论如何，我想我可以修改它，使它适合我的需要。谢谢 
  // We can define any number of boxes here
  var boxes = ['blue', 'green', 'red'];
  var height = 50;

  // We'll put the boxes in a div which we will move 
  // so that we don't have to manage the movement of 
  // multiple elements
  var slider = document.getElementById('slider');
  var div;

  for (var i = 0; i < boxes.length; i ++) {

    // Create a box for each element in array
    div = document.createElement('div');

    div.setAttribute('id', 'box_' + i);
    div.setAttribute('class', 'myDiv');

    div.style.background = boxes[i];
    div.style.top = (i * height) + "px";
    div.style.opacity = (i == 0) ? 1 : 0;

    // Now stick it in the slider div
    slider.appendChild(div);
  }

  function slide(index) {

    // Calculate new slider position according to supplied index
    var top = (index * height) * -1;

    document.getElementById('slider').style.top = top + 'px';
    toggleVisible(document.getElementById('box_' + index));
  }

  // Hide non-selected boxes and reveal selected
  function toggleVisible(show) { 

    var div;

    for (var i = 0; i < boxes.length; i ++) {
      div = document.getElementById('box_' + i);
      div.style.opacity = (div === show) ? 1 : 0;
    }
  }

<div id='container'>
  <div id='slider'></div>
</div>

<input type='button' onclick='slide(0);' value='one!'></input>
<input type='button' onclick='slide(1);' value='two!'></input>
<input type='button' onclick='slide(2);' value='three!'></input>

div {
  width: 50px;
  height: 50px;
}

div.myDiv {
  position: absolute;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function:ease-in-out, ease-in-out;

  -moz-transition-property: opacity;
  -moz-transition-duration: 1s, 1s;
  -moz-transition-timing-function:ease-in-out, ease-in-out;

  -o-transition-property: opacity;
  -o-transition-duration: 1s, 1s;
  -o-transition-timing-function:ease-in-out, ease-in-out;

  transition-property: opacity;
  transition-duration: 1s, 1s;
  transition-timing-function:ease-in-out, ease-in-out;
}

#container {
  width: 50px;
  height: 150px;
  position: relative;
  overflow:hidden;
}

#slider { 
  position: absolute;
  -webkit-transition-property: top;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function:ease-in-out, ease-in-out;

  -moz-transition-property: top;
  -moz-transition-duration: 1s, 1s;
  -moz-transition-timing-function:ease-in-out, ease-in-out;

  -o-transition-property: top;
  -o-transition-duration: 1s, 1s;
  -o-transition-timing-function:ease-in-out, ease-in-out;

  transition-property: top;
  transition-duration: 1s, 1s;
  transition-timing-function:ease-in-out, ease-in-out;
}