03JavaScript事件——放大镜、碰撞检测、滚轮事件、本地存储

本文链接：https://blog.csdn.net/weixin_39672936/article/details/82595668

JS原生放大镜

js代码：

<script>
	var img=document.querySelector("img")
	left.onmouseover=function(){
		console.log("移入")
		mask.style.display="block";
		right.style.display="block";
		left.onmousemove=function(e){
			var e=e||event;
			var x=e.clientX-88;
			var y=e.clientY-88;
			var sx=-(e.clientX*(400/175)-200);
			var sy=-(e.clientY*(400/175)-200);
			if(e.clientX<=88){
				x=0;
				sx=0;
			}
			if(e.clientX>=262){
				x=175;
				sx=-400;
			}
			if(e.clientY<=88){
				y=0;
				sy=0;
			}
			if(e.clientY>=262){
				y=175;
				sy=-400;
			}
			mask.style.top=y+"px";
			mask.style.left=x+"px";
			img.style.transform="translate("+sx+"px,"+sy+"px)"
		}
	}
	left.onmouseleave=function(){
		console.log("移除")
		left.onmousemove=null;
		mask.style.display="none";
		right.style.display="none";
	}
</script>

html标签：

	<div id="left">
		<div id="mask"></div>
	</div>
	<div id="right"><img src="./img/s2.jpg"></div>

CSS部分：
	<style>
		#left{
			width: 350px;
			height: 350px;
			position: relative;
			background: url(./img/s1.jpg);
			border: 1px solid;
			float: left;
		}
		#mask{
			width: 175px;
			height: 175px;
			display: none;
			cursor: pointer;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0,0,0,0.5);
		}
		#right{
			width: 400px;
			height: 400px;
			border: 1px solid;
			overflow: hidden;
			display: none;
		}
	</style>

核心：小图片遮盖移动量与小图片所成的比例，大图片相对于大图片显示窗口移动量与大图片所成比例相等

碰撞检测

矩形碰撞检测：判断比较矩形四边界的位置关系来判定offsetLeft(左)、offsetTop(上)、offsetLeft+offsetWidth(右)、offsetTop+offsetHeight(下)

	矩形碰撞检测函数
	function crash( m,n){
		var ml=m.offsetLeft;//m左边大小
		var mr=m.offsetLeft+m.offsetWidth;//m右边大小
		var mt=m.offsetTop;//m上边大小
		var mb=m.offsetTop+m.offsetHeight;//m下边大小
		var nl=n.offsetLeft;//n左边大小
		var nr=n.offsetLeft+n.offsetWidth;//n右边大小
		var nt=n.offsetTop;//n上边大小
		var nb=n.offsetTop+n.offsetHeight;//n下边大小
		if(ml<nr&&mr>nl&&mb>nt&&mt<nb){
			m.style.background=radomColor();
		}else{
			m.style.background="red";
		}
	}

圆形碰撞检测：判断圆心距与半径和的大小关系来判定

圆形碰撞检测函数
	function radius(m,n){
		var mx=m.offsetLeft+m.offsetWidth/2;//m圆心坐标
		var my=m.offsetTop+m.offsetHeight/2;
		var nx=n.offsetLeft+n.offsetWidth/2;//n圆心坐标
		var ny=n.offsetTop+n.offsetHeight/2;
		var mr=m.offsetHeight/2;//m半径
		var nr=n.offsetHeight/2;//n半径
		if(Math.pow((mr+nr),2)>Math.pow(Math.abs((mx-nx)),2)+Math.pow(Math.abs((my-ny)),2)){
			m.style.background=radomColor();
		}else{
			m.style.background="red";
		}
	}

滚轮事件

当鼠标在绑定事件的元素上，并且滚动了滚轮时，会触发此事件

非FF浏览器上:mousewheel DOM0级加“on"

可以通过事件对象的属性wheelDelta来确定滚轮滚动方向，number 默认时：向上为正向下为负

	wrap.onmousewheel=function(e){
		console.log("滚轮事件")
		var e=e||window.event;
		console.log(e.wheelDelta)
	}

FF浏览器上：DOMMouseScroll，此事件必须用DOM2级事件处理程序才能绑定

通过事件对象的detail属性来判断滚轮方向默认向上为负值，向下为正值，与其他浏览器相反

wrap.addEventListener("DOMMouseScroll",function(e){
	console.log("火狐支持")
	console.log(e.detail)
},false)

wheel事件

nmousewheel已经被废弃但任然可以使用，wheel作为mousewheel的新事件，事件类型是相同的，如果重复绑定会被覆盖

IE9以下不支持在IE9以上必须用DOM2绑定

除火狐外的浏览器上通过wheelDelta来判断法向，默认上正，下负火狐浏览器上通过deltaY来判断方向，默认上位负，下位正，注意：deltaY其他浏览器也支持辨别，不常用

	wrap.onwheel=function(e){
		var e=e||window.event;
		console.log("wheel");
		console.log(e.wheelDelta)
		console.log(e.deltaY)
    }

本地存储

cookie：

cookie:作为浏览器提供的一种机制，我们可以将一些数据存储在浏览器上，存储的数据格式是String，存储一些安全要求不是特别高的数据，容量一般在4kb左右，无兼容问题，是document对象的读写属性，默认情况下通过cookie存储的数据生命周期是存储到浏览器关闭，但是cookie是可以设置过期时间通过设置expires，数据类型string

向cookie添加数据：key=value

	var date=new Date();
	console.log(date)
	var day=date.getDate();
	//将日期设置为指定日期
	date.setDate(day+7);
	console.log(date)
//将七天后的时间设置为过期时间，此时存储的cookie信息将在7天后自动删除
	document.cookie="name=rose;expires="+date;
	document.cookie="age=18;expires="+date;
	document.cookie="height=170;expires="+date;
	document.cookie="name=jake;expires="+date;
	setCookie("usename","james",1);

从cookie中获得是完整的字符串，里面包含多条cookie信息，每条信息会用"; "隔开

取出某一条具体的cookie信息

	var str=document.cookie;
	var arr=str.split("; ");
	console.log(arr);
	for(var i=0;i<arr.length;i++){
		var newArr=arr[i].split("=");
		if(newArr[0]=="name"){
			alert(newArr[1]);
		}
	}

对cookie添加、删除，读取数据的函数封装

//添加一条cookie
//name=value;expiers=
function setCookie(name,value,time){
	var date=new Date();
	var day=date.getDate();
	date.setDate(day+time);
	document.cookie=name+"="+value+";expiers="+date;
}
//获取一条cookie
//name1=value;name2=value
function getCookiename(name){
	//["name1=value","name2=value"]
	var arr=document.cookie.split("; ");
	for(var i=0;i<arr.length;i++){
		//将cookie中的name逐个与需要的name作比较，如果相同，就将对应的value返回
		var newArr=ar[i].split("=");
		if(newArr[0]==name){
			return newArr[1];
		}
	}
	return -1;//返回值为-1，表示数据没有在cookie中
}
//删除指定的一条cookie，原理为将指定的cookie的过期时间设置为过去时间即可
function removeCookie(name){
	setCookie(name,"",-1);
}

localStorage/sessionStorage

localStorage:是window的一个属性,可以将数据存储在本地浏览器上。存在兼容性：IE8及以上版本
与cookie区别：
   1.没有时间限制，除非人为删除，否则一直存在于浏览器中
   2.容量一般在5MB左右
   3.文件运行环境不依赖服务器环境

添加数据:当key相同时会覆盖之前的数据

1.通过.语法 2.通过[]语法 3.setItem(key,value)

window.localStorage.username = "la";
window.localStorage["password"] = "123456";
window.localStorage.setItem("sex","M");

获取数据

	console.log(localStorage.username);
	console.log(localStorage["password"]);
	console.log(localStorage.getItem("sex"));

删除：removeItem(key):删除指定key的数据 clear():删除所有存储的数据

localStorage.removeItem("sex");
localStorage.clear();

注意：localStorage存储的是字符串，如果存储的是数组，会存进去没有中括号的数组字符串，读取值的时候也会获得字符串，那么需要split转化为数组再使用，如果存储的是对象，那么需要先通过JSON.stringify(obj)将对象转化为对象格式的字符串，然后再存储，读取值会得到字符串，需要通过方法JSON.parse(str)将对象格式的字符串转化为对象使用

	var obj = {"name":"rose","pass":"123"};
	var str = JSON.stringify(obj);
	console.log(str);
	var obj2 = JSON.parse(str);
	console.log(typeof obj2);
	localStorage.msg = str;
	console.log(localStorage.msg);

sessionStorage与localStorage相似不同的是sessionStorage为临时存储，关闭浏览器时数据会自动销毁(再出去人为设置的情况下)