$(".flash").bind("mouseenter 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 values divide by 90 to get the quadrant add 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: alert(1) /** animations from the TOP **/ break; case 1: alert(2) /** animations from the RIGHT **/ break; case 2: alert(3) /** animations from the BOTTOM **/ break; case 3: alert(4) /** animations from the LEFT **/ break; }});
HTML:
<div class="flash"> </div>
Css:
.flash{ width:200px; height:200px; margin-left:30%; background-color:red; }
时间: 2024-11-05 19:01:46