标签：javascript 前端 学习记录 遮盖层划入
昨日实现了判断鼠标从div的哪一侧划入，划入部分就简单多了，我们用javascript来实现划入效果。
先来回顾下昨日的鼠标判定：
html部分：
<body> <div style="margin-left:300px;margin-top:300px;width:400px;height:400px;background:cyan;" id="test"> <img src="11.jpg" width="300px" height="300px"> </div> </body>js部分：
window.onload=function(){
var left=0;//鼠标划入部分距离div左边的值
var top=0;//鼠标划入部分距离div上边的值
var right=0;//鼠标划入部分距离div右边的值
var bottom=0;//鼠标划入部分距离div下边的值
var width=10;//可能用到的遮盖层的初始宽度
var height=10;//可能用到的遮盖层的初始高度
var marginLeft;//遮盖层的初始位置
var marginRight;//遮盖层的初始位置
var marginTop;//遮盖层的初始位置
var marginBottom;//遮盖层的初始位置
var arr=new Array();
var check=true;//鼠标是否初次划入div
test.addEventListener("mouseover",function(event){
var test=document.getElementById("test");
if(check){
check=false;
var x=event.clientX;
var y=event.clientY;
left=x-test.offsetLeft;
top=y-test.offsetTop;
right=test.offsetLeft+test.offsetWidth-x;
bottom=test.offsetTop+test.offsetHeight-y;
arr.push(top);
arr.push(right);
arr.push(bottom);
arr.push(left);
var least=findLeast(arr);//在这里判定的是哪个最小
})
var findLeast=function([a1,a2,a3,a4]){
var a;
var n;
a=a1>a2?a2:a1;
n=a==a2?2:1;
a=a3>a?a:a3;
n=a==a3?3:n;
a=a4>a?a:a4;
n=a==a4?4:n;
return n;
}然后我们分别实现从左边和右边划入（这里以生成新的div做遮盖层为例）：
左边相比较比较简单，设定初始位置跟div相同，然后宽度不断增加就可以，我们来看下代码：
if(least==4){
newDiv.style.left=test.offsetLeft+"px";
newDiv.style.top=test.offsetTop+"px";//设置初始位置
newDiv.style.height=test.offsetHeight+"px";
newDiv.style.width=width+"px";//设置遮盖层的初始状态
document.body.appendChild(newDiv);
var changeWidth=setInterval(function(){
if(newDiv.offsetWidth>=test.offsetWidth){
alert(10);
clearInterval(changeWidth);
}else{
width=width+10;//这里是改变的关键
newDiv.style.width=width+"px";
}
},100);
}而右边则就相比较来说略微麻烦点，我们只能让它的初始位置不断变小，但是它的宽度却是不断变大的，而变大这就跟左边一样了，来看下代码：
if(least==2){
newDiv.style.left=test.offsetLeft+test.offsetWidth+"px";
newDiv.style.top=test.offsetTop+"px";//设置初始位置
newDiv.style.height=test.offsetHeight+"px";
newDiv.style.width=width+"px";//设置遮盖层初始状态
document.body.appendChild(newDiv);
marginLeft=test.offsetLeft+test.offsetWidth;
var changeWidth=setInterval(function(){
if(newDiv.offsetLeft<=test.offsetLeft){
alert(10);
clearInterval(changeWidth);
}else{
marginLeft=marginLeft-10;//初始位置不断减小的时候，宽度确实在不断增大的
width=width+10;
newDiv.style.width=width+"px";
newDiv.style.left=marginLeft+"px";
}
},100);
}
}这样是不是还欠缺点什么呢，对了，就是里面的这个newDiv哪来的呢？
var getOneDiv=function(){
var div=document.createElement("div");
div.style.position="absolute";
div.style.display="block";
div.style.zIndex="10";
div.style.background="yellow";
return div;
}用来生成一个新的div，而我们在var least=findLeast(arr);判定结束之后，就可以来生成了var newDiv=getOneDiv();
这样左右的划入都实现了吧，上下也是差不多原理啦，我就不传代码了，那接下来的就该是移出的效果了，不过今天天又晚了，也有些困了，从周六周日开始全都上班以来，这样连轴转有点吃不消啊，而且暂时也还没有思路，睡觉睡觉
标签：javascript 前端 学习记录 遮盖层划入
原文地址：http://blog.csdn.net/marsmile_tbo/article/details/38151295
