用jquery实现适合各种未知宽度的图片全屏居中

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-25 12:11:55　-　阅:　-　评:1　-　积分:0

昨天分享了《纯css实现超宽图片全屏居中（兼容淘宝店铺）》，可能还满足不了某些读者的需要。那么今天就来对其进行完善，利用jq来实现图片宽度大于1920且不定宽的图片全屏居中显示效果。jq就是一个神器，自从有了jq，妈妈再也不用担心我不能实现超超超宽图片全屏居中啦

既然图片宽度大于1920，那么“.qp”的宽度就不能固定了。这时就需要用jq来实时采集到图片的宽度，然后再来传递值，最终完美实现图片宽度在1920以外的任意宽度图片全屏居中。源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.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=utf-8" />
<title>适合各种宽度的图片全屏居中--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="全屏banner,全屏居中,超宽图片,jq特效,兼容各种不同分辨率屏幕,兼容ie6">
<meta name="description" content="全屏banner,全屏居中,超宽图片,jq特效,兼容各种不同分辨率屏幕,兼容ie6">
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
body{overflow:hidden;}
a img{border:none;}
a{display:inline-block;}
.qp{width:1920px;margin-left:-960px;position:absolute;left:50%;text-align:center}
</style>
<script type="text/javascript"  src="/skin/yilingsj/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $w=$('.qp img').width();
var $m=-$w/2+'px';
$('.qp').css({"width":$w+"px","margin-left":$m});
})
</script>
</head>
<body>
<div style="height:598px;">
　<div class="qp">
　　<a href="/jquery/2013-10-25/104.html"><img src="http://img03.taobaocdn.com/imgextra/i3/1758846006/T2yh8FXwJaXXXXXXXX_!!1758846006.jpg" width="3920" height="598"/></a>
　</div>
</div>
</body>
</html>

jq代码：

<script type="text/javascript"  src="/skin/yilingsj/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
  var $w=$('.qp img').width();
  /*用一个变量获取图片的宽度*/
  var $m=-$w/2+'px';
  /*定义一个变量获取左边的负值*/
$('.qp').css({"width":$w+"px","margin-left":$m});
})
</script>

点此下载→→【代码】适合各种宽度的图片全屏居中.zip　　　

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2013-10-25/104.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！