03JavaScript事件——放大镜、碰撞检测、滚轮事件、本地存储
JS原生放大镜
js代码：
html标签：
CSS部分：
核心：小图片遮盖移动量与小图片所成的比例，大图片相对于大图片显示窗口移动量与大图片所成比例相等
碰撞检测
矩形碰撞检测：判断比较矩形四边界的位置关系来判定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(mlnl&&mb>nt&&mt 圆形碰撞检测：判断圆心距与半径和的大小关系来判定
圆形碰撞检测函数
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对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;ilocalStorage/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为临时存储，关闭浏览器时数据会自动销毁(再出去人为设置的情况下)