摘要：
它还不够大。别介意。。。
写的不够高大上 ， 不要介意哦。。。
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 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: $('.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 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: $('.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="100%;height:100%"/> <div class="showD"> </div> </div>
Css:
.flash{ 200px; height:200px; margin-left:30%; background-color:red; position:relative; overflow:hidden; } .showD{ background: #469acb; position: absolute; 100%; height:200px; }