鼠标滑过显示图片遮罩效果随鼠标离开方向消失特效
发布时间：2016-07-22, 14:56:17 分类：HTML | 编辑 off 网址 | 辅助
图集1/2
正文 10015字数 140,765阅读
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> Run code
Cut to clipboard
演示地址
（支付宝）给作者钱财以资鼓励 （微信）→
暂无评论 »