网站背景拉伸平铺jQuery插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是网站背景拉伸平铺jQuery插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>��վ��������ƽ��jQuery���</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-bgstretcher-3.0.1.min.js"></script>
<link rel="stylesheet" href="css/bgstretcher.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<h2>Simple Mode</h2>
<p>The bgStretcher plugin allows you to add an image to the background of your page 
or any element inside of the page. bgStretcher will automatically adjust size of 
the background image to fill the area of the target element with a proportionally 
resized image.</p>
<p>This demonstration shows how bgStretcher works in simple slideshow mode. Resize 
your browser window to view how the image will proportionally adjust to the size 
of the window.</p>
<script type="text/javascript">
        jQuery(function($){
            $("body").bgStretcher({
                images: ["images/sample-2.jpg"],
                imageWidth: 1600,
                imageHeight: 1200
            })
        });
    </script>
</body>
</html>

JS代码(jquery-bgstretcher-3.0.1.min.js):

/*! bgStretcher 3.0.1 jQuery Plugin (c) 2010-2013 www.w3Blender.com For any questions and support please visit www.w3blender.com. */
(function(e){
	var t,n,r,i,s,o,u,a,f,l;
	t=null;
	n="";
	r="";
	i=!1;
	s=!1;
	o=null;
	u=[];
	a=[];
	f=0;
	l={
	imageWidth:0,imageHeight:0,marginLeft:0,marginTop:0}
;
	var c=function(){
	return e(".bgstretcher-page").length>0||e(".bgstretcher-area").length>0}
,h=function(){
	return typeof console!="undefined"&&console!==null}
,p=function(e){
	h()?console.log(e):alert(e)}
,d=function(){
	if(navigator.appName==="Microsoft Internet Explorer"){
	var e=new RegExp("MSIE ([0-9]{
	1,}
[.0-9]{
	0,}
)");
	if(e.exec(navigator.userAgent)!==null&&parseFloat(RegExp.$1)<=6)return!0}
return!1}
,v={
	containerId:"bgstretcher",resizeProportionally:!0,resizeAnimate:!1,images:[],imageWidth:1024,imageHeight:768,maxWidth:"auto",maxHeight:"auto",nextSlideDelay:3e3,slideShowSpeed:"normal",slideShow:!0,transitionEffect:"fade",slideDirection:"N",sequenceMode:"normal",buttonPrev:"",buttonNext:"",pagination:"",anchoring:"left top",anchoringImg:"left top",preloadImages:!1,startElementIndex:0,sliderCallbackFunc:null}
;
	e.fn.bgStretcher=function(i){
	var s=v,u=function(t){
	s=e.extend({
}
,v,i);
	e.fn.bgStretcher.settings=s;
	if(s.images.length<=0){
	p("Error:Images array cannot be empty!");
	return!1}
t.addClass("bgstretcher-container");
	a(t);
	return t}
,a=function(i){
	c()||h(i);
	r="#"+s.containerId;
	t=e(r);
	n="#"+s.containerId+" LI";
	if(t.length<1)return;
	e(n).hide().css({
	"z-index":1,overflow:"hidden"}
);
	e(window).unbind("resize").bind("resize",function(){
	f(i)}
);
	!0===d()&&e(window).unbind("scroll").bind("scroll",function(){
	e("#"+s.containerId).css("top",e(window).scrollTop())}
);
	f(i);
	var u=0,a=0,l=0;
	e(r+" ul").css({
	left:0,top:0}
);
	e(r+" li.bgs-current").removeClass("bgs-current");
	e(r+" li:first").addClass("bgs-current");
	if(e.fn.bgStretcher.settings.transitionEffect==="simpleSlide"){
	if(e.fn.bgStretcher.settings.slideDirection==="random"){
	e.fn.bgStretcher.settings.slideDirection="normal";
	p("The effect 'simpleSlide cannot be used in mode 'random'. The mode has been automatically switched to 'normal'.")}
e(n).css({
	"float":"left",position:"static"}
).show();
	if(e.fn.bgStretcher.settings.slideDirection==="NW"||e.fn.bgStretcher.settings.slideDirection==="NE")e.fn.bgStretcher.settings.slideDirection="N";
	if(e.fn.bgStretcher.settings.slideDirection==="SW"||e.fn.bgStretcher.settings.slideDirection==="SE")e.fn.bgStretcher.settings.slideDirection="S";
	if(e.fn.bgStretcher.settings.slideDirection==="S"||e.fn.bgStretcher.settings.slideDirection==="E"){
	e.fn.bgStretcher.settings.sequenceMode="back";
	e(n).removeClass("bgs-current");
	e(n).eq(e(n).length-e.fn.bgStretcher.settings.startElementIndex-1).addClass("bgs-current");
	if(e.fn.bgStretcher.settings.slideDirection==="E"){
	a=e(r+" LI").index(e(r+" LI.bgs-current"))*e(r).width()*-1;
	l=0}
else{
	l=e(r+" LI").index(e(r+" LI.bgs-current"))*e(r).height()*-1;
	a=0}
e(r+" UL").css({
	left:a+"px",top:l+"px"}
)}
else{
	s.sequenceMode="normal";
	if(e.fn.bgStretcher.settings.startElementIndex!==0){
	if(e.fn.bgStretcher.settings.slideDirection==="N"){
	l=e(r+" LI").index(e(r+" LI.bgs-current"))*e(r).height()*-1;
	a=0}
else{
	a=e(r+" LI").index(e(r+" LI.bgs-current"))*e(r).width()*-1;
	l=0}
e(r+" UL").css({
	left:a+"px",top:l+"px"}
)}
}
}
if(e(s.buttonNext).length||e(s.buttonPrev).length||e(s.pagination).length)if(s.sequenceMode==="random")p("'random' mode cannot be used when prevButton,nextButton and/or pagination is active.");
	else{
	if(e(s.buttonPrev).length){
	e(s.buttonPrev).addClass("bgStretcherNav bgStretcherNavPrev");
	e(s.buttonPrev).click(function(){
	e.fn.bgStretcher.buttonSlide("prev")}
)}
if(e(s.buttonNext).length){
	e(s.buttonNext).addClass("bgStretcherNav bgStretcherNavNext");
	e(s.buttonNext).click(function(){
	e.fn.bgStretcher.buttonSlide("next")}
)}
e(s.pagination).length&&e.fn.bgStretcher.pagination()}
if(s.sequenceMode==="random"){
	var v=Math.floor(Math.random()*e(n).length);
	e.fn.bgStretcher.buildRandom(v);
	s.transitionEffect!=="simpleSlide"&&(e.fn.bgStretcher.settings.startElementIndex=v);
	u=v}
else{
	e.fn.bgStretcher.settings.startElementIndex>e(n).length-1&&(e.fn.bgStretcher.settings.startElementIndex=0);
	u=e.fn.bgStretcher.settings.startElementIndex;
	s.transitionEffect==="simpleSlide"&&(e.fn.bgStretcher.settings.slideDirection==="S"||e.fn.bgStretcher.settings.slideDirection==="E")&&(u=e(n).length-1-e.fn.bgStretcher.settings.startElementIndex)}
e(n).eq(u).show().addClass("bgs-current");
	e.fn.bgStretcher.preloadImage(e(n).eq(u));
	if(s.slideShow&&e(n).length>1){
	e.fn.bgStretcher.clearSliderTimeout();
	o=setTimeout("jQuery.fn.bgStretcher.slideShow('"+jQuery.fn.bgStretcher.settings.sequenceMode+"',-1)",s.nextSlideDelay)}
}
,f=function(i){
	var o=0,u=0,a=0,f=0,c=0,h=0;
	if(e("body").hasClass("bgstretcher-container")){
	o=parseInt(e(window).width(),10);
	u=parseInt(e(window).height(),10)}
else{
	e(".bgstretcher").css("position","absolute").css("top","0px");
	o=parseInt(i.width(),10);
	u=parseInt(i.height(),10)}
s.maxWidth!=="auto"?a=o>s.maxWidth?s.maxWidth:o:a=o;
	s.maxHeight!=="auto"?f=u>s.maxHeight?s.maxHeight:u:f=u;
	t.width(a).height(f);
	if(!1===s.resizeProportionally){
	c=a;
	h=f}
else{
	var d=s.imageWidth,v=s.imageHeight,m=v/d;
	c=a;
	h=Math.round(a*m);
	if(h<f){
	h=f;
	c=Math.round(h/m)}
}
var g=0,y=0,b;
	if(s.anchoring!=="left top"){
	b=s.anchoring.split(" ");
	if(b.length===2){
	b[0]==="right"?g=o-a:b[0]==="center"&&(g=Math.round((o-a)/2));
	b[1]==="bottom"?y=u-f:b[1]==="center"&&(y=Math.round((u-f)/2));
	t.css({
	marginLeft:g+"px",marginTop:y+"px"}
)}
}
g=0;
	y=0;
	if(s.anchoringImg!=="left top"){
	b=s.anchoringImg.split(" ");
	if(b.length===2){
	b[0]==="right"?g=a-c:b[0]==="center"&&(g=Math.round((a-c)/2));
	b[1]==="bottom"?y=f-h:b[1]==="center"&&(y=Math.round((f-h)/2))}
}
l.marginLeft=g;
	l.marginTop=y;
	if(t.find("LI:first").hasClass("swf-mode"))if(typeof SWFObject=="undefined")p("SWFObject is required if you would like to use flash with bgStretcher.");
	else{
	var w=t.find("LI:first").html();
	t.find("LI:first").html('<div id="bgstretcher-flash">&nbsp;
	</div>');
	var E=new SWFObject(w,"flash-obj",a,f,"9");
	E.addParam("wmode","transparent");
	E.write("bgstretcher-flash")}
l.imageWidth=c;
	l.imageHeight=h;
	if(!s.resizeAnimate){
	t.children("UL").children("LI.img-loaded").find("IMG").css({
	marginLeft:l.marginLeft+"px",marginTop:l.marginTop+"px"}
);
	t.children("UL").children("LI.img-loaded").find("IMG").css({
	width:l.imageWidth+"px",height:l.imageHeight+"px"}
)}
else{
	t.children("UL").children("LI.img-loaded").find("IMG").animate({
	marginLeft:l.marginLeft+"px",marginTop:l.marginTop+"px"}
,"normal");
	t.children("UL").children("LI.img-loaded").find("IMG").animate({
	width:l.imageWidth+"px",height:l.imageHeight+"px"}
,"normal")}
e(n).width(t.width()).height(t.height());
	if(e.fn.bgStretcher.settings.transitionEffect==="simpleSlide")if(e.fn.bgStretcher.settings.slideDirection==="W"||e.fn.bgStretcher.settings.slideDirection==="E"){
	t.children("UL").width(t.width()*e(n).length).height(t.height());
	e(r+" LI").index(e(r+" LI.bgs-current"))!==-1&&t.children("UL").css({
	left:e(r+" LI").index(e(r+" LI.bgs-current"))*t.width()*-1+"px"}
)}
else{
	t.children("UL").height(t.height()*e(n).length).width(t.width());
	e(r+" LI").index(e(r+" LI.bgs-current"))!==-1&&t.children("UL").css({
	top:e(r+" LI").index(e(r+" LI.bgs-current"))*e(r).height()*-1+"px"}
)}
}
,h=function(t){
	var n="";
	t.each(function(){
	e(this).wrapInner('<div class="bgstretcher-page" />').wrapInner('<div class="bgstretcher-area" />');
	n='<div id="'+s.containerId+'" class="bgstretcher"><ul>';
	if(s.images.length>0){
	var t;
	t=s.images[0].split(".");
	t=t[t.length-1];
	if(t!=="swf"){
	var r=0;
	for(var i=0;
	i<s.images.length;
	i++){
	"simpleSlide"===s.transitionEffect&&"back"===s.sequenceMode?r=s.images.length-1-i:r=i;
	!0===e.fn.bgStretcher.settings.preloadImages?n+='<li><span class="image-path">'+s.images[r]+"</span></li>":n+='<li class="img-loaded"><img src="'+s.images[r]+'" alt="" /></li>'}
}
else n+='<li class="swf-mode">'+s.images[0]+"</li>"}
n+="</ul></div>";
	var o=e(this).children(".bgstretcher-area");
	e(n).prependTo(o);
	o.css({
	position:"relative"}
);
	o.children(".bgstretcher-page").css({
	position:"relative","z-index":3}
)}
)}
;
	return u(this)}
;
	e.fn.bgStretcher.preloadImage=function(t){
	if(t.hasClass("img-loaded"))return!0;
	t.find("SPAN.image-path").each(function(){
	var t=e(this).html(),n="",r=e(this).parent(),i=new Image;
	e(i).load(function(){
	e(this).hide();
	r.prepend(this);
	e(this).fadeIn(100)}
).error(function(){
}
).attr("src",t).attr("alt",n);
	e(i).css({
	marginLeft:l.marginLeft+"px",marginTop:l.marginTop+"px",width:l.imageWidth+"px",height:l.imageHeight+"px"}
)}
);
	t.addClass("img-loaded");
	return!0}
;
	e.fn.bgStretcher.play=function(){
	i=!1;
	e.fn.bgStretcher.clearSliderTimeout();
	e.fn.bgStretcher.slideShow(e.fn.bgStretcher.settings.sequenceMode,-1)}
;
	e.fn.bgStretcher.clearSliderTimeout=function(){
	if(o!==null){
	clearTimeout(o);
	o=null}
}
;
	e.fn.bgStretcher.pause=function(){
	i=!0;
	e.fn.bgStretcher.clearSliderTimeout()}
;
	e.fn.bgStretcher.sliderDestroy=function(){
	var t=e(".bgstretcher-page").html();
	e(".bgstretcher-container").html("").html(t).removeClass("bgstretcher-container");
	e.fn.bgStretcher.clearSliderTimeout();
	i=!1}
;
	e.fn.bgStretcher.slideShow=function(t,a){
	s=!0;
	if(e(n).length<2)return!0;
	a||(a=-1);
	var l=e(r+" LI.bgs-current"),c=!1;
	e(l).stop(!0,!0);
	if(a===-1)switch(t){
	case"back":c=l.prev();
	c.length||(c=e(r+" LI:last"));
	break;
	case"random":if(f===e(r+" LI").length){
	e.fn.bgStretcher.buildRandom(u[e(r+" LI").length-1]);
	f=0}
c=e(r+" LI").eq(u[f]);
	f++;
	break;
	default:c=l.next();
	c.length||(c=e(r+" LI:first"))}
else c=e(r+" LI").eq(a);
	e(r+" LI").removeClass("bgs-current");
	e.fn.bgStretcher.preloadImage(c);
	c.addClass("bgs-current");
	switch(e.fn.bgStretcher.settings.transitionEffect){
	case"fade":e.fn.bgStretcher.effectFade(l,c);
	break;
	case"simpleSlide":e.fn.bgStretcher.simpleSlide();
	break;
	case"superSlide":e.fn.bgStretcher.superSlide(l,c,t);
	break;
	default:e.fn.bgStretcher.effectNone(l,c)}
if(e(e.fn.bgStretcher.settings.pagination).find("LI").length){
	e(e.fn.bgStretcher.settings.pagination).find("LI.showPage").removeClass("showPage");
	e(e.fn.bgStretcher.settings.pagination).find("LI").eq(e(r+" LI").index(e(r+" LI.bgs-current"))).addClass("showPage")}
e.fn.bgStretcher.settings.sliderCallbackFunc&&typeof e.fn.bgStretcher.settings.sliderCallbackFunc=="function"&&e.fn.bgStretcher.settings.sliderCallbackFunc.call();
	i||(o=setTimeout("jQuery.fn.bgStretcher.slideShow('"+jQuery.fn.bgStretcher.settings.sequenceMode+"',-1)",jQuery.fn.bgStretcher.settings.nextSlideDelay));
	return!0}
;
	e.fn.bgStretcher.effectNone=function(e,t){
	t.show();
	e.hide();
	s=!1}
;
	e.fn.bgStretcher.effectFade=function(t,n){
	n.fadeIn(e.fn.bgStretcher.settings.slideShowSpeed);
	t.fadeOut(e.fn.bgStretcher.settings.slideShowSpeed,function(){
	s=!1}
)}
;
	e.fn.bgStretcher.simpleSlide=function(){
	var t,n;
	if(e.fn.bgStretcher.settings.slideDirection==="N"||e.fn.bgStretcher.settings.slideDirection==="S"){
	n=e(r+" LI").index(e(r+" LI.bgs-current"))*e(r).height()*-1;
	t=0;
	e(r+" UL").css({
	left:"0"}
)}
else{
	t=e(r+" LI").index(e(r+" LI.bgs-current"))*e(r).width()*-1;
	n=0;
	e(r+" UL").css({
	top:"0"}
)}
e(r+" UL").stop().animate({
	left:t+"px",top:n+"px"}
,e.fn.bgStretcher.settings.slideShowSpeed,function(){
	s=!1}
)}
;
	e.fn.bgStretcher.superSlide=function(t,n,i){
	var o,u;
	switch(e.fn.bgStretcher.settings.slideDirection){
	case"S":u=e(r).height();
	o=0;
	break;
	case"E":u=0;
	o=e(r).width();
	break;
	case"W":u=0;
	o=e(r).width()*-1;
	break;
	case"NW":u=e(r).height()*-1;
	o=e(r).width()*-1;
	break;
	case"NE":u=e(r).height()*-1;
	o=e(r).width();
	break;
	case"SW":u=e(r).height();
	o=e(r).width()*-1;
	break;
	case"SE":u=e(r).height();
	o=e(r).width();
	break;
	default:u=e(r).height()*-1;
	o=0}
if(i==="back"){
	n.css({
	"z-index":2,top:u+"px",left:o+"px"}
);
	n.show();
	n.animate({
	left:"0px",top:"0px"}
,e.fn.bgStretcher.settings.slideShowSpeed,function(){
	t.hide();
	e(this).css({
	"z-index":1}
);
	s=!1}
)}
else{
	t.css("z-index",2);
	n.show();
	t.animate({
	left:o+"px",top:u+"px"}
,e.fn.bgStretcher.settings.slideShowSpeed,function(){
	e(this).hide().css({
	"z-index":1,top:"0px",left:"0px"}
);
	s=!1}
)}
}
;
	e.fn.bgStretcher.buildRandom=function(t){
	var r=e(n).length,i,s,o;
	for(i=0;
	i<r;
	i++){
	u[i]=i;
	a[i]=Math.random()*r}
for(i=0;
	i<r;
	i++)for(s=0;
	s<r-i-1;
	s++)if(a[s]>a[s+1]){
	o=a[s];
	a[s]=a[s+1];
	a[s+1]=o;
	o=u[s];
	u[s]=u[s+1];
	u[s+1]=o}
if(u[0]===t){
	o=u[0];
	u[0]=u[r-1];
	u[r-1]=o}
}
;
	e.fn.bgStretcher.buttonSlide=function(t){
	if(s||e(n).length<2)return!1;
	var r="";
	if(t==="prev"){
	r="back";
	e.fn.bgStretcher.settings.sequenceMode==="back"&&(r="normal")}
else r=e.fn.bgStretcher.settings.sequenceMode;
	e(n).stop(!0,!0);
	e.fn.bgStretcher.clearSliderTimeout();
	e.fn.bgStretcher.slideShow(r,-1);
	return!1}
;
	e.fn.bgStretcher.pagination=function(){
	var t=e(n).length,r="",i=0;
	if(t>0){
	r+="<ul>";
	for(i=0;
	i<t;
	i++)r+='<li><a href="javascript:;
	">'+(i+1)+"</a></li>";
	r+="</ul>";
	e(e.fn.bgStretcher.settings.pagination).html(r);
	e(e.fn.bgStretcher.settings.pagination).find("li:first").addClass("showPage");
	e(e.fn.bgStretcher.settings.pagination).find("a").click(function(){
	if(e(this).parent().hasClass("showPage"))return!1;
	e(n).stop(!0,!0);
	e.fn.bgStretcher.clearSliderTimeout();
	e.fn.bgStretcher.slideShow(e.fn.bgStretcher.settings.sequenceMode,e(e.fn.bgStretcher.settings.pagination).find("a").index(e(this)));
	return!1}
)}
return!1}
;
	e.fn.bgStretcher.settings={
}
}
)(jQuery);

CSS代码(bgstretcher.css):

/*! bgStretcher 3.0.1 jQuery Plugin (c) 2010-2013 www.w3Blender.com For any questions and support please visit www.w3blender.com.*/
.bgstretcher-area{text-align:left;}
.bgstretcher{background:black;overflow:hidden;width:100%;position:fixed;z-index:1;}
.bgstretcher,.bgstretcher ul,.bgstretcher li{left:0;top:0;}
.bgstretcher ul,.bgstretcher li{position:absolute;}
.bgstretcher ul,.bgstretcher li{margin:0;padding:0;list-style:none;}
/* Compatibility with old browsers */
.bgstretcher{_position:absolute;}

CSS代码(demo.css):

body{margin:30px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.7);font-size:21px;font-weight:lighter;}
h2{font-size:200%;}
a{display:inline-block;padding:5px 8px;line-height:100%;background-color:rgba(0,0,0,0.9);color:#fff;text-decoration:none;text-shadow:none;}
body.inverse{color:#333;text-shadow:none;}
body.inverse h2{color:#111;}
a:hover{background-color:#fff;color:#000;text-decoration:none;}
ul.list{list-style:none;margin:0;padding:0;}
li{margin-bottom:5px;font-size:80%;}
.bgstretcher-page{padding:20px;background-color:rgba(0,0,0,0.45);color:#fff;}
.sample-div{height:400px;}
button{font-size:17px;}

附件:下载该文件资源,减少时间成本(增值服务)