0

最近项目需要用到类似这个网站的一个效果:
https://www.steven-hanley.com/
需要改变鼠标指针,并且移动到某个地方会有放大或者消失之类的交互效果。
我尝试使用了常见的CSS cursor 属性,完全达不到预期的效果,想请教一下各位这种是如何实现的?

Kinsey 3
2019-05-13 提问

1 个回答

0

已采纳

这个需要用js控制啦,我写了个demo,你可以看看

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}
</style>

<body>
</body>
<script>
function creatDom() {
  var div = document.createElement('div');
  var body = document.getElementsByTagName('body')[0];
  console.log(body);
  div.id = "fuck";
  div.style.position = 'absolute';
  div.style.width = "50px";
  div.style.height = "50px";
  div.style.border = "2px solid red";
  div.style.borderRadius = "100%";
  div.style.display = "none";
  body.appendChild(div);
}

function follow() {
  var body = document.getElementsByTagName('body')[0];
  var mouse = document.getElementById('fuck');
  body.onmousemove = function(e) {
    mouse.style.display = 'block';
    followCursor(mouse,e);
  };
  body.onmouseleave = function(){
    mouse.style.display = 'none';
  }
}
function followCursor(mouse,e) {
  mouse.style.left = e.clientX - 25 + 'px';
  mouse.style.top = e.clientY - 25 + 'px';
}
window.onload = function() {
  creatDom();
  follow()
}
</script>

</html>

推广链接