首页 > 代码库 > 简单实现遮盖层随鼠标左右划入的效果-------Day75
简单实现遮盖层随鼠标左右划入的效果-------Day75
昨日实现了判断鼠标从div的哪一侧划入,划入部分就简单多了,我们用javascript来实现划入效果。
先来回顾下昨日的鼠标判定:
html部分:
<body> <div style="margin-left:300px;margin-top:300px;width:400px;height:400px;background:cyan;" id="test"> <img src=http://www.mamicode.com/"11.jpg" width="300px" height="300px">>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();
这样左右的划入都实现了吧,上下也是差不多原理啦,我就不传代码了,那接下来的就该是移出的效果了,不过今天天又晚了,也有些困了,从周六周日开始全都上班以来,这样连轴转有点吃不消啊,而且暂时也还没有思路,睡觉睡觉
简单实现遮盖层随鼠标左右划入的效果-------Day75
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。