Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html><head>
- <script type="text/javascript">
- <!--
- function animate(id,color0,color1,duration){
- //public attributes
- this.elem = document.getElementById(id);
- //private attributes
- var r0= parseInt(color0.substring(0,2),16);
- var g0= parseInt(color0.substring(2,4),16);
- var b0= parseInt(color0.substring(4,6),16);
- var r1= parseInt(color1.substring(0,2),16);
- var g1= parseInt(color1.substring(2,4),16);
- var b1= parseInt(color1.substring(4,6),16);
- var wait = 100; //100ms
- var steps = duration/wait;
- var rstep = (r1 - r0) / (steps);
- var gstep = (g1 - g0) / (steps);
- var bstep = (b1 - b0) / (steps);
- var self = this;
- //public functions
- this.step = function() {
- steps--;
- if ( steps>0 ) {
- r0 = Math.floor(r0 + rstep);
- g0 = Math.floor(g0 + gstep);
- b0 = Math.floor(b0 + bstep);
- elem.style.backgroundColor = 'rgb('+r0+','+g0+','+b0+')';
- //alert(steps + ' ; ' + elem.style.backgroundColor);
- window.setTimeout(function(){self.step();}, wait);
- //http://www.west-wind.com/weblog/posts/2006/Mar/28/JavaScript-windowSetTimeout-to-a-JavaScript-Class-method-or-function-with-parameters#5042
- //http://blog.vorpal.cc/category/development/javascript-class-event-handlers.html
- } else {
- elem.style.backgroundColor = '#'+color1;
- }
- }
- step();
- //alert(this.b0);
- }
- //-->
- </script>
- </head><body>
- <div id="anim" style="width:100px; height:100px; background-color:#ff0000"></div>
- <input type="button" onclick="animate('anim','1122ff','ff2211',1000)" value="test" />
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement