03JavaScript事件——放大鏡、碰撞檢測、滾輪事件、本地存儲

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爲臨時存儲，關閉瀏覽器時數據會自動銷燬(再出去人爲設置的情況下)