本文實例講述了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程序設計有所幫助。

總結

以上是生活随笔為你收集整理的鼠标移动响应php程序,jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。