var radar = null; var d = 0 var t; var paper = null; var pos = new Array(10); function startRadar() { radar.rotate(d, 150, 150); d = d + 1; if (d > 360) d = 0; t = setTimeout("startRadar()", 30); } function stopRadar() { clearTimeout(t); radar.hide(); } function openRadar() { var circle = paper.circle(150, 150, 10); circle.attr({ "fill": "90-#1151f5:5-#4bc1ff:95", "stroke": "#fff" }); circle.animate({ r: 150 }, 2000); radar = paper.path("M150,150 v-150 a150,150 0 0,0 -150,150 z"); radar.hide(); radar.attr({ "fill": "225-#ff0:20-#ff0:50", "fill-opacity": "0.01", "stroke": "" }); } $(document).ready(function() { paper = Raphael("holder", 300, 300); openRadar(); setTimeout(function() { radar.show(); startRadar(); }, 3000); });
<!DOCTYPE html> <html> <head> <title>Radar</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <script src="http://yandex.st/raphael/1.5.2/raphael.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <input id="startBtn" type="button" disabled="disabled" onclick="this.disabled=true; radar.show(); startRadar(); document.getElementById('stopBtn').disabled=false" value="Start"/> <input id="stopBtn" type="button" onclick="this.disabled=true; radar.hide(); stopRadar();document.getElementById('startBtn').disabled=false" value="Stop"/> <div id="holder"></div> </body> </html>
body { background: #333; color: #fff; } #holder { height:300px; left: 50%; margin: -150px 150px 150px -150px; position: absolute; top: 50%; width: 300px; z-index:50; }