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. LuoguP7222 [RC-04] 信息学竞赛 题解

    Content 给定一个角 \(\alpha\),求 \(\beta=90^\circ-\alpha\). 数据范围:\(\alpha\in[-2^{31},2^{31}-1]\). Solution ...

  2. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

  3. 【OpenXml】Pptx的边框虚线转为WPF的边框虚线

    安装Openxml sdk 首先,我们先安装nuget的需要的有关的Openxml sdk,我们开源了解析pptx的Openxml拍平层,下面两种方式都可以安装: nuget包管理器控制台: Inst ...

  4. 高并发 IO 模型

    五种IO模型包括:阻塞IO.非阻塞IO.IO多路复用.信号驱动IO.异步IO. 阻塞IO模型: 不管是网络IO还是磁盘IO,对于读操作而言,都是等到网络的某个数据分组到达后/数据准备好后,将数据拷贝到 ...

  5. BBN+

    目录 motivation settings results motivation 观测用BBN的模式训练出来的模型, 配上不同的\(\alpha\), 结果会如何. settings Attribu ...

  6. On the Optimization of Deep Networks: Implicit Acceleration by Overparameterization

    目录 引 主要内容 定理1 Claim 1 Claim 2 定理2 证明 定理1的证明 Claim 1 的证明 Kronecker product (克罗内克积) Theorem 2 的证明 代码 A ...

  7. uniapp以及微信小程序中scroll-view隐藏滚动条 自定义滚动条

    隐藏滚动条 1.全局隐藏滚动条,在app.vue中 ::-webkit-scrollbar{ display: none; } 2.局部隐藏藏滚动条 样式没有使用scoped属性时, 否则无效. .u ...

  8. CS5216 DP转HDMI 1080P方案|CS5216参数|CS5216中文规格书

    Capstone CS5216是一款单端口/中继器,具有重新定时功能.它支持交流和直流耦合3.0-Gbps操作,可编程均衡和抖动清除.它包括DP电缆适配器寄存器,可用于识别电缆适配器的功能.这个抖动清 ...

  9. VUE3 之 click 事件

    1. 概述 老话说的好:努力帮别人解决难题,你的难题也就不难解决了. 言归正传,今天我们来聊聊 VUE3 的 click 事件的相关知识. 2. click 事件 2.1 实现数字递减 <bod ...

  10. Elasticsearch安装X-Pack插件

    Elasticsearch安装X-Pack插件, 基于已经安装好的6.2.2版本的Elasticsearch, 安装6.2.2版本的X-Pack插件. 1.下载x-pack的zip包到本地 https ...