js制作图片跟随鼠标移动

<!DOCTYPE html>

<html>


<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

img{position: abso

lute;}

</style>

</head>

<body>

<img src="滑稽.webp" >

<script type="text/javascript">

let img = document.querySelector('img')         //获取img标签

// console.log(img)

document.addEventListener('mousemove',function(e){ //悬浮时

let x = e.clientX //获取x轴

let y = e.clientY //获取y轴

img.style.top = y + 'px' //添加样式

img.style.left = x + 'px' //添加样式

})

</script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • function badAD(html){ if(document.getElementById("styy"))...
    f675b1a02698阅读 358评论 0 0
  • 第七周到第十三周知识复习笔记 第七周 JS盒子模型client类offset类scroll类 字符串search(...
    果木山阅读 275评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,749评论 1 45
  • 🤪 https://lanhai1.github.io/archives/ 👈 个人博客 一、什么是webAPI?...
    蓝海00阅读 6,862评论 1 34
  • 1 放大镜实例 页面结构:创建左右两个容器,左边容器中添加一张图片背景图,右边容器中添加一张与背景图成比例放大的图...
    果木山阅读 307评论 0 0