前端路线--JavaScript篇（Day09）

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量382 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/123074277
版权

mouseEvent属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			#box{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
			.box2{
				height: 2000px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<div class="box2"></div>
		
		<script type="text/javascript">
		var box1=document.getElementById('box');
		box1.onclick=function (e) {
			//鼠标距离可视区(body)的位置
			console.log(e.clientX);
			console.log(e.clientY);
			
			//整个页面(包含被卷上去)的目标
			console.log('-------');
			console.log(e.pageX);
			console.log(e.pageY);
			
			//距离屏幕的位置
			console.log('------');
			console.log(e.screenX);
			console.log(e.screenY);
			
			//距离事件源的坐标
			console.log('------');
			console.log(e.offsetX);
			console.log(e.offsetY);
		}
			
		</script>
	</body>
</html>

案例–鼠标跟随

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			#follow{
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				left: 0px;
				top: 0px;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<div id="follow"></div>
		
		<script type="text/javascript">
			var box=document.getElementById('follow');
			//盒子要加定位
			//利用pageX和pageY给盒子设置top和left
			window.onmousemove=function (e) {
				box.style.left=e.pageX-box.offsetWidth/2+'px';
				box.style.top=e.pageY-box.offsetHeight/2+'px';
			}
		</script>
	</body>
</html>

元素的offset属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
			.father{
				width: 300px;
				height: 300px;
				background-color: blue;
				position: relative;
			}
			#son{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 30px;
				top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div id="son">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var son=document.getElementById('son');
		son.onclick=function() {
			//这是元素自身的属性，不需要e
			
			//元素相对于父元素（定位）的左偏移量         !包含自己的外边距!
			console.log(son.offsetLeft);
			console.log(son.offsetTop);
			
			//元素自身的宽高                           !包含pdding和border!
			console.log('-------');
			console.log(son.offsetWidth);
			console.log(son.offsetHeight);
			
			//父盒子(相对定位，或者body)
			console.log('------');
			console.log(son.offsetParent);
		}
	</script>
</html>

点击拖拽案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		var box=document.getElementById('box');
		//鼠标按下事件获取鼠标在盒子里的值（page-盒子与浏览器的距离:    e.pageX-box.offsetLeft）
		box.onmousedown=function (e) {
			var mouseLeft=e.pageX-box.offsetLeft;
			var mouseTop=e.pageY-box.offsetTop;
			//鼠标拖拽(拖拽的地方最后盒子的位置是：盒子最后的位置=新的page-坐标在盒子里的距离)
			window.onmousemove=function (e) {
				box.style.left=e.pageX-mouseLeft+'px';
				box.style.top=e.pageY-mouseTop+'px';
			}
			box.onmouseup=function () {
				window.onmousemove=null;
			}
		}
	</script>
</html>

案例–放大镜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#minBox{
				width: 450px;
				height: 450px;
				border: 1px solid orange;
				position: relative;
				top: 50px;
				left: 50px;
			}
			#maskBox{
				width: 200px;
				height: 200px;
				background-color: orange;
				opacity: 0.5;
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
			}
			#maxBox{
				width: 600px;
				height: 600px;
				border: 1px solid blue;
				position: absolute;
				left: 560px;
				top: 0px;
				overflow: hidden;
				display: none;
				
			}
			#maxIamge{
				position: relative;
			}
			
		</style>
	</head>
	<body>
		<!-- 小盒子 -->
		<div id="minBox">
			<img src="img/min.jpg" >
			<div id="maskBox"></div>
		</div>
		<!-- 大盒子 -->
		<div id="maxBox">
			<img src="img/max.jpg"  id="maxIamge">
		</div>
	</body>
	
	
	<script type="text/javascript">
	var minBox=document.getElementById('minBox');
	var maskBox=document.getElementById('maskBox');
	var maxBox=document.getElementById('maxBox');
		// 1 鼠标悬停,蒙版显示, 大盒子显示
		minBox.onmouseover=function (e) {
			maskBox.style.display='block';
			maxBox.style.display='block';
		}
		
		// 2 蒙版在小盒子中移动
		minBox.onmousemove=function (e) {
			//需要再减去图片外盒子的偏移量来保持鼠标居中
			//e.pageX-minBox.offsetLeft-maskBox.offsetWidth/2--->盒子在左上角的坐标(mask盒子的最小移动距离)
			var minLeft=e.pageX-minBox.offsetLeft-maskBox.offsetWidth/2;
			var minTop=e.pageY-minBox.offsetTop-maskBox.offsetHeight/2;
			//盒子能移动的最大距离
			var maxMoveLeft=minBox.offsetWidth-maskBox.offsetWidth;
			var maxMoveTop=minBox.offsetHeight-maskBox.offsetHeight;
			
			//设置判断判断不让mask盒子超出minBox
			//水平方向
			if(minLeft<=0){
				minLeft=0;
			}else if(minLeft>maxMoveLeft){
				minLeft=maxMoveLeft;
			}
			//竖直方向
			if(minTop<=0){
				minTop=0;
			}else if(minTop>maxMoveTop){
				minTop=maxMoveTop;
			}
			maskBox.style.left=minLeft+'px';
			maskBox.style.top=minTop+'px';	
			
			
			// 3 图片在大盒子中移动
			var maxImg=document.getElementById('maxIamge');
			var rateX=minLeft/maxMoveLeft;
			var rateY=minTop/maxMoveTop;
			//图片的移动范围（变）/minBox宽-mask的宽(可以定最大的距离)=x(大图的偏移量)/大图宽-大盒子的宽
			maxImg.style.left=-(maxImg.offsetWidth-maxBox.offsetWidth)*rateX+'px';
			maxImg.style.top=-(maxImg.offsetHeight-maxBox.offsetHeight)*rateY+'px';
			
		}



		// 4 鼠标离开, 蒙版隐藏, 大盒子隐藏
		minBox.onmouseout=function (e) {
			maskBox.style.display='none';
			maxBox.style.display='none';
		}
	</script>
</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3958
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
前端路线--JS高阶（day02）
Yan9_9的博客
03-14 1394
实例成员和静态成员 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //构造方法 function Person (name,age) { this.name=
前端路线--Ajax（day01）
Yan9_9的博客
03-20 1199
计算机网络知识 JSON <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //Json对象的两种格式: /* JSON数据中的值的类型:null
前端路线--Ajax（day03）
Yan9_9的博客
03-23 3562
同源策略和跨域 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p><input type="text"></p> <button>get请求</button> <div class="box">
前端DAY3----JavaScript深拷贝实现方法
Mi_Ni_BoX的博客
05-12 287
JavaScript深拷贝的实现方法
kettle开发篇-JavaScript脚本-Day31
qq_29061315的博客
12-29 3827
前言： 昨天我们讲了映射，映射可以帮我来将转换进行封装便于我们的重用，今天我们来讲解下JavaScript脚本，可以通过JavaScript脚本来处理一些复杂的转换问题。JavaScript脚本就是使用JavaScript语言通过代码编程来完成对数据流的操作。JS中有很多内置函数，可以在编写JS代码时查看。 一、JavaScript脚本 JavaScript脚本就是使用JavaScript语言...
前端基础--JavaScript
qq_50048558的博客
08-22 2650
HTML HTML介绍 & 规范 介绍 HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language). 专门制作网页的计算机语言. 超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。 记事本开发第一个网页 <html> <head> <title>第一个网页</title> </head> <body> Hello World! </body>
前端实用插件-日期处理工具Day.js
qq_38192105的博客
10-30 1692
day.js工具使用介绍，基础实用方法介绍
前端常用的JavaScript代码函数-时间篇
蜗牛的博客
01-15 870
时间日期格式转换 Date.prototype.Format = function(formatStr) { var str = formatStr; var Week = ['日', '一', '二', '三', '四', '五', '六']; str = str.replace(/yyyy|YYYY/, this.getFullYear()); str = str.replace(/yy|YY/, (this.getYear() % 1
前端面试-基础篇
GarfieldEr007的专栏
02-02 5368
第一部分：基础篇 #一、HTML、HTTP、web综合问题 #1 前端需要注意哪些SEO 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；...
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
day08-HTTP&Tomcat&Servlet
10-28
* Ajax、Vue、ElementUI：都是前端技术栈，用于构建响应式用户界面。 JavaWeb 技术栈包括了 B/S 架构、静态资源、动态资源、数据库、HTTP 协议、Web 服务器、Servlet 等几个方面，是 Java 技术来解决相关 web ...
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 611
注释很详细，直接上代码……
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 256
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 952
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 328
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
前端学习日记： Day5 - 简单计算与二级联动
"零基础学习前端的第五天，涵盖了HTML元素、JavaScript基础以及事件处理的实践应用。" 在前端开发的学习过程中，HTML和JavaScript是两个核心的组成部分。在这一天的学习中，我们将通过两个实例来深入理解这两个语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值