Javascript实现让图片一直跟着鼠标移动
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实现让图片一直跟着鼠标移动的更多相关文章
- Javascript实现让小图片一直跟着鼠标移动
Javascript实现让小图片一直跟着鼠标移动实例 注意:图片可能加载不出来,注意更换 <!doctype html> <html> <head> <met ...
- JS---案例：图片跟着鼠标飞的最终版本
案例:图片跟着鼠标飞的最终版本 换了个好看的糖果照片,想给博客首页加上,但是加上后,应该是overwrite原来的html,所以光有鼠标跟着飞的效果,原来的功能都不能用了 放入common.js &l ...
- jQuery 图片跟着鼠标动
html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...
- 模拟拖拽图片 碰撞检测 DOM 鼠标事件 闭包
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- js跟着鼠标移动的文字
废话不多说,直接上代码,有注释: <head> <title></title> <style type="text/css"> sp ...
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- JS---案例：图标跟着鼠标飞(有bug)
案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
- 用javascript协助导入图片
用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...
随机推荐
- CF1454B Unique Bid Auction 题解
Content 给定一个长度为 \(n\) 的数列 \(\{a_i\}_{i=1}^n\),请找出在数列中仅出现一次的最小的数的位置. 数据范围:\(t\) 组询问,\(1\leqslant t\le ...
- maven 常用编译
mvn -B clean package -Dspecific -DskipTests -P test
- go:遍历获取gin请求的所有参数
背景:为了提高程序的通用性,需要将前端request中请求的参数,包含表单参数全部取到. 代码: 1 func DataMapByRequest(c *gin.Context)(dataMap map ...
- 解决VMware开机黑屏问题
最近搞虚拟机.一直遇见了许多问题.发现某一天.VMware开机后.其中一个虚拟机直接卡住黑屏了.关的时候就一直显示.xxx繁忙.无法关闭.网上搜到了解决方法.这边记录一下. 1.关闭所有服务 2.修复 ...
- SpringBoot整合logback日志框架
在resource下创建一个名称为 logback-spring.xml文件 <configuration> <!--日志文件夹存放的名称--> <contextName ...
- 平衡二叉树判定方法（c++）实现
!!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist -- 欢迎指正-- 平衡二叉树特点: 任意一个结点的平衡因子(左子树高度 - 右子树高度)的 ...
- 【九度OJ】题目1194：八进制 解题报告
[九度OJ]题目1194:八进制 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1194 题目描述: 输入一个整数,将其转换 ...
- 【LeetCode】648. Replace Words 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 set 字典 前缀树 日期 题目地址:https:/ ...
- Consistency Regularization for GANs
目录 概 主要内容 Zhang H., Zhang Z., Odena A. and Lee H. CONSISTENCY REGULARIZATION FOR GENERATIVE ADVERSAR ...
- Java语言程序设计复习提纲
这是我在准备Java考试时整理的提纲,如果是通过搜索引擎搜索到这篇博客的师弟师妹,建议还是先参照PPT和课本,这个大纲也不是很准确,自己总结会更有收获,多去理解含义,不要死记硬背,否则遇到概念辨析题 ...