Question

我的问题非常基本，它写在那里。

如何从窗口外部进行div滑入？例如，它可能出现在窗口的右侧。

我实际上需要基本的javascript代码，而不是jQuery。

谢谢

Answer 1

您也可以使用纯JavaScript进行操作。创建计时器间隔。每1毫秒运行一次。每次定时器被命中时都会修改左属性。一旦左到0停止计时器。 --html

＆＃13;

var div = document.getElementById("slidingDiv");
div.style.position = "absolute";
var left = document.body.offsetWidth;
div.style.left = left + "px";
var gap = 5;
var timer = window.setInterval(function() {
  div.style.left = left + "px";
  if (left - gap < 0) {
    left = 0;
  } else {
    left -= gap;
  }
  if (left == 0) {
    clearInterval(timer);
  }
}, 1);

＆＃13;

<div>
  <div id="slidingDiv">this div slides</div>
</div>

＆＃13;

观看此fiddler中的演示。

Answer 2

此论坛不适用于代码请求...

无论如何，您可以通过在javascript中使用其offsetHeight和offsetWidth属性来定位html元素。此外，您还必须使用间隔来制作动画。

var target = document.getElementById('div');
var interval = window.setInterval(function () {
   target.offsetWidth++;
   // When the div moved enough...
   if (target.offsetWidth > 300) {
      window.clearInterval(interval);  // ...clear the interval
   }       
}, 500); // The animation step will be done every 500ms -> 0.5s

当您定位新的浏览器（IE9 +）时，您还可以通过硬件加速来查看css过渡，这样做是这样的：

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         .hw-ac {
            transform: translate3d(0, 0, 0); /* This neat css rule says that the html element will be rendered from the GPU */
            transition: left 1s linear; /* The animation will take 1 second */
         }
         .start-pos { /* The start position outside of the screen */
            position: absolute;
            left: -100px;
         }
         .target-pos { /* The target poition */
            position: absolute;
            left: 200px;
         }
      </style>
   </head>
   <body>
      <div id="div" class="hw-ac start-pos">
      </div>
   </body>
</html>

现在用javascript将类start-pos替换为类target-pos：

var target = document.getElementById('div');
target.className = 'hw-ac target-pos';

这是Firefox的一个例子：

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
		#div {
            position: absolute;
			background-color: #f00;
			width: 50px;
			height: 50px;
		}
         .hw-ac {
            -moz-transform: translate3d(0, 0, 0); /* This neat css rule says that the html element will be rendered from the GPU */
            -moz-transition: left 1s linear; /* The animation will take 1 second */
         }
         .start-pos { /* The start position outside of the screen */
            left: -100px;
         }
         .target-pos { /* The target poition */
            left: 200px;
         }
      </style>
   </head>
   <body>
      <div id="div" class="hw-ac start-pos">
      </div>
	  <script type="text/javascript">
		function start() {
			var target = document.getElementById('div');
			target.className = 'hw-ac target-pos';
		}
	  </script>
	  <input type="button" onclick="start();" value="PRESS ME" />
   </body>
</html>

在加载（javascript）时如何从窗口外部滑动div？

2 个答案: