判断鼠标从div的哪一方向划入-------Day74

发现一种很有意思的效果,感觉很漂亮很华丽,想实现一下,大体效果来介绍下:

鼠标从左端划入,则遮盖层从左边划入遮盖div,而从上方划入,则遮盖层从上方划入遮盖div,同理对于右方和下方,而同样从哪个方向鼠标移出div,遮盖层也就从哪个方向消失,你能想象的出么?如果还想象不出效果,可以看你一下“拉勾网”,我就从上面发现的这个效果。

其实单纯说遮盖层划出的效果,我们大约知道好几种方法,如果遮盖层是需要新创建div,那么javascript完全可以实现,至于划出效果也可以实现,遮盖层的width从0不断增大到div的宽度即可,而如果遮盖层是之前隐藏的div,那么除了用javascript方法,我们还可以用css3的transition的width来实现效果,然后我们就遇到了一个当前的大问题,那就是判定鼠标从哪个方向划入,然后遮盖层从哪个方向划出。

而我想到的方法,就是鼠标划入的初始位置,距离div的哪一个边最近,我们就知道从哪一个方向划入的了,是不是这个道理呢,用代码来实现下:

html语言:

<div style="margin-left:300px;margin-top:300px;width:400px;height:400px;background:cyan;" id="test">
		<img src="11.jpg" width="300px" height="250px">
</div>

js部分:

window.onload=function(){
                var left=0;
                var top=0;
		var right=0;
		var bottom=0;
                var arr=new Array();
                test.addEventListener("mouseover",function(event){
			var test=document.getElementById("test");//获得test对象
			if(check){
				check=false;
				var x=event.clientX;//鼠标的位置
				var y=event.clientY;
				left=x-test.offsetLeft;//鼠标相对于div左方的边的距离
				top=y-test.offsetTop;//相对于div上方的边的距离
				right=test.offsetLeft+test.offsetWidth-x;//相对于div右方的边的距离
				bottom=test.offsetTop+test.offsetHeight-y;//相对于div下方的边的距离
				arr.push(top);
				arr.push(right);
				arr.push(bottom);
				arr.push(left);
				var least=findLeast(arr);
				alert(least);//获取最小是数组的第几位,1、2、3、4位分别是左、上、右、下,就能判定是哪个方向了
}
	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;
		}
}

这样是不是就达到目的了呢,再来想想该怎么继续实现这个效果呢,多写几个if应该可以把,今天先到这里吧,明天试试看

判断鼠标从div的哪一方向划入-------Day74

时间: 2024-11-05 18:58:49

判断鼠标从div的哪一方向划入-------Day74的相关文章

判断鼠标移入移出元素时的方向

本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识,但是非常简单好理解,希望能对你有所帮助. 在线demo: http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html 相关代码: https://github.com/liuyunzhuge/blog/blob/master/mouse_

判断鼠标进入元素的方向

javascript版: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>判断鼠标进入和离开容器的方向</title> 6 <style> 7 #test{ 8 width:300px; 9 height:200px; 10 border:1px solid red; 11 } 12 </style&g

JS判断鼠标移入元素的方向

最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect

判断鼠标从哪个方向进入容器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标进入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50p

JS实现穿墙效果(判断鼠标划入划出的方向)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>判断鼠标移入移出方向</title> <style type="text/css"> * { margin: 0; padding: 0; } .outer { width: 400px; height: 400px; bor

判断鼠标点击在div外时,更改背景图片

学习起步时,本人试着在web端界面上仿照qq客户端主菜单,做出了一个界面. 当做到qq主菜单的搜索框时,发现点击搜索框后,里面的背景图片会消失,如下面2张图所示:      点击前                                                                      点击后 尽管类似这种判断鼠标是否点击在div外,以更改背景图片的应用在web开发中并不多见,但是我们还是需要明白,应如何实现对鼠标是否点击在div外的判断. 在这里,我采用了如下代

js判断鼠标位置是否在某个div中

div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域就可以了. [javascript] view plaincopyprint? d

js中判断鼠标滚轮方向的方法

  前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event对象 一.JS中的Event对象 Event对象:它代表的是事件的状态,例如可以表示鼠标的位置.鼠标按钮的状态.键盘按键的状态等等. >>>事件通常与函数结合使用,函数不会在事件发生前被执行! 二.JS中如何判断鼠标滚轮方向 判断鼠标滚轮的方向,有着两个派别:一是谷歌.IE派别(这次IE没有

js判断鼠标是否停止移动

本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0:timer可以实现每过n秒就判断鼠标状态,然后把imouse重置为0: 2.div监听onmouseover.当鼠标进入区域时,就设置定时器: 3.div监听onmousemove.当鼠标移动时,设置imouse值为1: 4.div监听onmouseout.当鼠标离开时,清除定时器timer <ht