参考资料:
贤心博客:http://sentsin.com/web/112.html,
Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsref_atan2.asp;
Demo: Demo
截图:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document</title> <style> *{ margin:0;padding:0;} #box{ position: absolute;top:200px;left:200px; width:560px;height:560px;border:1px solid #999;padding:10px 0 0 10px; } #box div{ position: relative; float:left;width:100px;height: 100px; margin:0 10px 10px 0;border:1px solid #ccc;overflow: hidden;} #box div.big-box{ width:324px;} #box .mark{ position: absolute;left:-200px;top:-200px;width:100%;height:100%;background-color: #000; opacity: 0.5; border:none; } </style> <script src="jquery-1.8.3.min.js"></script> <script> $(function(){ var $oBox = $(‘#box‘); var $aDivs = $oBox.children(); var $aMarks = $(‘.mark‘); $aMarks.on(‘mouseenter‘,function(event){ event.stopPropagation(); return false; }); $aDivs.on(‘mouseenter mouseleave‘,function( event ){ var $this = $(this), $mark = $this.find(‘.mark‘), w = $this.width(), h = $this.height(), offset = $this.offset(), scaleX = w > h ? (h / w) : 1, scaleY = h > w ? (w / h) : 1, x = (event.pageX - offset.left - (w / 2)) * scaleX, y = (event.pageY - offset.top - (h / 2)) * scaleY, direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4, type = event.type; if( direction == 0 ){ if( type == "mouseenter" ){ $mark.css({ ‘top‘ : -h, ‘left‘ : 0 }); $mark.animate({ ‘top‘ : 0 },300); }else{ $mark.animate({ ‘top‘ : -h },300); } }else if( direction == 1 ){ if( type == "mouseenter" ){ $mark.css({ ‘top‘ : 0, ‘left‘ : w }); $mark.animate({ ‘left‘ : 0 },300); }else{ $mark.animate({ ‘left‘ : w },300); } }else if( direction == 2 ){ if( type == "mouseenter" ){ $mark.css({ ‘top‘ : h, ‘left‘ : 0 }); $mark.animate({ ‘top‘ : 0 },300); }else{ $mark.animate({ ‘top‘ : h },300); } }else if( direction == 3 ){ if( type == "mouseenter" ){ $mark.css({ ‘top‘ : 0, ‘left‘ : -w }); $mark.animate({ ‘left‘ : 0 },300); }else{ $mark.animate({ ‘left‘ : -w },300); } }else{ $mark.css({ ‘top‘ : 0, ‘left‘ : 0 }); } }); }); </script> </head> <body> <div id="box"> <div > <a href="#" class="mark"></a> </div> <div class="big-box"> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div> <a href="#" class="mark"></a> </div> <div class="big-box"> <a href="#" class="mark"></a> </div> </div> </body> </html>
后记:
其实核心的代码都是用贤心博客里的代码,讲解的也比较清楚。
1.要知道父级容器有正方形和长方形所以要算一个比例关系,求出x,y的值;
2.Math.atan2(y, x) 返回从 x 轴到点 (x,y) 之间的角度 其实返回的是弧度然后在* 180 / Math.PI 转成角度;
3.至于+ 180) / 90) + 3) % 4 +180 是为了角度的反转,除90是平均分成四份 +3其实为了%4求出0,1,2,3;
大概的逻辑是这样,可以也有个人理解不对的方法,欢迎指出;
时间: 2024-10-10 08:12:29