jQuery判断鼠标进入图片方向代码
jQuery判断鼠标进入图片方向代码是一款鼠标从哪个方向移到图片上遮罩就从哪里出现。
算法参数
特效脚本代码：
<style>
div,ul,li,body,p{margin:0; padding: 0; font-size: 14px; font-family: "Microsoft Yahei", "微软雅黑", sans-serif;}
.clearfix::after{ clear: both; display: block; height: 0; content: '';}
ul,li{ list-style: none;}
#container{ width:816px; margin: 0 auto;}
#container li{ position:relative;width: 230px;border: 1px solid #ccc; height: 150px; line-height: 150px; text-align: center; margin: 20px; float: left; cursor: pointer; overflow: hidden;}
#container li p{ height:150px; width: 100%; position: absolute; left: 0; top: -150px; color: #ffffff;
z-index: 2; }
#container li .img{ width: 230px; height: 150px; display: block;
-moz-transition:.5s ease-in;
-webkit-transition:.5s ease-in;
-o-transition:.5s ease-in;
-ms-transition:.5s ease-in;
transition:.5s ease-in;}
#container li:hover .img{ transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1)}
#container li p i{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0;z-index: -1;background: #000000; opacity: 0.7; -moz-opacity:0.7; filter:alpha(opacity=70); font-size: 16px; }
#container li p span{ display: block; width: 94%; margin: 0 auto; line-height: 24px; font-size: 12px; padding-top:60px;}
#container li p a{ display: block; position: absolute; width: 32px; height: 32px; left:50%; margin-left: -16px; top:20px; background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJEQjZBMDQzQ0REMTFFNkFCN0JDNkE1ODQ2Q0NFMzgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJEQjZBMDUzQ0REMTFFNkFCN0JDNkE1ODQ2Q0NFMzgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkRCNkEwMjNDREQxMUU2QUI3QkM2QTU4NDZDQ0UzOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkRCNkEwMzNDREQxMUU2QUI3QkM2QTU4NDZDQ0UzOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pphw5OUAAAJSSURBVHjaxFfRUYNAEI0Z8y1WYFJBsIJgBcEOKCEdSAdiBaYDsQJTAlYQUgH4m3zgezPLzHncAUcwuZk30WNv37L7bo+bVlU1uSamkyuPWxfj0+kU4mcF+ECgPd4BOZDOZrPPvj5vmIYexBF+XoA58E0SoAQyMWFAHsAAl/IsRiBvnc7b6nM8Hn1gD1RAAsy7akobIAZKWeu32bc5CoECyPoQWwJJxUfkFICQ862356pcMlfZgrClvRiD3BBEoxwNEUJwVHIJAfljbjf4pXCX8LtQ56cGtT+Iml0JfOBDEBhM6Psez2LrLkCK8iGpl7JxbaCILzTYcXcURg2Ik8pV8Qq5r8x5wM5g6wlHaGrFTNEBNcpd0i5NKcS6THvs6fawKaWRhSYN1M5cxoYtWSVHUJ74iSxrUmnnxgBKB8F9Sdv1DOQbQ0bqkUtLbxxGd0pv70p7Im9IR1R12JO8DmDwaViTs+Yl/uffsQN5Y6gl+JEy9CKX6VjmBpHrGchMym0hr9OZYy5y4GSTOpgywADWlkVbnVxJe+L40r6qtam2PeZwPDcsKi373yntEvT6z3bv04rleE6lzQZ653PomvWHimc8jnlm29qxEKcCf+CxTPK4z3FcILWPY38BS+lyVUumz3L26QWM38cOgHrRdlEzABEVt1X0H0G0NSI1CKr0mWDPt+yMTsXzBeQu4RaAEgSbBj+h9nD02icQ2gC8Q+yBJ733n3MxSZQDS7+YeMptKZC2TvtEr/mgALSrWSBkK+3xQa5nO5BuR72aXVyElxy/AgwAQPtqzqq4o1gAAAAASUVORK5CYII=") no-repeat 0 0;}
.explain{ display: block; margin:0 auto;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<ul id="container" class="clearfix">
<li>
<img class="img" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201607/jiaoben4348/images/huodong1.png">
<p>
<span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201607/jiaoben4348/images/huodong2.png">
<p>
<span>一半在土里安详，一半在风里飞扬，一半洒落阴凉，一半沐浴阳光。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201607/jiaoben4348/images/huodong3.png">
<p>
<span>非常沉默非常骄傲，从不依靠从不寻找。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201607/jiaoben4348/images/huodong4.png">
<p>
<span>如果有来生，有没有人爱，我也要努力做一个可爱的人。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201607/jiaoben4348/images/huodong5.png">
<p>
<span>不埋怨谁，不嘲笑谁，也不羡慕谁，阳光下灿烂，风雨中奔跑，做自己的梦，走自己的路。</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
<li>
<img class="img" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201607/jiaoben4348/images/huodong6.png">
<p>
<span>如果有来生——三毛</span>
<a target="_blank" href="#"></a>
<i></i>
</p>
</li>
</ul>
<script>
$("#container li").each(function(){
$(this).on('mouseenter',function(e){
var e=e||window.event;
var angle=direct(e,this)
mouseEvent(angle,this,'in')
})
$(this).on('mouseleave',function(e){
var e=e||window.event;
var angle=direct(e,this)
mouseEvent(angle,this,'off')
})
})
function direct(e,o){
var w=o.offsetWidth;
var h=o.offsetHeight;
var top= o.offsetTop; //包含滚动条滚动的部分
var left= o.offsetLeft;
var scrollTOP=document.body.scrollTop||document.documentElement.scrollTop;
var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;
var offTop=top- scrollTOP;
var offLeft= left- scrollLeft;
//console.log(offTop+";"+offLeft)
// e.pageX|| e.clientX;
//pageX 是从页面0 0 点开始 clientX是当前可视区域0 0开始 即当有滚动条时clientX 小于 pageX
//ie678不识别pageX
//PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
var ex= (e.pageX-scrollLeft)|| e.clientX;
var ey=(e.pageY-scrollTOP)|| e.clientY;
var x=(ex-offLeft-w/2)*(w>h?(h/w):1);
var y=(ey-offTop-h/2)*(h>w?(w/h):1);
var angle=(Math.round((Math.atan2(y,x)*(180/Math.PI)+180)/90)+3)%4 //atan2返回的是弧度 atan2(y,x)
var directName=["上","右","下","左"];
return directName[angle]; //返回方向 0 1 2 3对应 上 右 下 左
}
function mouseEvent(angle,o,d){ //方向 元素 鼠标进入/离开
var w=o.offsetWidth;
var h=o.offsetHeight;
if(d=='in'){
switch(angle){
case '上':
$(o).find("p").css({left:0,top:-h+"px"}).stop(true).animate({left:0,top:0},300)
setTimeout(function(){
$(o).find("p a").css({left:'50%',top:-h+"px"}).stop(true).animate({left:'50%',top:'20px'},300)
},200)
break;
case '右':
$(o).find("p").css({left:w+"px",top:0}).stop(true).animate({left:0,top:0},300)
setTimeout(function(){
$(o).find("p a").css({left:w+"px",top:'20px'}).stop(true).animate({left:'50%',top:'20px'},300)
},200)
break;
case '下':
$(o).find("p").css({left:0,top:h+"px"}).stop(true).animate({left:0,top:0},300)
setTimeout(function(){
$(o).find("p a").css({left:'50%',top:h+"px"}).stop(true).animate({left:'50%',top:'20px'},300)
},200)
break;
case '左':
$(o).find("p").css({left:-w+"px",top:0}).stop(true).animate({left:0,top:0},300)
setTimeout(function(){
$(o).find("p a").css({left:-w+"px",top:'20px'}).stop(true).animate({left:'50%',top:'20px'},300)
},200)
break;
}
}else if(d=='off'){
switch(angle){
case '上':
$(o).find("p a").stop(true).animate({left:'50%',top:-h+"px"},300)
setTimeout(function(){
$(o).find("p").stop(true).animate({left:0,top:-h+"px"},300)
},200)
break;
case '右':
$(o).find("p a").stop(true).animate({left:w+"px",top:'20px'},300)
setTimeout(function(){
$(o).find("p").stop(true).animate({left:w+"px",top:0},300)
},200)
break;
case '下':
$(o).find("p a").stop(true).animate({left:'50%',top:h+"px"},300)
setTimeout(function(){
$(o).find("p").stop(true).animate({left:0,top:h+"px"},300)
},200)
break;
case '左':
$(o).find("p a").stop(true).animate({left:-w+"px",top:'20px'},300)
setTimeout(function(){
$(o).find("p").stop(true).animate({left:-w+"px",top:0},300)
},200)
break;
}
}
}
</script> 