jQuery 判断鼠标从哪个方向进入元素

最新推荐文章于 2020-05-08 15:51:45 发布

mossbaoo

最新推荐文章于 2020-05-08 15:51:45 发布

阅读量571

点赞数

分类专栏：前端开发 # JavaScript # JQuery 文章标签：判断鼠标从哪个方向进入元素 jQuery

本文链接：https://blog.csdn.net/mossbaoo/article/details/90371348

版权

前端开发同时被 3 个专栏收录

93 篇文章 5 订阅

订阅专栏

JavaScript

34 篇文章 2 订阅

订阅专栏

JQuery

5 篇文章 0 订阅

订阅专栏

$(".item").bind("mouseenter mouseleave", function(e) {
	var w = $(this).width();
	var h = $(this).height();
	var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
	var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
	var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
	var eventType = e.type;
	var dirName = new Array('上方','右侧','下方','左侧');
	if(eventType == 'mouseenter'){
		console.log(dirName[direction]+'进入');
	}else{
		console.log(dirName[direction]+'离开');
	}
});

在列表中使用：

HTML：

<div class="item">
	<div class="img"><img src="img/img1.jpg" alt=""></div>
	<div class="mask">文字</div>
</div>
<div class="item">
	<div class="img"><img src="img/img2.jpg" alt=""></div>
	<div class="mask">文字</div>
</div>
<div class="item">
	<div class="img"><img src="img/img3.jpg" alt=""></div>
	<div class="mask">文字</div>
</div>
<div class="item">
	<div class="img"><img src="img/img4.jpg" alt=""></div>
	<div class="mask">文字</div>
</div>

JS（jQuery）：

$(".item").bind("mouseenter mouseleave", function(e) {
	var w = $(this).width();
	var h = $(this).height();
	var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
	var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
	var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
	var eventType = e.type;
	var styles = {
		center: {top: 0, left: 0},
		top: {top: '-100%', left: 0},
		right: {top: 0, left: '100%'},
		bottom: {top: '100%', left: 0},
		left: {top: 0, left: '-100%'}
	}
	var item = $(this).find('.mask').stop();
	if(eventType == 'mouseenter'){
		if(direction == 0) {
			item.css(styles.top);
		}else if(direction == 1) {
			item.css(styles.right);
		}else if(direction == 2) {
			item.css(styles.bottom);
		}else if(direction == 3) {
			item.css(styles.left);
		}
		item.animate(styles.center);
	}else{
		if(direction == 0) {
			item.animate(styles.top);
		}else if(direction == 1) {
			item.animate(styles.right);
		}else if(direction == 2) {
			item.animate(styles.bottom);
		}else if(direction == 3) {
			item.animate(styles.left);
		}
	}
});

CSS（Less）：

.item {
  float: left;
  position: relative;
  margin-right: 13px;
  margin-bottom: 13px;
  width: 290px;
  height: 160px;
  overflow: hidden;
  img {
    width: 290px;
    height: 160px;
  }
  .mask {
    position: absolute;
    top: 160px;
    left: 0;
    width: 290px;
    height: 160px;
    background: #C2001D;
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: 160px;
  }
}