通過螺旋路徑一個在另一個使用jquery

enter image description here 通過螺旋路徑一個在另一個使用jquery

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」所有圖像都遵循螺旋路徑在一起之後移動用相同的類名的每個的圖像。我希望每個圖像都從中心開始動畫，隨着螺旋一個接一個地進行，當圖像在螺旋中移動時，動畫將停止。

來源

2016-09-21 Nidhin C B

幫助我找到上述代碼的解決方案。請.. –

首先創建一個要動畫的圖像列表。這可以通過簡單地進行定義一個全局陣列和所有的圖像對象推到它（版本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(); 
    }); 
    }); 
}

來源

2016-09-21 11:40:01 Marcus

通過螺旋路徑一個在另一個使用jquery

回答

相關問題