Question

LA24.org网站有一个侧面菜单，可响应鼠标光标的接近度和相对于菜单的位置。就像它们是磁铁一样，鼠标正在拉动菜单。

这是如何实现的？是否有任何库提供此行为？

Answer 1

我认为它是自定义代码。一种可行的方法是在菜单边缘使用画布来创建朝向鼠标的有机/磁性拉动效果。

在javascript中，您可以为mousemove事件添加一个监听器。在canvas元素中，您可以在特定阈值（当鼠标足够接近菜单时）朝向鼠标坐标绘制bezier曲线。如果鼠标几乎触摸菜单，则菜单会扩展。在这种情况下，当鼠标足够接近时，我在菜单中添加了一个类，这会激活菜单的左侧位置，使其滑入视图。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

function draw(x,y){
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.bezierCurveTo(x,y,x,y,0,400);
  ctx.fillStyle = '#000000';
  ctx.fill();
  ctx.stroke();    
}

document.addEventListener('mousemove', function(e){
  $(".container").removeClass('expand');
  if(e.x < 200 && e.x > 100){
    draw(200-e.x + 20, e.y);
  }
  else if(e.x < 100){
    $(".container").addClass('expand');
    draw(0,0);
  }else{
    draw(0,0);
  }
})

我制作了一个粗略的代码来展示它：http://codepen.io/peerbolte/pen/JRJdVo

LA24.org如何实现侧面菜单接近动画？

1 个答案: