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. 大学MOOC课程视频下载、流文件合并、批量重命名、ｂ站视频下载及学习课程视频推荐

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

  2. 小白误入(<<<绝没有针对>>>)企业级架构介绍与IP tables防火墙介绍

    内容详细 架构图 架构图详解 架构: 把一个整体(完成人类生存的所有工作)切分成不同的部分(分工),由不同角色来完成这些分工,并通过建立不同部分相互沟通的机制,使得这些部分能够有机的结合为一个整体,并 ...

  3. 【LeetCode】246. Strobogrammatic Number 解题报告(C++)

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

  4. 【LeetCode】342. Power of Four 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 迭代 位运算 函数法 日期 [LeetCode ...

  5. 【LeetCode】886. Possible Bipartition 解题报告（Python）

    [LeetCode]886. Possible Bipartition 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu ...

  6. 【LeetCode】611. Valid Triangle Number 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/valid-tri ...

  7. 《Head First设计模式》读书笔记

    前言:本文是记录我在阅读<Head First设计模式>这本书时,做得相关笔记,相关示例代码地址:design-patterns.由于本书不是将设计原则和设计模式分开讲述的,而是在讲一个设 ...

  8. MySQL8.0的下载与安装

    下载 进入官网的下载页面 点击下图中的链接 可以选择上边的 Community Server ,那样会下载压缩包,这里我选择下边的 Installer for Windows ,下载的是安装包 点击下 ...

  9. html+css+JavaScript实现爱恩斯坦棋游戏

    title: "html+css+JavaScript实现爱恩斯坦棋游戏" author: Sun-Wind date: December 30, 2021 背景:本贴将基于前端的 ...

  10. Vue.js高效前端开发 • 【Vue基本指令】

    全部章节 >>>> 文章目录 一.Vue模板语法 1.插值 2.表达式 3.指令概述 4.实践练习 二.Vue绑定类样式和内联样式 1.Vue绑定类样式 2.Vue绑定内联样式 ...