圍繞中心圖像浮動圖像

Question

我搜索了幾天的javascript動畫庫，還搜索了這種帶有浮動字符串的 css示例，這些字符串帶有附加到中心圖像的字符串。 首先，我嘗試使用此示例中的代碼，但找不到動畫旋轉函數的方法，因此圖像（在此示例中為按鈕）將圍繞居中的按鈕浮動並附加一個字符串。 我希望我能表達自己的觀點，並且我也恢復了問題最后部分的所有內容。

這是該示例的jQuery代碼：

var angleStart = -360;

// jquery rotate animation
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
    step: function(now) {
        $(li)
           .css({ transform: 'rotate('+now+'deg)' })
           .find('label')
              .css({ transform: 'rotate('+(-now)+'deg)' });
    }, duration: 0
});
}

// show / hide the options
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
    var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
    $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}

$('.selector button').click(function(e) {
toggleOptions($(this).parent());
});

setTimeout(function() { toggleOptions('.selector'); }, 100);

此功能可對從中心繞中心圓旋轉的圓進行動畫處理。

因此，恢復該堆棧問題：

我需要浮動（這意味着它們將在x和y上移動，但有一個限制，因此它們不會與其他圖像重疊）img圍繞居中的img附加到此img所示的字符串中。
我需要在用戶滾動時顯示它們，我嘗試使用on（'scroll'，...），但本示例使用此toggleOptions並傳遞了我不理解的“ s”參數。
如果您能向我展示一種在浮動img和中心img之間畫一條線的方法，那將是很好的。

Answer 1

我實際上能夠使用p5.js做到這一點。 這是CodePen 。 如果有人要克隆它，我將其放在我的github上並鏈接到這里。

編輯： Github鏈接

這是JavaScript代碼：

var canvas;
var width = window.innerWidth;
var height = window.innerHeight;
let angle = 0;
var unitSize = [125,125,125,125,125,125,125,125,125];
var xoff = [0,1,2,3,4,5,6,7,8];
var x = [0,1,2,3,4,5,6,7,8];
var circles = [0,1,2,3,4,5,6,7,8];
var images = [0,1,2,3,4,5,6,7,8];

// function preload(){
//  images[0] = loadImage('images/img0.jpg'); 
//  images[1] = loadImage('images/img1.jpg');
//  images[2] = loadImage('images/img2.jpg');
//  images[3] = loadImage('images/img3.jpg');
//  images[4] = loadImage('images/img4.jpg');
//  images[5] = loadImage('images/img5.jpg');
//  images[6] = loadImage('images/img6.jpg');
//  images[7] = loadImage('images/img7.jpg');
//  images[8] = loadImage('images/img8.jpg');
//  images[9] = loadImage('images/img9.jpg');
// }

function setup() {
  canvas = createCanvas(window.innerWidth, window.innerHeight);       
  //use WEBGL when using texture()
  canvas.parent("canvas"); 
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

//if you don't want to spin it when scroll delete this
function mouseWheel(event) {
  angle += (event.delta)*0.001;
}


function draw() {
  //delete this line when using WEBGL
  translate(width/2,height/2);
  noStroke();
  background( 255 );
  fill(126);
  ellipse(0, 0, 260, 260); 
  //texture(images[9]);
  //rotate the black ellipses
  rotate(angle);
  //rotation speed
  angle = angle + 0.0007;
  //using noise() to get smooth random x values and using xoff to get different random values for each black ellipse
  for (var i = x.length - 1; i >= 0; i--) {
    x[i] = map(noise(xoff[i]), 0 , 1 , 200 , 230);
    xoff[i] += 0.01;
  }
  //draw the black ellipses
  for( var i = 0; i < circles.length; i++) {
    rotate( TWO_PI/9.0 );
    //texture(images[i]);
    stroke(0);
    line( 0, 0,x[i],0);   
    fill(0);
    //draw each ellipse with different x value
    ellipse( x[i], 0, unitSize[i], unitSize[i] ); 
  }  
}

這是HTML代碼：

（但不要忘記導入腳本）

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
      <style> body {padding: 0; margin: 0;} </style>
    </head>
    <body>
      <div id="canvas" style="height: 100%;width: 100%"></div>
    </body>
  </html>

圍繞中心圖像浮動圖像

問題描述

1 個解決方案

解決方案1
1 已采納 2018-08-17 19:16:19

圍繞中心圖像浮動圖像

問題描述

1 個解決方案

解決方案1 1 已采納 2018-08-17 19:16:19

解決方案1
1 已采納 2018-08-17 19:16:19