Question

enter image description here

var t = 0;
var k=0;
function moveit() {
    t += 0.05;
k=k+.001;
    var r = 100;
    var xcenter = 100;
    var ycenter = 100;
    var newLeft = Math.floor(xcenter + (r*k * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r *k* Math.sin(t)));
    $('.poss img').each(function(){$(this).animate({
        top: newTop,
        left: newLeft,
    }, 1, function() {
        moveit();
    });
  });
}

$(document).ready(function() {
    moveit();
});

.poss{
  position: absolute;
width: 100%;
height: 100%;
top: 90px;
}

.poss img {
position: absolute;
border-radius: 80px;
border: 2px solid white;
box-shadow: 2px 2px 14px rgba(30, 38, 74, 0.86);

 -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- comt -->   
    <link rel="stylesheet" type="text/css" href='/stylesheets/style.css'>
    <link rel="stylesheet" href="<%= baseUrl %>/stylesheets/bootstrap.css">
    <script type="text/javascript" src="<%= baseUrl %>/javascripts/jquery-3.1.0.min.js"></script>

    <script src="<%= baseUrl %>/javascripts/bootstrap.js"></script>
    <script type="text/javascript" src="<%= baseUrl %>javascripts/appscript.js"></script>

    <style>
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
        width: 70%;
        margin: auto;
    }
    </style>

</head>

<body background="<%= baseUrl %>images/back.jpg">
<!-- navigator -->

 

<div class="poss" style=" float: none; z-index: 1000; position: absolute; width: 20%; margin: 0 auto; left: 0px; right: 0px; "  >
<div class="poss" style=" float: none; z-index: 1000; position: absolute; width: 20%; margin: 0 auto; left: 0px; right: 0px; "  ><div class="poss" style=" float: none; z-index: 1000; position: absolute; width: 20%; margin: 0 auto; left: 0px; right: 0px; "  ><div class="poss" style=" float: none; z-index: 1000; position: absolute; width: 20%; margin: 0 auto; left: 0px; right: 0px; "  ><div class="poss" style=" float: none; z-index: 1000; position: absolute; width: 20%; margin: 0 auto; left: 0px; right: 0px; "  >
  
  
  
</body>

</html>

在上面附带的代码中，所有具有“poss”类的图像一起跟随螺旋路径。我希望每个图像从中心开始动画，一个接一个地跟随螺旋，当图像在螺旋中移动时，动画将停止。

Answer 1

首先创建要设置动画的图像列表。这可以通过简单地定义一个全局数组并将所有图像对象推入其中来实现（版本A）

var allImages = new Array();
function initAnimation(){
  $('.poss img').each(dunction(i,e){
    allImages.push(e);
  });
}

或向所有人添加属性，稍后通过属性（版本B）

选择它们

function initAnimation(){
  $('.poss img').attr('notAnimatedYet', true);
}

第二步是定义一个移动图像的功能。并仅为第一张图像制作动画。完成此动画后，请使用下一个动画。

var t = 0;
var k=0;
function moveit() {
    t += 0.05;
    k=k+.001;
    var r = 100;
    var xcenter = 100;
    var ycenter = 100;
    var newLeft = Math.floor(xcenter + (r*k * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r *k* Math.sin(t)));
    var element;

    // Begin for Version A
    if(allImages.length == 0){
      return;
    }
    element = allImages.ushift();
    // End of Version A

    // Begin for Version B
    if($('.poss img[notAnimatedYet=true]')).length == 0){
      return;
    }
    element = $('.poss img[notAnimatedYet=true]')[0];
    $(element).attr('notAnimatedYet', false);
    // End of Version B


    $(element).animate({
        top: newTop,
        left: newLeft,
    }, 1, function() {
        moveit();
    });
  });
}

使用jquery一个接一个地通过螺旋路径移动具有相同类名的每个图像

1 个答案: