北极寒流 » 网络资源 » jQuery实现图片居中裁切缩放效果 - 2015.10.10

jQuery实现图片居中裁切缩放效果

jQuery实现图片居中裁切缩放效果,图片裁切不变形。大家在做相册列表的时候可能会遇到这样的情况,用户上传的图片大小不一,长宽不一,然而需求的列表却是固定宽高的如图:

123
此脚本拟达到以下需求(原始版)

1.当图片高或宽超过父容器时截取中间部分显示。
2.当图片宽高小于父容器时,居中显示。

//调用
$(function(){
	zmnImgCenter($(".t-img"));//JQ的dom
	});
//图片居中
function zmnImgCenter(obj){
	obj.each(function(){
			var $this=$(this);
			var objHeight=$this.height();//图片高度
			var objWidth=$this.width();//图片宽度
			var parentHeight=$this.parent().height();//图片父容器高度
			var parentWidth=$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){//当图片宽大于容器宽,小于时利用css text-align属性居中
					$(this).css("left",(parentWidth-objWidth)/2);
					}
				$(this).css("top",(parentHeight-objHeight)/2);
				}
		})
	}

下面是我自己正在用的:只是在上面的基础上修改了一个判断方式(按长宽比来判断)

//图片居中

$(function(){

zmnImgCenter($(".t-img"));

});

function zmnImgCenter(obj){

obj.each(function(){

var $this=$(this);

var objHeight=$this.height();//图高

var objWidth=$this.width();//图宽

var parentHeight=$this.parent().height();//图片父容器高

var parentWidth=$this.parent().width();//图片父容器宽

var ratio=objHeight/objWidth;//图片比例

var pratio=parentHeight/parentWidth;//父容器比例

if(objHeight>parentHeight && objWidth>parentWidth){//当图宽高都大于父容器宽高

if(ratio>pratio) {//判断宽高比例

$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);

} else {

$(this).css({top:(parentHeight-objHeight)/2,left:(parentWidth-objWidth)/2});

}

} else {//当图宽高小于父容器宽高

if(objWidth>parentWidth){ $(this).css("left",(parentWidth-objWidth)/2); }

$(this).css("top",(parentHeight-objHeight)/2);

}

}    )

}

改良版

//图片居中缩放
$.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;//图片比例
var pratio = parentHeight/parentWidth;//父容器比例EP
if (objHeight > parentHeight && objWidth > parentWidth) {//当宽高都大于父容器宽高
if (ratio > pratio) { //判断宽高比例
$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);
} else {
$this.css({"top":(parentHeight-objHeight)/2,"left":(parentWidth-objWidth)/2});
}
} else {//当图宽高小于父容器宽高
if (objWidth > parentWidth) {
$this.css("left", (parentWidth - objWidth) / 2);
} $this.css("top", (parentHeight - objHeight) / 2);
}
});
};
$(".img-box .t-img").VMiddleImg();//选择器

演示效果及插件下载

网盘下载网盘下载网盘下载

这是另外网友修改的带鼠标跟随效果的版本

<!DOCTYPE html>
<html>
    <head>
        <title>图片自适应局中-鼠标滑过图片预览效果</title>
        <style>
            body{background-color:#ddd;}
            *{padding:0; margin:0; border:0;}
            img{display:block;}
            .pics-list {}
            .pics-list li {
                -moz-transition: opacity 0.2s ease-in-out 0s;
                -webkit-transition: opacity 0.2s ease-in-out 0s;
                -0-transition: opacity 0.2s ease-in-out 0s;
                transition: opacity 0.2s ease-in-out 0s;
                background-color: #EAEAEA;
                float: left;
                height: 90px;
                margin: 0 1px 1px 0;
                overflow: hidden;
                width: 120px;
                border:5px solid #fff;
                opacity: 0.8;
                font-size:0;
            }
            .pics-list li a{display:block; height:100%; width:100%; overflow:hidden;}
            .pics-list li img {
                -moz-transition: opacity 1.5s ease-in-out 0s;
                -webkit-transition: opacity 1.5s ease-in-out 0s;
                -o-transition: opacity 1.5s ease-in-out 0s;
                transition: opacity 1.5s ease-in-out 0s;
                display: block;
            }
            .pics-list li:hover {
                opacity: 1;
            }
            div[id^=log]{position:fixed; z-index:20; right:0}
            #log1{top:20px;}
            #log2{top:40px;}
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var centerPics =function(img){
                var img = jQuery(img);
                var objW = img.width();
                var objH = img.height();
                var objRatio = objW/objH;
var objParentW = img.parent().width();
                var objParentH = img.parent().height();
                var objParentRatio = objParentW/objParentH;
if(objW < objParentW && objH < objParentH){// 图片宽高都小于容器
                    img.css('margin-top',(objParentH - objH)/2);
                    img.css('margin-left',(objParentW - objW)/2);
                }elseif(objW < objParentW && objH > objParentH){ // 图片只有高大于容器
                    img.css('margin-left',(objParentW - objW)/2)
                    img.css('margin-top',(objParentH - objH)/2);
                    img.attr('data-top',(objParentH - objH)/2);
                }elseif(objW > objParentW && objH < objParentH){ // 图片只有宽大于容器
                    img.css('margin-top',(objParentH - objH)/2)
                    img.css('margin-left',(objParentW - objW)/2);
                    img.attr('data-left',(objParentW - objW)/2);
                }elseif(objW > objParentW && objRatio > objParentRatio){ //图片宽高比例 都大于 容器宽高比例
                    img.height(objParentH);
                    img.width(Math.round(objParentH*objRatio));
                    img.css('margin-left',(objParentW-(Math.round(objParentH*objRatio)))/2);
                    img.attr('data-left',(objParentW-(Math.round(objParentH*objRatio)))/2);
                }elseif(objW > objParentW && objRatio < objParentRatio){ // 图片宽高大于容器. 图片比例小于容器比例的
                    img.width(objParentW);
                    img.height(Math.round(objParentW/objRatio));
                    img.css('margin-top',(objParentH -(Math.round(objParentW/objRatio)))/2)
                    img.attr('data-top',(objParentH -(Math.round(objParentW/objRatio)))/2)
                };
                img.bind("mousemove",
                    function(e) {
                        setTimeout(function(){
                            movepic(img, e);
                        },50);
                    });
                function movepic(img, e){
                    var objL = img.parent().position().left,
                        objT = img.parent().position().top,
                        X = e.pageX,
                        Y = e.pageY,
                        defaultBorder =16, // 鼠标在图片范围内的临界点.
                        roundX = objL + objParentW /2,
                        roundY = objT + objParentH /2;
                    var moveSpaceX = (X - roundX)/((objParentW - defaultBorder)/2),
                        moveSpaceY = (roundY - Y)/((objParentH - defaultBorder)/2);
                        if(moveSpaceX >1|| moveSpaceX <-1){
                            moveSpaceX = Math.round(moveSpaceX);
                        };
                        if(moveSpaceY >1|| moveSpaceY <-1){
                            moveSpaceY = Math.round(moveSpaceY);
                        };
                    if(img.data('top')){
                        img.css('margin-top',img.data('top')*(1-moveSpaceY));
                    };
                    if(img.data('left')){
                        img.css('margin-left',img.data('left')*(1+ moveSpaceX))
                    };
                };
            };
        </script>
    </head>
    <body>
        <div>    
            <ul class="pics-list">
                <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_001.jpg" onload="centerPics(this)"/></a></li>
                <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_002.jpg" onload="centerPics(this)"/></a></li>
                <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_003.jpg" onload="centerPics(this)"/></a></li>
                <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_004.jpg" onload="centerPics(this)"/></a></li>
                <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_005.jpg" onload="centerPics(this)"/></a></li>
                <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_006.jpg" onload="centerPics(this)"/></a></li>
            </ul>
        </div>
    </body>
</html>

来源:http://www.cnblogs.com/noyobo/articles/2222098.html

10

jQuery实现图片居中裁切缩放效果

分享到:

最受欢迎的