Svg Web交互

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

//////////////////////////////////////// variables

var svg = document.getElementById('svg');
var dotMatrix = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
var dots = [];
var lineMatrix = document.createElementNS("http://www.w3.org/2000/svg", 'line');
var lines = [];
var dotNumber = 200;
var lineNumber = 10;

var screenW;
var screenH;
var dotColumns;
var dotRows;
var dotRandomMax = 2;

var mouseMoving = false;
var mouse = {};
    mouse.distances = [];
    mouse.power = 10;

//////////////////////////////////////// init

function init() {
  console.log('--- init')
  screenW = window.innerWidth;
  screenH = window.innerHeight;

dotRows = Math.sqrt(dotNumber * (screenH / screenW));
  dotColumns = dotNumber / dotRows;
  var dotPosStepX = Math.round(screenW / dotColumns);
  var dotPosStepY = Math.round(screenH / dotRows);
  dotRows = Math.round(dotRows);
  dotColumns = Math.round(dotColumns);
  console.log('--- calc done');

for (i = 0, j = 0, k = 0; i < dotNumber; i++, k++) {
    if (i % dotColumns === 0) {
      j++;
      k = 0;
    }
    dots[i] = {};
    dots[i].distances = [];
    dots[i].el = dotMatrix.cloneNode(false);
    dots[i].X = k * dotPosStepX + dotPosStepX / 2;
    dots[i].X += Math.floor((Math.random() * dotRandomMax) + 1 - dotRandomMax / 2);
    dots[i].Y = j * dotPosStepY - dotPosStepY / 2;
    dots[i].Y += Math.floor((Math.random() * dotRandomMax) + 1 - dotRandomMax / 2);
    dots[i].r = 1;
    dots[i].lines = [];
    dots[i].el.setAttribute('cx', dots[i].X);
    dots[i].el.setAttribute('cy', dots[i].Y);
    dots[i].el.setAttribute('r', dots[i].r);
    svg.appendChild(dots[i].el);
    for(l=0;l<lineNumber;l++) {
      dots[i].lines[l] = {};
      dots[i].lines[l].el = lineMatrix.cloneNode(false);
      dots[i].lines[l].X1 = dots[i].X;
      dots[i].lines[l].Y1 = dots[i].Y;
      dots[i].lines[l].X2 = dots[i].X;
      dots[i].lines[l].Y2 = dots[i].Y;
      dots[i].lines[l].el.setAttribute('x1', dots[i].lines[l].X1);
      dots[i].lines[l].el.setAttribute('y1', dots[i].lines[l].Y1);
      svg.appendChild(dots[i].lines[l].el);
    }
  }
  console.log('--- dots positioned');

}

function destroy(){
  
  while (svg.firstChild) {
    svg.removeChild(svg.firstChild);
}
  dots.length = 0;
  lines.length = 0;
  console.log('--- destroying')
}

init();

//////////////////////////////////////// update dots and lines position

//////////////////////////////////////// helpers

function getDistance(obj1, obj2) {
  return Math.floor(Math.sqrt(Math.pow((obj1.X - obj2.X), 2) + Math.pow((obj1.Y - obj2.Y), 2)));
}

function Comparator(a, b) {
   if (a[1] < b[1]) return -1;
   if (a[1] > b[1]) return 1;
   return 0;
 }

//////////////////////////////////////// movement function

//////////////////////////////////////// mouse interaction function

//////////////////////////////////////// listeners

var initInterval = setInterval(function(){
  moveDots();
  mouseInteraction();
}, 20);

svg.addEventListener('mousemove', function(e){
  mouseMoving = true;
  mouseX = e.pageX;
  mouseY = e.pageY;
});

window.addEventListener('resize', function(){
  destroy();
  init();
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg