? ?寫的不夠高大上 ， 不要介意哦。。。

Js:

//進去 $(".flash").bind("mouseenter",function(e){/** the width and height of the current div **/var w = $(this).width();var h = $(this).height();/** calculate the x and y to get an angle to the center of the div from that x and y. **//** gets the x value relative to the center of the DIV and "normalize" it **/var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );var y = (e.pageY - this.offsetTop - (h/2)) * ( h > w ? (w/h) : 1 );/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**//** first calculate the angle of the point, add 180 deg to get rid of the negative valuesdivide by 90 to get the quadrantadd 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 ) % 4;/** do your animations here **/ switch(direction) {case 0:$('.showD').css({'top':'-200px','left':'0','opacity':'0',}).stop().animate({'top':'0','left':'0','opacity':'1',},300)/** animations from the TOP **/break;case 1:$('.showD').css({'top':'0','left':'200px','opacity':'0',}).stop().animate({'top':'0','left':'0','opacity':'1',},300)/** animations from the RIGHT **/break;case 2:$('.showD').css({'top':'200px','left':'0','opacity':'0',}).stop().animate({'left':'0','top':'0','opacity':'1',},300)/** animations from the BOTTOM **/break;case 3:$('.showD').css({'top':'0','left':'-200px','opacity':'0',}).stop().animate({'left':'0','right':'0','opacity':'1',},300)/** animations from the LEFT **/break;}});//出來 $(".flash").bind("mouseleave",function(e){/** the width and height of the current div **/var w = $(this).width();var h = $(this).height();/** calculate the x and y to get an angle to the center of the div from that x and y. **//** gets the x value relative to the center of the DIV and "normalize" it **/var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );var y = (e.pageY - this.offsetTop - (h/2)) * ( h > w ? (w/h) : 1 );/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**//** first calculate the angle of the point, add 180 deg to get rid of the negative valuesdivide by 90 to get the quadrantadd 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 ) % 4;/** do your animations here **/ switch(direction) {case 0:$('.showD').css({'right':'0',}).stop().animate({'right':'0','top':'-200px',},300)/** animations from the TOP **/break;case 1:$('.showD').css({'top':'0',}).stop().animate({'top':'0','left':'200px',},300)/** animations from the RIGHT **/break;case 2:$('.showD').css({'top':'0','left':'0',}).stop().animate({'left':'0','top':'200px',},300)/** animations from the BOTTOM **/break;case 3:$('.showD').css({'top':'0','left':'0',}).stop().animate({'left':'-200px','right':'0',},300)/** animations from the LEFT **/break;}});

HTML:

<div class="flash"><img class="pic_bg" src="http://img0.imgtn.bdimg.com/it/u=261025820,3584077840&fm=21&gp=0.jpg" style="width:100%;height:100%"/><div class="showD"></div></div>

Css:

.flash{width:200px;height:200px;margin-left:30%;background-color:red;position:relative;overflow:hidden; } .showD{background: #469acb;position: absolute;width:100%;height:200px; }

?

轉載于:https://www.cnblogs.com/xinlinux/p/4442175.html

總結

以上是生活随笔為你收集整理的JS判断鼠标从哪个方向进入DIV容器的全部內容，希望文章能夠幫你解決所遇到的問題。

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