JavaScript实现图片跟随鼠标

最新推荐文章于 2022-07-02 08:30:00 发布

闽江小张

最新推荐文章于 2022-07-02 08:30:00 发布

阅读量298

点赞数

分类专栏：学习文章标签： javascript web app

本文链接：https://blog.csdn.net/weixin_46681371/article/details/106119729

版权

学习专栏收录该内容

55 篇文章 0 订阅

订阅专栏

**index.html**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蝴蝶移动</title>
    <link rel="stylesheet" href="./css.css">
</head>
<style>
   
</style>
<body>
    <div id="bee" >
    /*需要的图片*/
        <img src="hudie.gif" />
    </div>
    <button onclick="btnclick()">
        this is button 
    </button>
  
  
</body>
<script>
   
   methods:{
      function btnclick(){
        alert('click button')
      } 
    }
 
 
    var bee = document.getElementById("bee");
document.addEventListener("mousemove", getMouse);

bee.style.position = "absolute"; //css		
var beepos = {
  x: 0,
  y: 0
};

setInterval(followMouse, 50);

var mouse = {
  x: 0,
  y: 0
}; //mouse.x, mouse.y

var dir = "right";

function getMouse(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
  if (mouse.x > beepos.x) {
      dir = "right";
  } else {
      dir = "left";
  }
}

function followMouse() {
  //1. find distance X , distance Y
  var distX = mouse.x - beepos.x;
  var distY = mouse.y - beepos.y;

  beepos.x += distX / 5;
  beepos.y += distY / 2;

  bee.style.left = beepos.x + "px";
  bee.style.top = beepos.y + "px";

  if (dir == "right") {
      bee.setAttribute("class", "right");
  } else {
      bee.setAttribute("class", "left");
  }

}
</script>  
</html>

**css.css**

body {
    background-color: white;
}
img{
    width: 50px;
    height: 50px;
}
.left {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
.right {
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

**hudie.gif**

就会实现图片跟随鼠标的效果了。

闽江小张

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现图片跟随鼠标

**index.html**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>蝴蝶移动</title> <link rel="stylesheet" hre
复制链接

扫一扫