上海益国网络科技有限公司
上海专业网站建设一条龙服务

学无止境!

这里摘有最贴近网站程序使用的方方面面相关技术文档~

021-20906540
AM 9:30-12:00 PM:2:00-5:30
您当前位置:首页 >> 技术支持 >>  技术专辑 >>  无损图片

Jquery,VMiddleImg实现的图片居中裁减


实现原理:从父容器获得容器本身的宽与高来取得图片的宽高最大值,计算图片的中心点,以半宽、半高来对图片进行裁减。


引用:

<script type="text/javascript" src="http://www.siqiji.cn/codes/jq/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="http://www.siqiji.cn/codes/jq/jquery.VMiddleImg.js"></script>


<div class="img-box siqijimg">

   <ul>

   <li><a href="#"><img src="img/001.jpg" width="300" height="372" class="t-img"></a></li>

   <li><a href="#"><img src="img/002.jpg" width="85" height="85" class="t-img"></a></li>

   <li><a href="#"><img src="img/003.jpg" width="452" height="531" class="t-img"></a></li>

   <li><a href="#"><img src="img/004.jpg" width="428" height="319" class="t-img"></a></li>

   </ul>

</div>

<script type="text/javascript">

$(".siqijimg .t-img").VMiddleImg();

</script>


以上要注意,一定要定义图片的原始大小。这也是这个插件的不足,很多时候调用时图片的原始大小是未知的。


CSS定义:

<style type="text/css">

.img-box li{float:left; margin-right:10px; padding:5px; background:#fff; overflow:hidden;}

.img-box li a{float:left; overflow:hidden; text-align:center;}

.img-box li a img{position:relative;}

.siqijimg li{width:120px; height:90px;}

.siqijimg li a{width:120px; height:90px;}

</style>


注意定义img时需要加:position:relative;

实现的效果如下:



以下帖出一个完整的HTML代码:

<!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=gb2312" />
<title>实现的图片居中裁减</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://www.siqiji.cn/codes/jq/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.siqiji.cn/codes/jq/jquery.VMiddleImg.js"></script>
<style type="text/css">
.img-box li{float:left; margin-right:10px; padding:5px; background:#fff; overflow:hidden;}
.img-box li a{float:left; overflow:hidden; text-align:center;}
.img-box li a img{position:relative;}
.siqijimg li{width:120px; height:90px;}
.siqijimg li a{width:120px; height:90px;}
</style>
</head>
<body>
<div class="img-box siqijimg">
    <ul>
    <li><a href="#"><img src="img/001.jpg" width="300" height="372" class="t-img"></a></li>
    <li><a href="#"><img src="img/002.jpg" width="85" height="85" class="t-img"></a></li>
    <li><a href="#"><img src="img/003.jpg" width="452" height="531" class="t-img"></a></li>
    <li><a href="#"><img src="img/004.jpg" width="428" height="319" class="t-img"></a></li>
    </ul>
</div>
<script type="text/javascript">
$(".siqijimg .t-img").VMiddleImg();
</script>
</body>
</html>



做网站找动人网络!建站一条龙服务找动人网络!站长学习尽在站长培训网
  • 图片等比例缩放 优化版JS
    TOP