<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src='../jquery.path.js'></script>
<link type="text/css" rel="stylesheet" media="screen" href="http://weepy.github.com/style.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="http://github.com/weepy/weepy.github.com/raw/master/style.css"/>
<style>
#arc { position: relative; width: 600px; height: 300px; }
#bezier { position: relative; width: 600px; height: 300px; }
#sine { position: relative; width: 600px; height: 300px; }
.pixel { position: absolute; width: 150px; height: 150px; background: red; -moz-border-radius: 75px; -webkit-border-radius: 75px; opacity: 0.5; filter: alpha(opacity=50); top: -15px; left: 185px;}
.dot {width: 1px; position: absolute; height: 1px; background: #aaa; }
a { cursor: pointer;}
h1 { margin: 30px 0;}
</style>
<script>
var SineWave = function() {
this.css = function(p) {
var s = Math.sin(p*20)
var x = 500 - p * 300
var y = s * 50 + 150
var o = ((s+2)/4+0.1)
return {top: y + "px", left: x + "px", opacity: o}
}
};
$().ready(function() {
var Paths = {"arc":[], "bezier":[], "sine": []}
var path_fns = {
arc: function(i) {
return new $.path.arc({
center: [285,185],
radius: 100,
start: -i*20,
end: i*100,
dir: (i%2) ? 1 : -1
})
},
bezier: function(i) {
var x = i%2 ? 1 : -1
return new $.path.bezier({
start: { x:185, y:185, angle: i*20 * x},
end: {x:540,y:110, angle: i*10, length: i / 4.0}
})
},
sine : function() {
return new SineWave
}
}
for(var type in Paths) {
for(var i=0; i<10; i++ ) {
if(type == "sine" && i != 9)
continue
var path = path_fns[type](i)
Paths[type].push(path)
var css = {
"backgroundColor": (i%2) ? "red" : "yellow",
width: 20*(1+i),
height: 20*(1+i),
"-moz-border-radius": 10*(1+i),
"-webkit-border-radius": 10*(1+i),
marginLeft: -10*(1+i), // offset the div, so center is at origin
marginTop: -10*(1+i)
}
var $$ = $("<span class=pixel></span>").css(css)
// initialize to start
$$.css(path.css(1))
$("#" + type).append($$)
}
}
$(".start").click(function() {
var i =0;
var type = $(this).closest("div").attr("id")
$("#" + type + " .pixel").each(function() {
$(this).stop().animate({path: Paths[type][i] }, 3000)
i++;
})
})
$(".plot").click(function() {
var $$ = $("<div>")
var type = $(this).closest("div").attr("id")
for(var t=0; t<1;t+= 0.01) {
for(var i in Paths[type]) {
var d = $("<span class=dot></span>").css(Paths[type][i].css(t))
$$.append(d)
}
}
$("#" + type ).append($$)
})
})
</script>
<body>
<div class=page>
<h1>Test: jQuery.path animation </h1>
<h2>ten arcs</h2>
<div id=arc>
<p><a class=start >Start</a> </p>
<p><a class=plot >Plot</a> </p>
</div>
<h2>ten beziers</h2>
<div id=bezier>
<p><a class=start >Start</a> </p>
<p><a class=plot >Plot</a> </p>
</div>
<h2>custom path: sine wave</h2>
<div id=sine>
<p><a class=start >Start</a> </p>
<p><a class=plot >Plot</a> </p>
</div>
<h2>links</h2>
<ul>
<li><a href='http://github.com/weepy/jquery.path/raw/master/jquery.path.js'>Javascript file</a></li>
<li><a href='http://github.com/weepy/jquery.path'>Project Page</a></li>
<li><a href='http://github.com/weepy/jquery.path/issues'>Feedback</a></li>
</ul>
</div>
</body>
|
Download
