首页 > 代码库 > 简单实现遮盖层随鼠标左右划入的效果-------Day75

简单实现遮盖层随鼠标左右划入的效果-------Day75

2024-07-14 05:56:54   217人阅读

昨日实现了判断鼠标从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


联系
我们