Fx.Log = new Class({ Extends: Fx, initialize: function(element, options){ this.parent(options); this.element = document.id(element); }, set: function(now){ this.element.set('text', now.round()); return this; } }); var myFx = new Fx.Log('log'); /* demo utility stuff */ $('options').addEvent('submit',function(event){ event.stop(); myFx.setOptions(this.toPairs()); myFx.options.duration = myFx.options.duration.toInt(); myFx.start($('from').value.toInt(), $('to').value.toInt()); }); Element.implement({ toPairs: function(){ var json = {}; this.getElements('input, select, textarea', true).each(function(el){ if (!el.name || el.disabled || el.type == 'submit' || el.type == 'reset' || el.type == 'file') return; var value = (el.tagName.toLowerCase() == 'select') ? Element.getSelected(el).map(function(opt){ return opt.value; }) : ((el.type == 'radio' || el.type == 'checkbox') && !el.checked) ? null : el.value; $splat(value).each(function(val){ if (typeof val != 'undefined') json[el.name] = val; }); }); return json; } });
<h1 id=log>Waiting ...</h1> <form id=options> <p> Count from <input id=from type=text value=0> to <input id=to type=text value=100> </p> <p> Transition <select name=transition> <option>linear</option> <option>pow:in</option> <option>pow:out</option> <option>pow:in:out</option> <option>expo:in</option> <option>expo:out</option> <option>expo:in:out</option> <option>circ:in</option> <option>circ:out</option> <option>circ:in:out</option> <option>sine:in</option> <option>sine:out</option> <option>sine:in:out</option> <option>back:in</option> <option>back:out</option> <option>back:in:out</option> <option>bounce:in</option> <option>bounce:out</option> <option>bounce:in:out</option> <option>elastic:in</option> <option selected>elastic:out</option> <option>elastic:in:out</option> <option>quad:in</option> <option>quad:out</option> <option>quad:in:out</option> <option>cubic:in</option> <option>cubic:out</option> <option>cubic:in:out</option> <option>quart:in</option> <option>quart:out</option> <option>quart:in:out</option> <option>quint:in</option> <option>quint:out</option> <option>quint:in:out</option> </select> </p> <p> Duration: <input type=text name=duration value=3000> </p> <p> <input type=submit value=Count!> </p> </form>
body { font-family: helvetica, arial; } #log { text-align: center; padding: 10px; font-size: 30px; color: #fff; text-shadow: 0 -1px 1px #3267b8; border: solid 1px #3267b8; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.5); background-image: -moz-linear-gradient(top, #75a3dc, #3267b8); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #75a3dc),color-stop(1, #3267b8)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#75a3dc', EndColorStr='#3267b8'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#75a3dc', EndColorStr='#3267b8')"; /* IE8 */ } #options { margin-top: 20px; padding: 10px; background: #f0f0f0; border: solid 1px #888; } p { margin-top: 1em; margin-bottom: 1em; }