方向进入 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #ul1{width: 630px;height: 630px;padding: 10px 0 0 10px;margin: 50px auto;} #ul1 li{width: 200px;height: 200px;background: #ebebeb;float: left;margin-right: 10px;margin-bottom: 10px; overflow: hidden;position: relative;} #ul1 li span{width: 100%;height: 100%;background: pink;position: absolute;left: -200px;top:0px;font-size: 30px;line-height: 200px;text-align: center;} </style> <script type="text/javascript"> //版权北京智能社©, 保留所有权利 function getStyle(obj,name){ return (obj.currentStyle||getComputedStyle(obj,null))[name]; } // options{duration easing complete} function move(obj,json,options){ options = options || {}; options.duration = options.duration || 700; options.easing = options.easing || "ease-out"; var start = {}; var dis = {}; for(var name in json){ start[name] = parseFloat(getStyle(obj,name)); dis[name] = json[name] - start[name]; } var count = Math.round(options.duration/30); var n = 0; clearInterval(obj.timer); obj.timer = setInterval(function(){ n++; for(var name in json){ switch(options.easing){ case "linear": var a = n/count; var cur = start[name] + dis[name]*a; break; case "ease-in": var a = n/count; var cur = start[name] + dis[name]*Math.pow(a,3); break; case "ease-out": var a = 1- n/count; var cur = start[name] + dis[name]*(1 - Math.pow(a,3)); break; } if(name == "opacity"){ obj.style.opacity = cur; obj.style.filter = "alpha(opacity:"+cur*100+")"; } else { obj.style[name] = cur + "px"; } } if(n == count){ clearInterval(obj.timer); options.complete &&　options.complete(); } },30); } </script> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById('ul1'); var aLi=oUl.children; function getDirection(obj,oEvent){ var x=oEvent.clientX-obj.offsetLeft-obj.offsetWidth/2; var y=obj.offsetTop+obj.offsetHeight/2-oEvent.clientY; // 0 :左 1：下 2：右 3：上 return Math.round((Math.atan2(y,x)*180/Math.PI+180)/90)%4; } function lagou(oDiv){ oDiv.onmouseover=function(ev){ var oEvent=ev||event; var oSpan=this.children[0]; var oFrom=oEvent.fromElement||oEvent.relatedTarget; if(this.contains(oFrom)){ return; } var n=getDirection(this,oEvent); switch(n){ case 0: oSpan.style.left='-200px'; oSpan.style.top=0; break; case 1: oSpan.style.left=0; oSpan.style.top='200px'; break; case 2: oSpan.style.left='200px'; oSpan.style.top=0; break; case 3: oSpan.style.left=0; oSpan.style.top='-200px'; break } move(oSpan,{left:0,top:0}); } oDiv.onmouseout=function(ev){ var oEvent=ev||event; var oSpan=this.children[0]; var oTo=oEvent.toElement||oEvent.relatedTarget; if(this.contains(oTo)){ return; }; var n=getDirection(this,oEvent); switch(n){ case 0: move(oSpan,{left:-200,top:0}); break; case 1: move(oSpan,{left:0,top:200}); break; case 2: move(oSpan,{left:200,top:0}); break; case 3: move(oSpan,{left:0,top:-200}); break; } }; } for(var i=0;i<aLi.length;i++){ lagou(aLi[i]); } }; </script> </head> <body> <ul id="ul1"> <li> <span>span</span> </li> <li> <span>span</span> </li> <li> <span>span</span> </li> <li> <span>span</span> </li> <li> <span>span</span> </li> <li> <span>span</span> </li> <li> <span>span</span> </li> <li> <span>span</span> </li> <li> <span>span</span> </li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 方向进入