jQuery获取鼠标移动方向

最新推荐文章于 2022-08-31 11:19:47 发布

aghkasdh30210

最新推荐文章于 2022-08-31 11:19:47 发布

阅读量179

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xfdmb/p/6086120.html

版权

	<!doctype html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>Demo</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	ul,
	li {
	list-style: none;
	}

	div {
	font-family: "Microsoft YaHei";
	}

	html,
	body {
	width: 100%;
	height: 100%;
	background: #f2f2f2;
	}

	ul {
	margin-left: 50px;
	}

	ul li {
	float: left;
	}

	ul li .outer {
	width: 300px;
	height: 250px;
	}

	ul li .outer .inner {
	width: 300px;
	height: 250px;
	background: rgba(0, 0, 0, .3);
	}
	</style>
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	</head>

	<body>
	<ul>
	<li>
	<div class="outer">
	<img src="img/a1.png" width="300px" height="250px" />
	<div class="inner">
	这是描述。。。
	</div>
	</div>
	</li>
	<li>
	<div class="outer">
	<img src="img/a2.png" width="300px" height="250px" />
	<div class="inner">
	这是描述。。。
	</div>
	</div>
	</li>
	<li>
	<div class="outer">
	<img src="img/a3.png" width="300px" height="250px" />
	<div class="inner">
	这是描述。。。
	</div>
	</div>
	</li>
	<li>
	<div class="outer">
	<img src="img/a4.png" width="300px" height="250px" />
	<div class="inner">
	这是描述。。。
	</div>
	</div>
	</li>
	<li>
	<div class="outer">
	<img src="img/a5.png" width="300px" height="250px" />
	<div class="inner">
	这是描述。。。
	</div>
	</div>
	</li>
	<li>
	<div class="outer">
	<img src="img/a6.png" width="300px" height="250px" />
	<div class="inner">
	这是描述。。。
	</div>
	</div>
	</li>
	<li>
	<div class="outer">
	<img src="img/a7.png" width="300px" height="250px" />
	<div class="inner">
	这是描述。。。
	</div>
	</div>
	</li>
	<li>
	<div class="outer">
	<img src="img/a8.png" width="300px" height="250px" />
	<div class="inner">
	这是描述。。。
	</div>
	</div>
	</li>
	</ul>

	<script>
	;
	(function($) {
	$.fn.extend({
	show: function(div) {
	var w = this.width(),
	h = this.height(),
	xpos = w / 2,
	ypos = h / 2,
	eventType = "",
	direct = "";
	this.css({
	"overflow": "hidden",
	"position": "relative"
	});
	div.css({
	"position": "absolute",
	"top": this.width()
	});
	this.on("mouseenter mouseleave", function(e) {
	var oe = e \|\| event;
	var x = oe.offsetX;
	var y = oe.offsetY;
	var angle = Math.atan((x - xpos) / (y - ypos)) * 180 / Math.PI;
	if (angle > -45 && angle < 45 && y > ypos) {
	direct = "down";
	}
	if (angle > -45 && angle < 45 && y < ypos) {
	direct = "up";
	}
	if (((angle > -90 && angle < -45) \|\| (angle > 45 && angle < 90)) && x > xpos) {
	direct = "right";
	}
	if (((angle > -90 && angle < -45) \|\| (angle > 45 && angle < 90)) && x < xpos) {
	direct = "left";
	}
	move(e.type, direct)
	});

	function move(eventType, direct) {
	if (eventType == "mouseenter") {
	switch (direct) {
	case "down":
	div.css({
	"left": "0px",
	"top": h
	}).stop(true, true).animate({
	"top": "0px"
	}, "fast");
	break;
	case "up":
	div.css({
	"left": "0px",
	"top": -h
	}).stop(true, true).animate({
	"top": "0px"
	}, "fast");
	break;
	case "right":
	div.css({
	"left": w,
	"top": "0px"
	}).stop(true, true).animate({
	"left": "0px"
	}, "fast");
	break;
	case "left":
	div.css({
	"left": -w,
	"top": "0px"
	}).stop(true, true).animate({
	"left": "0px"
	}, "fast");
	break;
	}
	} else {
	switch (direct) {
	case "down":
	div.stop(true, true).animate({
	"top": h
	}, "fast");
	break;
	case "up":
	div.stop(true, true).animate({
	"top": -h
	}, "fast");
	break;
	case "right":
	div.stop(true, true).animate({
	"left": w
	}, "fast");
	break;
	case "left":
	div.stop(true, true).animate({
	"left": -w
	}, "fast");
	break;
	}
	}
	}
	}
	});
	})(jQuery)
	/*
	*使用说明：
	* $(".a").show($(".b"))
	* a是展示层，b是遮罩层
	* b在a的内部
	*/


	$(".outer").each(function(i){
	$(this).show($(".inner").eq(i));
	});
	</script>
	</body>

	</html>