<!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>
<style type="text/css">
#div1 {
margin:100px auto;
width:5px;
height:5px;
background:green;
position:relative;
}
#box {
width:50px;
height:50px;
background:url(/jscss/demoimg/201201/ali.gif) no-repeat;
position:absolute;
left:0;
top:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>椭圆轨迹移动</title>
<script type="text/javascript">
window.οnlοad=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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#div1 {
margin:100px auto;
width:5px;
height:5px;
background:green;
position:relative;
}
#box {
width:50px;
height:50px;
background:url(/jscss/demoimg/201201/ali.gif) no-repeat;
position:absolute;
left:0;
top:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>椭圆轨迹移动</title>
<script type="text/javascript">
window.οnlοad=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>
扫一扫
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
