您的位置：首页 > Web前端 > JavaScript

js实现鼠标跟随效果

2018-01-01 11:17 531 查看

在平时开发中，实现鼠标跟随效果并不是很常见，但是在一些个人博客和个人网站中这个效果有时候会用到

有些游戏网站中也会用到这个效果。这里分享的是一个例子。代码如下，，

注意我这里跟随的是一个图片，也可以根据需要把图片改成自己需要的

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style>

* {

margin: 0;

padding: 0

}

img {

position: absolute;

top: 0;

left: 0;

}

</style>

</head>

<body>

<img src="001.jpg" alt="" width="50" height="50" id="pic"/>

<script>

var timer = null;

var pic = document.getElementById("pic");

//在页面上点击的时候获取鼠标在页面上的位置让图片慢慢到这个位置

document.onmousemove = function (event) {

clearInterval(timer);

var event = event || window.event;

//获取鼠标在页面上的位置

var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;

var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;

//让图片慢慢到这个位置

timer = setInterval(function () {

//step = (target - leader) / 10

//leader = leader + step

var targetX = pageX - pic.offsetWidth / 2;//水平方向的目标

var targetY = pageY - pic.offsetHeight / 2;//

var leaderX = pic.offsetLeft;//水平方向的当前位置

var leaderY = pic.offsetTop;//

var stepX = (targetX - leaderX) / 10;

var stepY = (targetY - leaderY) / 10;

stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);

stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);

leaderX = leaderX + stepX;

leaderY = leaderY + stepY;

pic.style.left = leaderX + "px";//单位一定不要忘记

pic.style.top = leaderY + "px";//单位一定不要忘记

if (leaderX === targetX && leaderY === targetY) {

clearInterval(timer);

}

}, 1);

};

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 前端开发

相关文章推荐

新的分享

章节导航