昨日实现了判断鼠标从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.οnlοad=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();
这样左右的划入都实现了吧,上下也是差不多原理啦,我就不传代码了,那接下来的就该是移出的效果了,不过今天天又晚了,也有些困了,从周六周日开始全都上班以来,这样连轴转有点吃不消啊,而且暂时也还没有思路,睡觉睡觉