2013-12-16 27 views
0

我试图创建一个类似于复印机出来的纸张的页面效果。我希望装载完成时的正文内容从左到右出现。我已经看到很多关于如何使用像图像这样的induivale元素而不是整个页面的例子。这是一个拼凑在一起的代码示例。我似乎无法得到从左到右的效果,我正在寻找和这不适用于IE浏览器。我刚开始编写网页,所以任何帮助将不胜感激。从关闭页面加载正文内容 - >从页面加载的左侧到右侧

<html> 
<head> 
    <style> 

    body { padding-left: 5000px; -webkit-transition: all 1s ease; transition: all .5s ease; } 

    .loaded { padding-left: 5px; } 

    </style> 

    <script>function loaded (el) { el.classList.add('loaded') }</script> 

</head> 
<body onload="loaded(document.body)"> 
<br><br><br><br><br> 

<table class="tftable" border="0" width="400"> 
    <tr><th></th></tr> 
    <tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td></tr> 
</table> 

</body> 
</html> 
+0

尝试使用jQuery.animate而不是CSS动画 –

回答