<html> <head>
<title>spin.js</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="http://fgnass.github.io/spin.js/assets/main.css?v=6" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://fgnass.github.io/spin.js/assets/fd-slider/fd-slider.css?v=2">
<script type="text/javascript" src="http://fgnass.github.io/spin.js/assets/prettify.js"></script></head><body>
<div id="content">
<div id="example"> <h2>Example</h2>
<div id="preview"></div>
<form id="opts">
<label>Lines:</label><input type="text" name="lines" min="5" max="16" step="2" value="12"> <br>
<label>Length:</label>
<input type="text" name="length" min="0" max="40" value="20"><br> <label>Width:</label>
<input type="text" name="width" min="2" max="30" value="10"><br> <label>Radius:</label>
<input type="text" name="radius" min="0" max="60" value="30"><br> <label>Corners:</label>
<input type="text" name="corners" min="0" max="1" step="0.1" value="1"><br>
<label>Rotate:</label>
<input type="text" name="rotate" min="0" max="90" value="0"><br> <label>Trail:</label>
<input type="text" name="trail" min="10" max="100" value="60"><br> <label>Speed:</label>
<input type="text" name="speed" min="0.5" max="2.2" step="0.1" value="1"><br>
<label>Direction:</label>
<select name="direction">
<option value="1">Clockwise</option> <option value="-1">Counterclockwise</option> </select> <br>
<label>Shadow:</label>
<input type="checkbox" name="shadow"><br>
<label>Hwaccel:</label>
<input type="checkbox" name="hwaccel"><br>
</form></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="http://fgnass.github.io/spin.js/assets/fd-slider/fd-slider.js"></script><script src="http://fgnass.github.io/spin.js/dist/spin.min.js?v=1.2.8"></script><script> $.fn.spin = function(opts) {
this.each(function() {
var $this = $(this),
data = $this.data(); if (data.spinner) {
data.spinner.stop();
delete data.spinner;
}
if (opts !== false) {
data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
}
});
return this;
};
//$('#dot').spin();
prettyPrint();
function update() {
var opts = {};
$('#opts input[min], #opts select').each(function() {
$('#opt-' + this.name).text(opts[this.name] = parseFloat(this.value));
});
$('#opts input:checkbox').each(function() {
opts[this.name] = this.checked;
$('#opt-' + this.name).text(this.checked);
});
$('#preview').spin(opts);
if ($('#share').is(':checked')) {
window.location.replace('#?' + $('form').serialize());
}
}
$(function() {
var params = {};
var hash = /^#\?(.*)/.exec(location.hash);
if (hash) {
$('#share').prop('checked', true);
$.each(hash[1].split(/&/), function(i, pair) {
var kv = pair.split(/=/);
params[kv[0]] = kv[kv.length-1];
});
}
$('#opts input[min], #opts select').each(function() {
var val = params[this.name];
if (val !== undefined) this.value = val;
this.onchange = update; });
$('#opts input:checkbox').each(function() {
this.checked = !!params[this.name];
this.onclick = update; });
$('#share').click(function() {
window.location.replace(this.checked ? '#?' + $('form').serialize() : '#!'); }); update(); });</script>
</body></html>
No comments:
Post a Comment