(function ($) {
$.fn.hoverdir = function(options){
var options = $.extend({
choice : ".cove"
},options);
return this.each(function(){
var self = $(this);
self.hover(function(e){
mouseMove(e,self,true);
},function(e){
mouseMove(e,self,false);
});
function mouseMove(e,element,bool){ //光标、元素、布尔
var top = element.offset().top; //元素top距离浏览器顶部距离
var bottom = top + element.height(); //元素bottom距离浏览器顶部距离
var left = element.offset().left; //元素left距离浏览器左边距离
var right = left + element.width(); //元素right距离浏览器左边距离
var x = e.pageX; //光标当前横向x位置
var y = e.pageY; //光标当前纵向y位置
//光标当前横纵向位置减去元素各方位距离(取最小值) = 将要显示的方向
var sT = Math.abs(y - top);
var sB = Math.abs(y - bottom);
var sL = Math.abs(x - left);
var sR = Math.abs(x - right);
var current = Math.min(sT,sB,sL,sR); //取元素最小值从而进行switch排除
var choices = element.find(options.choice); //获取需要选择的元素
switch (current){
case sT:
if(bool){
choices.css({left:0,top:'-100%'}).animate({top:0},200);
}else{
choices.stop(1,1).animate({top:'-100%'},200);
}
break;
case sB:
if(bool){
choices.css({left:0,top:'100%'}).animate({top:0},200);
}else{
choices.stop(1,1).animate({top:'100%'},200);
}
break;
case sL:
if(bool){
choices.css({left:'-100%',top:0}).animate({left:0},200);
}else{
choices.stop(1,1).animate({left:'-100%'},200);
}
break;
case sR:
if (bool){
choices.css({left:'100%',top:0}).animate({left:0},200);
}else{
choices.stop(1,1).animate({left:'100%'},200);
}
break;
}
}
});
}
})(jQuery);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color:#2A2A2A;} li{list-style: none;} #wrap{width: 800px;margin:100px auto;} #wrap ul li{float: left;margin: 5px;width: 230px;height: 360px;position: relative;overflow: hidden;} #wrap ul li .cove{width: 230px;height: 220px;position: absolute;background: url(img/new-bg.png);padding: 140px 0 0 0;top: 100%;left: 100%;} #wrap ul li .cove p{font-size: 14px;color:#fff;text-align: center;} </style> </head> <body> <div id="wrap"> <ul> <li> <img src="img/1.png" /> <div class="cove"> <p>pci1</p> <p>Picture info 1</p> </div> </li> <li> <img src="img/2.png" /> <div class="cove"> <p>pci2</p> <p>Picture info 2</p> </div> </li> <li> <img src="img/3.png" /> <div class="cove"> <p>pci3</p> <p>Picture info 3</p> </div> </li> <li> <img src="img/4.png" /> <div class="cove"> <p>pci4</p> <p>Picture info 4</p> </div> </li> <li> <img src="img/5.png" /> <div class="cove"> <p>pci5</p> <p>Picture info 5</p> </div> </li> <li> <img src="img/6.png" /> <div class="cove"> <p>pci6</p> <p>Picture info 6</p> </div> </li> </ul> </div> <script src="../jquery.min.js"></script> <script src="hoverdir.js"></script> <script> $("#wrap ul li").hoverdir(); </script> </body> </html>
不多说，可以通过需求拓展功能。