技术文章
当前位置:首页 > 技术文章

js/jquery网页背景图过渡变换效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js/jquery网页背景图过渡变换效果</title>
<meta name="keywords" content="网页背景图过渡变换效果,背景图片切换" />
<meta name="description" content="js/jquery网页背景图过渡变换效果,网页背景图片切换" />
<link rel="stylesheet" type="text/css" href="http://www.lantou.net/web/jquery/style.css" />
<!--[if lt IE 9]>
<script src="http://www.lantou.net/web/jquery/html5.js" type="text/javascript"></script>
<![endif]-->
<script type='text/javascript' src='http://www.lantou.net/web/jquery/comment-reply.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.lantou.net/web/jquery/jquery.js?ver=1.7.2'></script>
<style>
html, body{height: 100%;margin: 0px 0px 0px 0px;}
html{overflow: hidden;}
</style>    
<style>
img.bg-rand { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position:absolute; top: 0; left: 0; z-index:-10; }
@media screen and (max-width: 1024px) { img.bg-rand { left: 50%; margin-left: -512px; } } body { background-color: #000000; }  
</style>
<script type="text/javascript">
var flg=0;
function SImage(callback)
{var img = new Image();this.img = img;
var appname = navigator.appName.toLowerCase();if (appname.indexOf("netscape") == -1)
{img.onreadystatechange = function () {if (img.readyState == "complete"){callback(img);}};
} else {img.onload = function () {if (img.complete == true){callback(img);}}}}
SImage.prototype.get = function (url){this.img.src = url;}
var img1 = new SImage(icall);
img1.get("http://www.lantou.net/web/jquery/01.jpg");
var img2 = new SImage(icall);
img2.get("http://www.lantou.net/web/jquery/02.jpg");
var img3 = new SImage(icall);
img3.get("http://www.lantou.net/web/jquery/03.jpg");
var img4 = new SImage(icall);
img4.get("http://www.lantou.net/web/jquery/04.jpg");
function icall(obj)
{flg=flg+1;if(flg==4){document.getElementById("page_view").style.display="";}}
</script>
</head>
<body>   
<div id="page_view">
   <img id="bg-rand" class="bg-rand" src="http://www.lantou.net/web/jquery/04.jpg" alt="" />
    <img id="bg-preloader" style="display:none;"  src="http://www.lantou.net/web/jquery/04.jpg" alt=""/>
                </div>
    <script type="text/javascript">
            document.getElementById("page_view").style.display="none";
   var bbg_imgObject = jQuery("#bg-rand");
   var bbg_imgPreload = jQuery("#bg-preloader");bbg_imgObject.hide();
    bbg_imgPreload.load(
     function(){bbg_imgPreload.unbind();bbg_imgObject.fadeIn(600, "linear" ,startSlideshow);}
    ).each(function(){
     if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6 || jQuery.browser.opera)
     {jQuery(this).trigger("load");}
    });
  var bbg_timer;
  var bbg_image_base_path = "http://www.lantou.net/web/jquery";
  var bbg_image_array_pointer = 4;var bbg_images = new Array(4);
   bbg_images[0] = "01.jpg";
   bbg_images[1] = "02.jpg";
   bbg_images[2] = "03.jpg";
   bbg_images[3] = "04.jpg"; 
    function startSlideshow(){
     bbg_timer = setTimeout("bbg_changeBackground()", 6000);
     bbg_imgPreload.attr('src',bbg_image_base_path+'/'+bbg_images[bbg_image_array_pointer]);
    }
    function bbg_changeBackground(){
     clearTimeout(bbg_timer);
      bbg_imgObject.fadeOut(600,'linear', function(){
       bbg_imgObject.attr('src',bbg_image_base_path+'/'+bbg_images[bbg_image_array_pointer])
       .fadeIn(600,'linear', startSlideshow);
      });
     bbg_image_array_pointer ++;
     if(bbg_image_array_pointer >= bbg_images.length)
     bbg_image_array_pointer = 0;
    }
  </script> 
       
下载地址:http://www.lantou.net/web/jquery/jquery_img.rar
请自行复制地址下载。
</body>
</html>


js/jquery网页背景图过渡变换效果演示地址:
http://www.lantou.net/web/jquery/js_index_img_load.html