JavaScript或CSS动画文件传输

我想显示文件传输......就像从一个文件夹到另一个文件夹，我已经能够使用它，但JavaScript的做所有我所做的就是：JavaScript或CSS动画文件传输

<script type="text/javascript"> 
var img; 
var animateR; 
var animateL; 

function init(){ 
img = document.getElementById('file'); 
img.style.left = '35px'; 
} 

function moveRight(){ 

img.style.display= 'block'; 
img.style.left = parseInt(img.style.left) + 10 + 'px'; 
animateR = setTimeout(moveRight,30); 

if(parseInt(img.style.left)>600){ 
    clearTimeout(animateR); 
    moveLeft(); 
    } 
} 

function moveLeft(){ 

    img.style.left = parseInt(img.style.left) - 10 + 'px'; 
    animateL = setTimeout(moveLeft,30); 

    if(parseInt(img.style.left)<38){ 
    clearTimeout(animateL); 
    moveRight(); 
    } 
} 

window.onload =init; 
</script>

这个工作对我来说，但我希望显示文件正在旋转，同时从右文件夹移动到左文件夹，并返回到文件上传时的riight fold。

另外我想如果最好的方式来解决这将是一个gif？

我想如飞文件的效果

来源

2014-07-26 user2666633

你能告诉我输出吗？ – PraJen

上面的代码，它现在所做的全部工作就是：（1）显示一个隐藏文件（2）将文件移动到文件（3），当文件向右移动到600px时动画文件，然后我开始移回到左边当它达到像38px的宽度时，它会回到正确的位置，然后循环继续。 @PraJen – user2666633

http://www.greensock.com/gsap-js/只是说' – Fresheyeball

您可以在CSS像这样旋转图像：

#rot{ 
    animation: anime1 2s; 
    -webkit-animation: anime1 2s; 
    animation-iteration-count: infinite; 
    -webkit-animation-iteration-count: infinite; 
} 


@keyframes anime1 { 
    to { 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     -webkit-transform:rotate(360deg);/*Chrome & Opera*/ 
     transform: rotate(360deg); /* The best browser (i mean firefox) */ 
    } 
} 


@-webkit-keyframes anime1 { 
    to { 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     -webkit-transform:rotate(360deg); 
     transform: rotate(360deg); 
    } 
}

然后只需用js显示或隐藏动画形象

来源

2014-07-26 04:41:39

谢谢@黑洞但是我在这里有点混淆#rot和anime1你能不能帮我把它放在小提琴上？ – user2666633

@ user2666633 #rot是img标签的id例如：并了解anime1看看这里： http://www.w3schools.com/css/css3_animations.asp –

让它现在工作..谢谢@Black -Hole – user2666633

如果我有正确读取你的代码，你正在使文件在你的左右边界之间来回跳动。您可以使用CSS3转换属性来旋转文件，因为它们会像这样来回移动。

transform:rotate(7deg); 
-ms-transform:rotate(7deg); /* IE 9 */ 
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */

但是，你仍然只是移动你的图像文件中10倍像素的增量，这可能看起来波涛汹涌。更好的解决方案是使用CSS关键帧动画。

来源

2014-07-26 04:43:38

JavaScript或CSS动画文件传输

回答

相关问题