VMiddleImg图片居中裁切效果特效代码

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

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

以下是 VMiddleImg图片居中裁切效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.VMiddleImg.js"></script>
</head>

<body>
<div id="main">
	<h1>【jQuery插件】VMiddleImg图片居中裁切效果的实例页面</h1>
	<div id="body" class="light">
		<div id="content" class="show">
		  <div class="demo">
			<div class="img-box clearfix">
				<h3>原始图</h3>
				<ul>
					<li><a href="#"><img src="img/001.jpg" width="300" height="372"></a></li>
					<li><a href="#"><img src="img/002.jpg" width="85" height="85"></a></li>
					<li><a href="#"><img src="img/003.jpg" width="452" height="531"></a></li>
					<li><a href="#"><img src="img/004.jpg" width="428" height="319"></a></li>
				</ul>
			</div>
			<div class="img-box themes1 clearfix" style="margin-top:20px;"> <h3>200*200PX宽高图</h3>
				<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>
			<div class="img-box themes2 clearfix" style="margin-top:20px;">  <h3>100*100PX宽高图</h3>
				<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>
			<div class="img-box themes3 clearfix" style="margin-top:20px;"> <h3>120*90PX宽高图</h3>
				<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>
		</div>
		</div>
	</div>
</div>
<script type="text/javascript">
    $(".themes1 .t-img").VMiddleImg();
    $(".themes2 .t-img").VMiddleImg({"width":110,"height":110});
    $(".themes3 .t-img").VMiddleImg();
</script>
</body>
</html>

JS代码(jquery.VMiddleImg.js):

/** @author 愚人码头* 【jQuery插件】图片垂直水平缩放显示* 更多*/
(function($){
	$.fn.VMiddleImg = function(options){
	var defaults={
	"width":null,"height":null}
;
	var opts = $.extend({
}
,defaults,options);
	return $(this).each(function(){
	var $this = $(this);
	var objHeight = $this.height();
	//图片高度 var objWidth = $this.width();
	//图片宽度 var parentHeight = opts.height||$this.parent().height();
	//图片父容器高度 var parentWidth = opts.width||$this.parent().width();
	//图片父容器宽度 var ratio = objHeight / objWidth;
	if (objHeight > parentHeight && objWidth > parentWidth){
	if (objHeight > objWidth){
	//赋值宽高 $this.width(parentWidth);
	$this.height(parentWidth * ratio);
}
else{
	$this.height(parentHeight);
	$this.width(parentHeight / ratio);
}
objHeight = $this.height();
	//重新获取宽高 objWidth = $this.width();
	if (objHeight > objWidth){
	$this.css("top",(parentHeight - objHeight) / 2);
	//定义top属性}
else{
	//定义left属性 $this.css("left",(parentWidth - objWidth) / 2);
}
}
else{
	if (objWidth > parentWidth){
	$this.css("left",(parentWidth - objWidth) / 2);
}
$this.css("top",(parentHeight - objHeight) / 2);
}
}
);
}
;
}
)(jQuery);

CSS代码(style.css):

@charset "utf-8";html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
body{line-height:1;background:#FFFFFF;}
section,article,aside,header,footer,nav,dialog,figure{display:block;}
figure{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
#main{width:100%;background:#beceeb;overflow:hidden;}
#main h1{line-height:40px;margin:0;text-align:center;font-size:1.3em;background:#C10000;color:#FFFFFF;font-family:'微软雅黑','宋体';text-shadow:0px 1px 0px #D10000;}
/*custom css*/
.img-box{background:#EFEFEF;padding:20px;}
.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;position:relative;}
.img-box li a img{position:relative;vertical-align:text-top;}
/*themes*/
.themes1 li{width:200px;height:200px;}
/*容器宽高*/
.themes1 li a{width:200px;height:200px;}
/*容器宽高*/
.themes2 li{width:100px;height:100px;}
.themes2 li a{width:100px;height:100px;}
.themes2 li a img{margin-top:-5px;margin-left:-5px}
.themes3 li{width:120px;height:90px;}
.themes3 li a{width:120px;height:90px;}
#content{min-height:500px;_height:500px;max-width:1680px;margin:0 auto;background:white;border:solid #cad5eb;border-width:0 2px;font-family:'Lucida Grande',Verdana;}
.show{padding-bottom:20px;}
.show h5{font-size:0.9em;line-height:20px;padding-left:2px;margin:10px 8px 0;}
.show .demo{padding:10px;*zoom:1;}
.show .demo:after{display:block;content:"clear";height:0;visibility:hidden;overflow:hidden;clear:both;}
.show .demo h3{height:40px;font:bold 24px/40px tahoma,arial,\5b8b\4f53;}
#footer{line-height:1.3;padding:15px 0;border-top:1px solid #486aaa;font-family:'Lucida Grande',Verdana,Sans-Serif;color:#efefef;text-align:center;background-color:#555555;text-shadow:1px 1px #333333;}
#footer:before{display:block;height:1px;content:'.';background-color:#909BAF;overflow:hidden;position:relative;top:-15px;}
#footer img{margin-bottom:-3px;}
#footer a:link,#footer a:visited{color:#efefef;text-decoration:none;}
#footer a:hover{color:#efefef;text-decoration:underline;}

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