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="img/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> <me ...

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

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

  3. 一天JavaScript示例-点击图片显示大图片添加鼠标

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

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

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

  5. jQuery 图片跟着鼠标动

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

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

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

  7. 【前端】特效-Javascript实现购物页面图片放大效果

    实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...

  8. ( 译、持续更新 ) JavaScript 上分小技巧(四)

    后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...

  9. ( 译、持续更新 ) JavaScript 上分小技巧(三)

    最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...

随机推荐

  1. LuoguP2108 学英语 题解

    Content 给出整数 \(x\) 的英文写法,求出这个整数 \(x\). 规则详见题面. 数据范围:\(|x|\leqslant 999999999\)(\(9\) 个 \(9\)). Solut ...

  2. LuoguB2008 计算 (a+b)×c 的值 题解

    Content 输入 \(a,b,c\),输出 \((a+b)\times c\). 数据范围:\(-10000<a,b,c<10000\). Solution 关于 C++ 运算顺序可以 ...

  3. LuoguB2147 求 f(x,n) 题解

    Content 求给定 \(x,n\),求 \(f(x,n)=\sqrt{n+\sqrt{(n-1)+\sqrt{(n-2)+\sqrt{\dots+2+\sqrt{1+x}}}}}\) 的值. So ...

  4. JS设置网站所有字体变为繁体字

    引入chinese.js var zh_default='n';var zh_choose='t';var zh_expires=7;var zh_class='zh_click';var zh_st ...

  5. c++设计模式概述之适配器

    类写的不规范(应该屏蔽类的拷贝构造函数和运算符=).少写点代码,缩短篇幅,重在理解. 实际中可不要这样做. 类比生活中的手机,pad等电源适配器. 简单来讲: 将原本  不匹配  的两者  变的匹配  ...

  6. C. Success Rate

    Success Rate 题目链接 题意 给你两个分数形式的数,然后有两种变化方式 上下都+1 仅下面部分+1 让你求第一个分数变化到第二个分数的最小步数. 思路 有几种特殊情况分类讨论一下. 首先我 ...

  7. 【剑指Offer】数据流中的中位数 解题报告（Python）

    [剑指Offer]数据流中的中位数 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews ...

  8. CS5265 demoboard|CS5265测试板电路参考|CS5265 Typec转HDMI 4K60HZ方案

    CS5265是TYPEC转HDMI2.0音视频转换芯片,CS5265符合DP1.4协议,且输出的视频信号是HDMI2.0 即4K60HZ  CS5265集成了DP1.4兼容接收机和HDMI2.0b兼容 ...

  9. CS5216PIN TO PIN替换PS8402A方案|PS8402A电路设计原理图|CS5216芯片

    PS8402A是HDMI 电平移位器/中继器专为2型双模Display Port(DP++)电缆适配器应用而设计.它设计用于Display Port到DVI或Display Port到HDMI的2型适 ...

  10. Java网络编程Demo，使用TCP 实现简单群聊功能GroupchatSimple，多个客户端输入消息，显示在服务端的控制台

    效果: 服务端 客户端 实现代码: 服务端 import java.io.IOException; import java.net.ServerSocket; import java.net.Sock ...