JS实现图片以椭圆轨迹运动并实时坐标的代码

发布时间：2018-08-18 16:34:31 所属栏目：交互来源：站长网

导读：Java Script结合CSS实现图片以椭圆轨迹运动，在代码中设置了图片起始和结束的坐标位置，图片在运动的过程中，在textarea中实时显示坐标，很有参考价值的特效代码。演示： !DOCTYPE htmlhtmlheadstyle type=text/css#div1 {margin:100px auto;width:5px;

　　JavaScript结合CSS实现图片以椭圆轨迹运动，在代码中设置了图片起始和结束的坐标位置，图片在运动的过程中，在textarea中实时显示坐标，很有参考价值的特效代码。

　　演示：

<!DOCTYPE html> <html> <head> <style type="text/css"> #div1 { margin:100px auto; width:5px; height:5px; background:green; position:relative; } #box { width:88px; height:31px; background:url(http://www.veryhuo.com/images/8831logo.gif) no-repeat; position:absolute; left:0; top:0; } </style> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>椭圆轨迹移动</title> <script type="text/javascript"> window.onload=function() {//运动轨迹随便写的一个(x/300)2+(y/100)2=1椭圆方程 var oDiv=document.getElementById('box'); var oTxt=document.getElementById('txt'); var m=-300; var n=300; var y=0; var x=0; function move() { if(m<=300) { x=m; b(); } else { x=n; a(); if(x<-300) { clearInterval(timer); m=-300; n=300; timer=setInterval(move,5); } } oDiv.style.left=x+'px'; oDiv.style.top=parseInt(y)+'px'; oTxt.value="top="+oDiv.style.top+'n'+"left="+oDiv.style.left+'n'+"X="+x+'n'+"M="+m+'n'+"N="+n; } function a(){ n-=1; y=Math.sqrt(1-Math.pow(n/300,2))*100; } function b(){ m+=1; y=Math.sqrt(1-Math.pow(m/300,2))*-100; } move(); var timer=setInterval(move,5); } </script> </head> <body> <textarea id="txt" style="width:150px;height:100px;"></textarea> <div id="div1"> <div id="box"></div> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!