Question

我想显示一个文件传输...就像从一个文件夹到另一个文件夹一样，我已经能够使用JavaScript完成它，但我所做的只是：

<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折叠时旋转。

我也认为如果解决这个问题的最佳方式是gif？

我想要像飞行文件一样的效果

Answer 1

您可以像这样用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显示或隐藏动画图像

Answer 2

如果我已正确阅读您的代码，您将使文件在左右边界之间来回反弹。您可以使用CSS3转换属性来旋转文件，因为它们来回移动。

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

但是，您仍然只是以10像素的增量移动图像文件，这可能看起来不稳定。更好的解决方案是使用CSS关键帧动画。

javascript或css动画文件传输

2 个答案: