拉钩的方向感知demo

最新推荐文章于 2022-08-01 09:03:57 发布

转载最新推荐文章于 2022-08-01 09:03:57 发布 · 381 阅读

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>简单的判断鼠标滑过滑块方向的Demo</title>
	</head>
	<body>
	<style type="text/css">
	.clearfix {*zoom: 1;}
	.clearfix:before,.clearfix:after{display: table;line-height: 0;content: "";}
	.clearfix:after{clear: both;}
	body{cursor: default;}
	ul{list-style: none;padding: 0;}
	.cw{width: 780px;margin: 100px auto 0;}
	.intro{line-height: 40px;font-size: 16px;color: #333;}
	.pic-list li{
	position: relative; width: 140px;height: 140px;background-color: #4bf;margin-right: 20px;float: left;overflow: hidden;
	margin-bottom: 20px;font-size: 50px;font-weight: 600;font-family: "Georgia";line-height: 140px;text-align: center;color: #FFF;
	}
	.pic-list li:last-child{margin-right: 0;}
	.pic-list li .mask{
	width: 100%;height: 100%;background-color: orange;position: absolute;top: -100%;left: 0;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;

	}
	.pic-list li.ds .mask{transition:none;}
	</style>
	<div class="cw">
	<div class="intro">判断鼠标划入块的方向，兼容IE10+、非IE、非XP下safari。核心代码：<br>var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;</div>
	<ul class="pic-list clearfix" id="pic-list">
	<li> <div class="mask">1</div> </li>
	<li> <div class="mask">2</div> </li>
	<li> <div class="mask">3</div> </li>
	<li> <div class="mask">4</div> </li>
	<li> <div class="mask">5</div> </li>
	</ul>
	</div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
	var _inArr = [{left:0,top:"-100%"},{left:'100%',top:0},{left:0,top:'100%'},{left:'-100%',top:0}];
	$("#pic-list li").bind("mouseenter mouseleave",function(e) {
	_this = $(this);
	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;
	var eventType = e.type;
	if(e.type == 'mouseenter'){
	$(this).addClass('ds').find('.mask').css(_inArr[direction]);
	setTimeout(function(){
	_this.removeClass('ds').find('.mask').css({left:0,top:0});
	},5);
	}else{
	$(this).find('.mask').css(_inArr[direction]);
	}
	});
	});
	</script>
	</body>
	</html> 拿来和大家分享了