图片如何实现判断高度调整自适应全屏

EiffeDesign 2013-01-31 10:49:33

<style type="text/css">
#banner {position:relative; height:100%; overflow:hidden; }
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
margin:0; padding:0; bottom:10%; left:50%;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}

#banner_list img {border:0px; width:100%;}
#banner_list a{position:absolute;}
</style>

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
var t = n = 0, count;
$(document).ready(function(){
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner li").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 3000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})

function showAuto()
{
n = n >=(count - 1) ? 0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>
</head>

<body scrollbars="no" scroll="no">
<div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png);">
<div id="banner">
<ul>
<li class="on">1</li>
<li>2</li>
</ul>
<div id="banner_list">
<a><img src="imgs/main-1.jpg" /></a>
<a><img src="imgs/main-2.jpg" /></a>
</div>
</div>
</div>
</body>
</html>


我用淡入淡出效果做了全屏,但是高度问题一直无法解决,
1、图片永远水平居中
2、图片宽度自动全屏后,能否判断如果图片高度小于网页显示高度,图片高度自动等比例放大到网页显示高度,图片垂直居中显示

图片的全屏效果就像网易轻博客http://www.lofter.com/ 的背景图片一样,不管网页显示的内容宽度是多少,永远是自适应全屏,居中显示
...全文
4567 14 打赏 收藏 举报
写回复
14 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
fzfei2 2013-02-01
再试试

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html,body{width:100%;height:100%}
#banner {position:relative; height:100%; overflow:hidden; }
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
            margin:0; padding:0; bottom:10%; left:50%;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
 
#banner_list img {border:0px; width:100%;}
#banner_list a{position:absolute;}
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function(){
        count=$("#banner_list a").length;
        var bw=$('body').width(),bh=$('body').height();
        $('#banner_list img').load(function(){
      resizeImg(this);
      var p=$(this).parent();
      if(p.index())p.hide();
        });
        $('#banner_list img').each(function(i){
          resizeImg(this);
          if(this.offsetWidth && i)$(this).parent().hide();
        });
        function resizeImg(img){
          if(!img.offsetWidth  ) return;
          var img=$(img),w=img.width(),h=img.height();
      if(bh<h){
            w=parseInt(bh/h*w);
            h=bh;
          }else if(bw<w){
            h=parseInt(bw/w*h);
            w=bw;
          }else{
            if(w>h){
              h=parseInt(bw/w*h);
              w=bw;
            }else{
              w=parseInt(bh/h*w);
              h=bh;
            }
          }
          img.css({
            width:w,
            height:h
          });
          img.parent().css({
             left: (bw-w)>>1,
             top: (bh-h)>>1 
          });
        }
  
        $("#banner li").click(function() {
            var i = $(this).text()-1;
            n = i;
            if (i >= count) return;
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
            //document.getElementById("banner").style.background="";
            $(this).toggleClass("on");
            $(this).siblings().removeAttr("class");
        });
        //t = setInterval("showAuto()", 3000);
        // $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
    })
     
//    function showAuto()
//    {
//        n = n >=(count - 1) ? 0 : ++n;
//        $("#banner li").eq(n).trigger('click');
//    }
</script>
</head>
 
<body scrollbars="no" scroll="no">
<div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png) #aaa;">
<div id="banner">    
    <ul>
        <li class="on">1</li>
        <li>2</li>
    </ul>
   <div id="banner_list">
        <a><img src="http://img.hb.aicdn.com/707cb9414334425845c2768b97e1766889ce5a1129c88-LRF7jf_fw554" /></a>
        <a><img src="http://imgsrc.baidu.com/forum/pic/item/aefd5266d016092443074862d40735fae6cd34ad.jpg" /></a>
    </div>
</div>
</div>
</body>
</html>
  • 打赏
  • 举报
回复
fzfei2 2013-02-01
看下,是不是这效果

<style type="text/css">
#banner {position:relative; height:100%; overflow:hidden; }
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
			margin:0; padding:0; bottom:10%; left:50%;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}

#banner_list img {border:0px; width:100%;}
#banner_list a{position:absolute;}
 </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	var t = n = 0, count;
	$(document).ready(function(){	
		count=$("#banner_list a").length;
		var bw=$('body').width(),bh=$('body').height();
		$('#banner_list img').each(function(i){this.index=i})
		$('#banner_list img').load(function(){
      resizeImg(this);
      var p=$(this).parent();
		  if(p.index())p.hide();
		});
		function resizeImg(img){
		  var img=$(img),w=img.width(),h=img.height(),aw,ah;
      if(bh<h){
		    w=parseInt(bh/h*w);
		    h=bh;
		  }else if(bw<w){
		    h=parseInt(bw/w*h);
		    w=bw;
		  }else{
		    if(w>h){
  		    h=parseInt(bw/w*h);
  		    w=bw;
		    }else{
  		    w=parseInt(bh/h*w);
  		    h=bh;
		    }
		  }
		  img.css({
		    width:w,
		    height:h
		  });
		  img.parent().css({
		     left: (bw-w)>>1,
		     top: (bh-h)>>1 
		  });
		}
 
		$("#banner li").click(function() {
			var i = $(this).text() - 1;
			n = i;
			if (i >= count) return;
			$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
			//document.getElementById("banner").style.background="";
			$(this).toggleClass("on");
			$(this).siblings().removeAttr("class");
		});
		//t = setInterval("showAuto()", 3000);
		// $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
	})
	
//	function showAuto()
//	{
//		n = n >=(count - 1) ? 0 : ++n;
//		$("#banner li").eq(n).trigger('click');
//	}
</script>
</head>

<body scrollbars="no" scroll="no">
<div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png) #aaa;">
<div id="banner">	
    <ul>
        <li class="on">1</li>
        <li>2</li>
    </ul>
   <div id="banner_list">
        <a><img src="http://img.hb.aicdn.com/707cb9414334425845c2768b97e1766889ce5a1129c88-LRF7jf_fw554" /></a>
        <a><img src="http://imgsrc.baidu.com/forum/pic/item/aefd5266d016092443074862d40735fae6cd34ad.jpg" /></a>
	</div>
</div>
</div>
</body>
</html>
  • 打赏
  • 举报
回复
EiffeDesign 2013-02-01
引用 11 楼 wbb123yu 的回复:
引用 10 楼 EiffeDesign 的回复: JavaScript code?1#banner_list img {border:0px; width:100%;min-height: expression(document.documentElement.clientHeight + "px"); margin-left:expression((document.documentEleme……
不行哦,因为我的图片还带了切换效果,不单单只有一张图片!
  • 打赏
  • 举报
回复
wbb123yu 2013-02-01
引用 10 楼 EiffeDesign 的回复:
JavaScript code?1#banner_list img {border:0px; width:100%;min-height: expression(document.documentElement.clientHeight + "px"); margin-left:expression((document.documentElement.clientWidt……
你的图片规格是随机的? 那只有用js了 var img = new image(); img.src = "xxx/xxx"; img.onload = function () {计算设置margin什么的让他居中} 水平居中直接{ display:block;margin: 0 auto;}就好 垂直就用上面的JS计算吧
  • 打赏
  • 举报
回复
EiffeDesign 2013-02-01
#banner_list img {border:0px; width:100%;min-height: expression(document.documentElement.clientHeight + "px"); margin-left:expression((document.documentElement.clientWidth-this.Width)/2 + "px"); margin-top:expression((document.documentElement.clientHeight-this.Height)/2 + "px"); }
这个方法好像可以计算位置固定,但是要如何获取图片的高度和宽度??? 我用了this.clientWidth就出错了
  • 打赏
  • 举报
回复
EiffeDesign 2013-02-01
引用 8 楼 fzfei2 的回复:
引用 7 楼 EiffeDesign 的回复: fzfei2 你的代码还是不行哦,没有切换效果,图片也没有居中 你是什么浏览器,我这测试效果还行
我测试ie8, the world,都不行,不知道哪里问题
  • 打赏
  • 举报
回复
fzfei2 2013-02-01
引用 7 楼 EiffeDesign 的回复:
fzfei2 你的代码还是不行哦,没有切换效果,图片也没有居中
你是什么浏览器,我这测试效果还行
  • 打赏
  • 举报
回复
EiffeDesign 2013-02-01
引用 4 楼 wbb123yu 的回复:
为了防止图片变性严重最好加个min-height
感谢wbb123yu的提示,我在img加了个
min-height: expression(document.documentElement.clientHeight + "px");
现在的效果是不管网页多大多宽,图片都是等比例放大或者缩小的全屏 剩下最后一步了,如何让图片永远水平居中和垂直居中 fzfei2 你的代码还是不行哦,没有切换效果,图片也没有居中
  • 打赏
  • 举报
回复
fzfei2 2013-02-01
改了IE下缓存BUG

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html,body{width:100%;height:100%}
#banner {position:relative; height:100%; overflow:hidden; }
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
			margin:0; padding:0; bottom:10%; left:50%;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}

#banner_list img {border:0px; width:100%;}
#banner_list a{position:absolute;}
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	var t = n = 0, count;
	$(document).ready(function(){	
		count=$("#banner_list a").length;
		var bw=$('body').width(),bh=$('body').height();
		$('#banner_list img').load(function(){
      resizeImg(this);
      var p=$(this).parent();
      if(p.index())p.hide();
		});
		$('#banner_list img').each(function(i){
		  resizeImg(this);
		  if(this.offsetWidth && i)$(this).parent().hide();
		});
		function resizeImg(img){
		  if(!img.offsetWidth  ) return;
		  var img=$(img),w=img.width(),h=img.height();
		  console.log( [w,h]  );
      if(bh<h){
		    w=parseInt(bh/h*w);
		    h=bh;
		  }else if(bw<w){
		    h=parseInt(bw/w*h);
		    w=bw;
		  }else{
		    if(w>h){
  		    h=parseInt(bw/w*h);
  		    w=bw;
		    }else{
  		    w=parseInt(bh/h*w);
  		    h=bh;
		    }
		  }
		  img.css({
		    width:w,
		    height:h
		  });
		  img.parent().css({
		     left: (bw-w)>>1,
		     top: (bh-h)>>1 
		  });
		}
 
		$("#banner li").click(function() {
			var i = $(this).text()-1;
			n = i;
			if (i >= count) return;
			$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
			//document.getElementById("banner").style.background="";
			$(this).toggleClass("on");
			$(this).siblings().removeAttr("class");
		});
		//t = setInterval("showAuto()", 3000);
		// $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
	})
	
//	function showAuto()
//	{
//		n = n >=(count - 1) ? 0 : ++n;
//		$("#banner li").eq(n).trigger('click');
//	}
</script>
</head>

<body scrollbars="no" scroll="no">
<div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png) #aaa;">
<div id="banner">	
    <ul>
        <li class="on">1</li>
        <li>2</li>
    </ul>
   <div id="banner_list">
        <a><img src="http://img.hb.aicdn.com/707cb9414334425845c2768b97e1766889ce5a1129c88-LRF7jf_fw554" /></a>
        <a><img src="http://imgsrc.baidu.com/forum/pic/item/aefd5266d016092443074862d40735fae6cd34ad.jpg" /></a>
	</div>
</div>
</div>
</body>
</html>
  • 打赏
  • 举报
回复
fzfei2 2013-02-01
再试试

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html,body{width:100%;height:100%}
#banner {position:relative; height:100%; overflow:hidden; }
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
			margin:0; padding:0; bottom:10%; left:50%;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}

#banner_list img {border:0px; width:100%;}
#banner_list a{position:absolute;}
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	var t = n = 0, count;
	$(document).ready(function(){	
		count=$("#banner_list a").length;
		var bw=$('body').width(),bh=$('body').height();
		//console.info( [bw,bh] );
		$('#banner_list img').load(function(){
      resizeImg(this);
      var p=$(this).parent();
      if(p.index())p.hide();
		});
		$('#banner_list img').each(resizeImg);
		function resizeImg(img){
		  if(!img.offsetWidth  ) return;
		  var img=$(img),w=img.width(),h=img.height(),aw,ah;
      if(bh<h){
		    w=parseInt(bh/h*w);
		    h=bh;
		  }else if(bw<w){
		    h=parseInt(bw/w*h);
		    w=bw;
		  }else{
		    if(w>h){
  		    h=parseInt(bw/w*h);
  		    w=bw;
		    }else{
  		    w=parseInt(bh/h*w);
  		    h=bh;
		    }
		  }
		  img.css({
		    width:w,
		    height:h
		  });
		  img.parent().css({
		     left: (bw-w)>>1,
		     top: (bh-h)>>1 
		  });
		}
 
		$("#banner li").click(function() {
			var i = $(this).text() - 1;
			n = i;
			if (i >= count) return;
			$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
			//document.getElementById("banner").style.background="";
			$(this).toggleClass("on");
			$(this).siblings().removeAttr("class");
		});
		//t = setInterval("showAuto()", 3000);
		// $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
	})
	
//	function showAuto()
//	{
//		n = n >=(count - 1) ? 0 : ++n;
//		$("#banner li").eq(n).trigger('click');
//	}
</script>
</head>

<body scrollbars="no" scroll="no">
<div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png) #aaa;">
<div id="banner">	
    <ul>
        <li class="on">1</li>
        <li>2</li>
    </ul>
   <div id="banner_list">
        <a><img src="http://img.hb.aicdn.com/707cb9414334425845c2768b97e1766889ce5a1129c88-LRF7jf_fw554" /></a>
        <a><img src="http://imgsrc.baidu.com/forum/pic/item/aefd5266d016092443074862d40735fae6cd34ad.jpg" /></a>
	</div>
</div>
</div>
</body>
</html>
  • 打赏
  • 举报
回复
wbb123yu 2013-02-01
为了防止图片变性严重最好加个min-height
  • 打赏
  • 举报
回复
wbb123yu 2013-02-01
.selecter { position: fixed; height: 100%; width: 图片宽度 top: 0; left:50%; margin-left: 50%图片宽度 }
  • 打赏
  • 举报
回复
EiffeDesign 2013-02-01
引用 1 楼 fzfei2 的回复:
看下,是不是这效果 JavaScript code ? 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384……
测试没效果啊,图片没有水平居中, 也无法自动调整高度!!!
  • 打赏
  • 举报
回复
EiffeDesign 2013-02-01
引用 13 楼 fzfei2 的回复:
再试试 XML/HTML code ? 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788……
感谢fzfei2的调试,还是不可以,我重新贴一遍我改过的代码,全屏图片切换已经可以实现了,就是怎么设置图片高度宽度永远居中问题!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#banner {position:relative; height:100%; overflow:hidden; }
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
			margin:0; padding:0; bottom:10%; left:50%;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#999}

#banner_list img {border:0px; width:100%; height:100%; min-height: expression(document.documentElement.clientHeight + "px");}
#banner_list a{position:absolute;}
</style>

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
	var t = n = 0, count;
	$(document).ready(function(){	
		count=$("#banner_list a").length;
		$("#banner_list a:not(:first-child)").hide();
		$("#banner li").click(function() {
			var i = $(this).text() - 1;
			n = i;
			if (i >= count) return;
			$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
			document.getElementById("banner").style.background="";
			$(this).toggleClass("on");
			$(this).siblings().removeAttr("class");
		});
		t = setInterval("showAuto()", 30000);
		$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 30000);});
	})
	
	function showAuto()
	{
		n = n >=(count - 1) ? 0 : ++n;
		$("#banner li").eq(n).trigger('click');
	}
</script>
</head>

<body scrollbars="no" scroll="no" onresize="myLoad()" onload="myLoad()" style="margin:0 auto">
<div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png);">
<div id="banner">	
    <ul>
        <li class="on">1</li>
        <li>2</li>
    </ul>
   <div id="banner_list">
        <a><img src="imgs/main-1.jpg" /></a>
        <a><img src="imgs/main-2.jpg"/></a>
	</div>
</div>
</div>

</body>
</html>
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.6w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
申请成为版主
帖子事件
创建了帖子
2013-01-31 10:49
社区公告
暂无公告