Image background change in HTML like “life.com”_问答_开发者

Image background change in HTML like “life.com”

开发者 https://www.devze.com 2023-02-19 14:18 出处：网络

Does anybody know how to achieve an effect of smoothly c开发者_StackOverflowhanging the background color like in life.com\'s header logo?I\'d recommend using JQuery UI\'s animate method. This allows y

相关专题：css graphics

Does anybody know how to achieve an effect of smoothly c开发者_StackOverflowhanging the background color like in life.com's header logo?

I'd recommend using JQuery UI's animate method. This allows you to change CSS properties such as the background over a certain time period. See http://jqueryui.com/demos/animate/ for more information.

They are using javascript to periodically change the background color of the div that contains the logo image.

here you are the same effect:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 spectrum(255, 255, 255);
}); 

 function spectrum(i, j , k){

    var hue = 'rgb(' + i + ',' + j + ',' + k + ')';
    $('body').css( { backgroundColor: hue });
    var i = i-1;
    if(i < 1) { var j = j-1; }
    if(j < 1) { var k = k-1; }
    if(k < 1) { var i = 255; var j = 255; var k = 255;}
    setTimeout ( "spectrum(" + i +"," + j + "," + k + ")", 100 );
 }

</script>
</head>
</body>
</html>

You'd want to use something like hover fade redux.

Try this with jquery:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 setInterval ( "spectrum()", 1000 );
}); 

 function spectrum(){
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $('body').css( { backgroundColor: hue });

 }

</script>
</head>
</body>
</html>