设置图片跟随鼠标移动

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


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {top: 5px;left: 5px;position: absolute;}</style>
</head><body><img src="data:images/angel.gif" alt=""><script>// 1、mousemove只要鼠标移动1px   就会触发这个事件var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {var x = e.pageX;var y = e.pageY;console.log(x);// 减数是为了让图片居中对齐pic.style.left = x - 45 + 'px';pic.style.top = y - 35 + 'px';})</script>
</body></html>

设置图片跟随鼠标移动相关推荐

图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
图片跟随鼠标移动效果的抖动问题
场景图片跟随鼠标移动效果的实现思路: 触发mousemove事件响应时,通过e.offsetX,e.offsetY获取到当前鼠标的位置.再修改图片的css样式中的top, left属性(图片采用绝对 ...
html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
实现图片跟随鼠标移动
下面代码可以实现图片跟随鼠标移动 <html> <head><meta charset="utf-8"><title></ti ...
图片跟随鼠标移动案例
文献种类:专题技术总结文献开发工具与关键技术: DW前端技术作者:彭学员 :年级:2004 :撰写时间:2021 年 5 月 17日文献编号: ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...
利用javaScript+css实现图片跟随鼠标联动效果页面
以前做小型的项目的时候总想着可以做一个很炫酷的主页面来,以前做过一个汽车销售管理系统的主页面,觉得很不错.虽然写这个的人不是我,但是我们觉得可以保存下来以便日后使用和参考.先看一下效果图!这个是可以跟 ...
iTerm2 菜单设置焦点跟随鼠标
焦点跟随鼠标参考 iTerm2 for MacOS(终端模拟器/终端仿真器/命令终端工具)设置详解
图片跟随鼠标样式跟随效果（附完整代码及效果）
Demo效果如下: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset ...

设置图片跟随鼠标移动

设置图片跟随鼠标移动相关推荐

最新文章

热门文章