今天就跟大家聊聊有关使用jQuery怎么实现一个响应鼠标移动方向插件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
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>www.jb51.net jQuery响应鼠标移动</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://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/09.jpg" width="300px" height="250px" />
<div class="inner">
我是图片1
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/010.jpg" width="300px" height="250px" />
<div class="inner">
我是图片2
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/011.jpg" width="300px" height="250px" />
<div class="inner">
我是图片3
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/012.jpg" width="300px" height="250px" />
<div class="inner">
我是图片4
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/013.jpg" width="300px" height="250px" />
<div class="inner">
我是图片5
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/014.jpg" width="300px" height="250px" />
<div class="inner">
我是图片6
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/015.jpg" width="300px" height="250px" />
<div class="inner">
我是图片7
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/016.jpg" width="300px" height="250px" />
<div class="inner">
我是图片8
</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)
$(".outer").each(function(i){
$(this).show($(".inner").eq(i));
});
</script>
</body>
</html>其中控制响应鼠标方向的JS代码如下：
/*
*使用说明：
* $(".a").show($(".b"))
* a是展示层，b是遮罩层
* b在a的内部
*/
$(".outer").each(function(i){
$(this).show($(".inner").eq(i));
});jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
看完上述内容，你们对使用jQuery怎么实现一个响应鼠标移动方向插件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
