前言

用html+css+JavaScript实现了一个图片鼠标跟随效果

一、思路

鼠标不断的移动，使鼠标移动事件：mousemove；
在页面中移动，给document注册事件；
图片要移动距离，而且不占位置，我们可以使用绝对定位；
核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x轴和y轴坐标作为图片的top和left值就可以移动图片。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><style>img {position: absolute;top: 2px;max-width: 100px;height: auto;cursor: none;}</style>
</head><body><img src="../images/curry2.png" alt="" />
</body>
<script>var pic = document.querySelector('img');document.addEventListener('mousemove', function (e) {var x = e.pageX;var y = e.pageY;pic.style.left = x - 50 + 'px';pic.style.top = y - 50 + 'px';});
</script></html>

代码解析：

当鼠标在页面上移动时，通过监听document的mousemove事件，获取鼠标的坐标pageX和pageY，并将图片的位置设置为鼠标坐标减去50像素（因为我这个图片设置的是100*100，减去50就会使鼠标居中）。通过这样的方式，就可以实现图片跟随鼠标移动的效果。需要注意的是，这段代码前提是页面上存在一个img元素，代码中使用document.querySelector方法获取该元素。

效果

上面这个curry就变成我的鼠标啦！！！！！

mousemove实现图片鼠标跟随效果相关推荐

js实现鼠标跟随效果
在平时开发中,实现鼠标跟随效果并不是很常见,但是在一些个人博客和个人网站中这个效果有时候会用到有些游戏网站中也会用到这个效果.这里分享的是一个例子.代码如下,, 注意我这里跟随的是一个图片,也可以根 ...
鼠标跟随 html,鼠标跟随效果.html
鼠标跟随效果 .mouse-container{ background: #000; width: 800px; margin:20px auto; } table > tr > td { ...
php鼠标跟随特效,原生js实现鼠标跟随效果
鼠标跟随效果 *{margin: 0;padding: 0;} img{position:absolute;top:0;left:0;} (function(window){ // 获取对象 var ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
【js】鼠标跟随效果
1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要:元素的left位置 = 鼠标当前 ...
怎么给html增加鼠标跟随,js实现简单鼠标跟随效果的方法
本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动. 要点一: var oEvent = evt ...
纯 CSS 实现鼠标跟随效果
欢迎微信关注Jerome blog,用技术的心去生活鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为. ...
Revit二次开发之“PromptForFamilyInstancePlacement()函数动态拖动/鼠标跟随”效果
布置设备的时候,希望有个拖动的效果,这个函数可以实现. //跟随鼠标拖动效果 [Transaction(TransactionMode.Manual)] [Regeneration(Regenerat ...
鼠标跟随效果html,javascript 鼠标跟随特效代码及理解
javascript 鼠标跟随特效 *{ margin: 0; padding: 0; } body{ height: 1000px; } div{ width: 50px; height: 50px ...

mousemove实现图片鼠标跟随效果

前言

一、思路

代码如下：

代码解析：

效果

mousemove实现图片鼠标跟随效果相关推荐

最新文章

热门文章