基于鼠标位置旋转斜线

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// Establish slashes, their size, and max width of field
var $slash = $('#slash');
var slashW = 36;
var slashH = 36;
var maxW = 1240;

// Draw the slashes
$('.slashfield').each(function(e) {
  var rows = $(this).data('rows');
  var slashAmount = rows*(maxW / slashW);
  var fieldW = $(this).width();
  
  $(this).height(slashH*rows);
  
  for(var i = 0;i < slashAmount; i++) {
    $(this).append('<svg class="slash" aria-hidden="true" role="image"><use xlink:href="#slash"/></svg>')
  }
});
// Get the drawn slashes and their size
var slashes = $('.slash');
var slashesW = slashes.outerWidth();
var slashesH = slashes.outerHeight();

// Track Mouse Movement
// Event throttling
var lastMove = 0;
var eventThrottle = 10;
$(window).on('mousemove', function(e) {
  e.preventDefault();
  var now = Date.now();
  if (now > lastMove + eventThrottle) {
    lastMove = now;
    var mousePos = {
      x: e.pageX,
      y: e.pageY
    }

slashes.each(function(e) {
      var slash = $(this);

var slashPos = {
        x: slash.offset().left + slashesW / 2,
        y: slash.offset().top + slashesH / 2
      }

var angle = (Math.atan2(mousePos.y - slashPos.y, mousePos.x - slashPos.x) * 180 / Math.PI) - 90;
      if(angle >= 360) {
        angle -= 360;
      }
      // Change transformation
      slash.css('transform', 'rotate('+angle+'deg)');
    });
  }
});

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