本文实例讲述了jQuery实现的响应鼠标移动方向插件用法。分享给大家供大家参考，具体如下：

HTML代码如下：

www.jb51.net jQuery响应鼠标移动

*{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);}

• 

  我是图片1

• 

  我是图片2

• 

  我是图片3

• 

  我是图片4

• 

  我是图片5

• 

  我是图片6

• 

  我是图片7

• 

  我是图片8

(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 <90)) && x > xpos){

direct = "right";

}

if(((angle > -90 && 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));

});

其中控制响应鼠标方向的JS代码如下：

/*

*使用说明：

* $(".a").show($(".b"))

* a是展示层，b是遮罩层

* b在a的内部

*/

$(".outer").each(function(i){

$(this).show($(".inner").eq(i));

});

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun运行代码，可得到如下效果：

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。