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. CF475A Bayan Bus 题解

    Update \(\texttt{2020.10.6}\) 修改了一些笔误. Content 模拟一个核载 \(34\) 人的巴士上有 \(k\) 个人时的巴士的状态. 每个人都会优先选择有空位的最后 ...

  2. JAVA获取昨天、今天、明天等日期

    /** * 获取明天的日期字符串 * @return */ public static String tomorrowDateStr(){ Date date=new Date();//取时间 Cal ...

  3. 【LeetCode】379. Design Phone Directory 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 数组 日期 题目地址:https://leetcode ...

  4. 【LeetCode】505. The Maze II 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS 日期 题目地址:https://leetcod ...

  5. 【九度OJ】题目1182：统计单词 解题报告

    [九度OJ]题目1182:统计单词 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1182 题目描述: 编一个程序,读入用户输入的,以 ...

  6. 【LeetCode】219. Contains Duplicate II 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 使用set 使用字典 日期 题目地址:https:/ ...

  7. Mysterious For(hdu4373)

    Mysterious For Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  8. python学习第六天：python基础（条件判断、循环）

    条件判断 格式 if <条件判断1>: <执行1> elif <条件判断2>: <执行2> elif <条件判断3>: <执行3> ...

  9. MySQL 中常见的时间类型有三种 DATE, DATETIME 和 TIMESTAMP

    MySQL 中常见的时间类型有三种 DATE, DATETIME 和 TIMESTAMP,其中 DATE 类型用于表示日期,但是不会包含时间,格式为 YYYY-MM-DD,而 DATETIME 和 T ...

  10. 编写Java程序，车站只剩 50 张从武汉到北京的车票，现有 3 个窗口售卖，用程序模拟售票的过程，使用Runnable解决线程安全问题

    查看本章节 查看作业目录 需求说明: 车站只剩 50 张从武汉到北京的车票,现有 3 个窗口售卖,用程序模拟售票的过程,要求使用同步方法保证售票过程中票数的正确性 实现思路: 创建 Java 项目,在 ...