JS鼠标移动显示图片

1、鼠标不断移动，使用鼠标移动事件：mousemove

如果用的是mouseover的话，会造成鼠标移动过快，而无法显示的问题

2、在页面中移动，给document注册事件

3、图片要移动距离，而且不占位置，因此使用绝对定位

4、核心：每次鼠标移动，都会得到最新的鼠标坐标，把这个X和Y坐标作为图片的top和left值就可以实现移动图片

img.style.left = 'e.clientX '

img.style.top = 'e.clientY '

无法实现，应该不加引号，因为拿的是变量；其次需要加px

img.style.left = e.clientX + 'px'

img.style.top = e.clientY + 'px'

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 100px;height: 100px;/* 定位 */position: absolute;/* top: 300px;left: 100px */}</style>
</head><body><!-- 在文档中插入gif图片 --><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180810%2F0e343a9d87cd4cfeb32aa24b2cf676d9.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648473928&t=73a19d6fe6f1a24a6607f60b432ca490"alt=""><script>//获取鼠标的位置，来改变图片定位的位置var img = document.querySelector('img')document.addEventListener('mousemove', function(e) {img.style.left = e.clientX + 'px'img.style.top = e.clientY + 'px'})</script>
</body></html>

页面中的坐标必须带上单位

需要隐藏鼠标的话：在样式中加入

        * {cursor: none;}

让鼠标位于图片的中心：图片往上走图片高度的一半，往左走图片宽度的一半

            img.style.left = e.clientX - 50 + 'px'img.style.top = e.clientY - 50 + 'px'

JS鼠标移动显示图片相关推荐

html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
rp原型中鼠标悬停显示图片_悬停状态原型4种方式
rp原型中鼠标悬停显示图片 There are tons of options available for UX designers to prototype a user experience an ...
php鼠标悬停显示图片,鼠标滑过出现预览的大图提示效果
当鼠标滑过图片时,图片会出现预览的大图,大图下面还会有介绍文字. .aa{ width:88px; height :100px; } $(function () { var x = 10; var y ...
鼠标悬浮显示图片和文字
1.引入jquery-1.11.0.min.js.配置文件config.js.业务js screen.js: 页面代码: <!DOCTYPE html> <html><h ...
html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...
java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
JS鼠标滑过图片时切换图片
http://www.aichengxu.com/article/Javascript/277_7.html 在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里豆芽说说这 ...
鼠标悬停显示图片html5,JavaScript 鼠标悬停图片，显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下世界上最 ...

JS鼠标移动显示图片

JS鼠标移动显示图片相关推荐

最新文章

热门文章