<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style>
* {
margin:0;
padding:0;
}
.LineHolder {
position: absolute;
}
.line1, .line2 {
position: absolute;
width: 0px;
height: 0px;
font-size: 0px;
border-right: 0px solid #000;
border-left: 0px solid #000;
border-top: 0px solid transparent;
}
.line2 {
left: 1px;
top: 1px;
border-right-color: #fff;
border-left-color: #fff;
border-top-color: transparent;
}
</style>
</head>
<body>
<script type="text/javascript">
var Line = {
Create: function(x1,y1,x2,y2,parent){
var c = function(n){var r = document.createElement('DIV'); r.className = n; return r}
var a = function(e,o){return e.appendChild(o)}
this.Div = a(parent,c('LineHolder'));
this.Line1 = a(this.Div,c('line1'));
this.Line2 = a(this.Div,c('line2'));
this.Move(x1,y1,x2,y2);
},
Move: function(x1,y1,x2,y2){
this.Div.style.left = (x1<x2 ? x1 : x2) + 'px';
this.Div.style.top = (y1<y2 ? y1 : y2) + 'px';
this.Div.style.width = Math.abs(x1-x2) + 'px';
this.Line1.style.borderTopWidth = this.Line2.style.borderTopWidth = this.Div.style.height = Math.abs(y1-y2) + 'px';
if (x1<x2) {
if (y1<y2) {
this.Line1.style.borderLeftWidth = this.Line2.style.borderLeftWidth = x2 - x1 + 'px';
this.Line1.style.borderRightWidth = this.Line2.style.borderRightWidth = '0px';
this.Line2.style.left = '-1px';
}
else {
this.Line1.style.borderRightWidth = this.Line2.style.borderRightWidth = x2 - x1 + 'px';
this.Line1.style.borderLeftWidth = this.Line2.style.borderLeftWidth = '0px';
this.Line2.style.left = '1px';
}
}
else {
if (y1<y2) {
this.Line1.style.borderRightWidth = this.Line2.style.borderRightWidth = x1 - x2 + 'px';
this.Line1.style.borderLeftWidth = this.Line2.style.borderLeftWidth = '0px';
this.Line2.style.left = '1px';
}
else {
this.Line1.style.borderLeftWidth = this.Line2.style.borderLeftWidth = x1 - x2 + 'px';
this.Line1.style.borderRightWidth = this.Line2.style.borderRightWidth = '0px';
this.Line2.style.left = '-1px';
}
}
}
}
var x = 0, y = 200, dx = 200, dy = 300, r = 200;
Line.Create(dx,dy,x+dx,y,document.body);
setInterval(function(){
x += 3;
if (x>r) x=0;
y = dy - Math.sqrt(r*r - x*x);
Line.Move(dx,dy,x+dx,y);
},30);
</script>
</body>
</html> |