Javascript实现让图片一直跟着鼠标移动

注意：图片可能加载不出来，还请及时更换图片

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>永恒之月</title>

<style>

body {

	margin: 0;

	padding: 0;

	height: 3000px;    /*让滚动条出现*/

}

	img{

		/*一定要position:fixed;因为这样不仅可以摆脱文档流限制，而且可以让有滚动条的页面也生效*/

		position:fixed;

		width: 30px;

		height: 30px;

		left: 100px;

		top: 100px;

		display: none;

	}

</style>

</head>

<body>

<img src="https://images.cnblogs.com/cnblogs_com/blogs/724675/galleries/2096407/t_220118083946_fire2.png">    <!--设置图片链接-->

<script>

	//获取图片元素

    var imgBox=document.querySelector("img")	

    //给document设置鼠标移动事件，其中e是鼠标移动时保存信息的对象

	document.onmousemove=function(e){

        //从e对象中获取鼠标的横纵坐标

		var x=e.clientX

		var y=e.clientY

		console.log(x,y)  //输出横纵坐标

        //给图片设置行内样式使图片跟着鼠标移动

		imgBox.style.top=y+5+'px'

		imgBox.style.left=x+5+'px'

		imgBox.style.display="block"	//图片显示

	}

	</script>

</body>

</html>

Javascript实现让图片一直跟着鼠标移动的更多相关文章

  1. Javascript实现让小图片一直跟着鼠标移动

    Javascript实现让小图片一直跟着鼠标移动实例 注意:图片可能加载不出来,注意更换 <!doctype html> <html> <head> <met ...

  2. JS---案例：图片跟着鼠标飞的最终版本

    案例:图片跟着鼠标飞的最终版本 换了个好看的糖果照片,想给博客首页加上,但是加上后,应该是overwrite原来的html,所以光有鼠标跟着飞的效果,原来的功能都不能用了 放入common.js &l ...

  3. jQuery 图片跟着鼠标动

    html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...

  4. 模拟拖拽图片 碰撞检测 DOM 鼠标事件 闭包

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. js跟着鼠标移动的文字

    废话不多说,直接上代码,有注释: <head> <title></title> <style type="text/css"> sp ...

  6. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  7. JS---案例：图标跟着鼠标飞(有bug)

    案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  8. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  9. 用javascript协助导入图片

    用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...

随机推荐

  1. CF1108A Two distinct points 题解

    Content 有 \(q\) 次询问,每次询问给定四个数 \(l_1,r_1,l_2,r_2\).对于每次询问,找到两个数 \(a,b\),使得 \(l_1\leqslant a\leqslant ...

  2. LuoguP7398 [COCI2020-2021#5] Šifra 题解

    Content 给定一个长度 \(n\) 的只包含小写字母和 \(0\sim9\) 的字符串(字符串中的字母可视为分隔符).求字符串中包含多少个不同的数字. 数据范围:\(1\leqslant n\l ...

  3. 大学MOOC课程视频下载、流文件合并、批量重命名、ｂ站视频下载及学习课程视频推荐

    计算机行业技术更新快,编程语言种类多,在当今大数据和人工智能的时代,为了能在相关领域有所成就,就必须掌握好python.R等语言,较好的数学基础和深入的行业背景知识.计算机从业人员务必践行" ...

  4. Python3 json &pickle 数据序列化

    json 所有语言通用的信息交换格式 json.dumps()将list列表.dict字典.元组.函数等对象转换为可以存储的字符格式存入文件 json.dump(数据对象名,已以写方式打开的对象) 直 ...

  5. 以太网/ IPV4/IPV6包头，TCP包头格式回顾

    问题:以太网数据包,承载的数据内容大小46~1500字节,是如何来的? 以太网数据包结构  以太网协议规定最小链路层数据包(帧)为64字节,其中以太网首部+尾部共计18字节(源/目的MAC12字节:上 ...

  6. SQL注入绕过

    空格字符绕过 %09 TAB建(水平) %0a 新建一行,换行 %0b TAB建(垂直) %0c 新的一页 %0d return 功能 %a0 空格 %00 /**/ /*!*/./*!50009*/ ...

  7. cmake之指定clang(++)编译器为默认编译器

    1.说明 本文演示环境的cmake版本3.18 clang是自己源码安装的,非获取已经编译好的binary 2.代码 2.1 添加下面的代码到CMakeLists.txt中,且放到 project语句 ...

  8. 【Android开发】找乐，一个笑话App的制作过程记录

    缘起 想做一个笑话App的原因是因为在知乎上看过一个帖子,做Android可以有哪些数据可以练手,里面推荐了几个数据开放平台.在这些平台中无一不是有公共的笑话接口,当时心想这个可以拿来练手啊,还挺有意 ...

  9. 【九度OJ】题目1198：a+b 解题报告

    [九度OJ]题目1198:a+b 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1198 题目描述: 实现一个加法器,使其能 ...

  10. 【剑指Offer】合并两个排序的链表 解题报告（Python）

    [剑指Offer]合并两个排序的链表 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://www.nowcoder.com/ta/coding-interview ...