点击图片放大

Html

Css

.over {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index:100;
}
.tempContainer {
	position:fixed;
	width:100%;
	margin-right:0px;
	margin-left:0px;
	text-align:center;
	z-index:101;
}

$(function() {
    var imgsObj = $('.amplifyImg img'); //需要放大的图像
    if (imgsObj) {
        $.each(imgsObj, function() {
            $(this).click(function() {
                var currImg = $(this);
                coverLayer(1);
                var tempContainer = $('<div class=tempContainer></div>'); //图片容器  
                with(tempContainer) { //width方法等同于$(this)  
                    appendTo("body");
                    var windowWidth = $(window).width();
                    var windowHeight = $(window).height();
                    //获取图片原始宽度、高度  
                    var orignImg = new Image();
                    orignImg.src = currImg.attr("src");
                    var currImgWidth = orignImg.width;
                    var currImgHeight = orignImg.height;
                    if (currImgWidth < windowWidth) { //为了让图片不失真，当图片宽度较小的时候，保留原图  
                        if (currImgHeight < windowHeight) {
                            var topHeight = (windowHeight - currImgHeight) / 2;
                            if (topHeight > 35) { /*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
                                topHeight = topHeight - 35;
                                css('top', topHeight);
                            } else {
                                css('top', 0);
                            }
                            html('<img border=0 src=' + currImg.attr('src') + '>');
                        } else {
                            css('top', 0);
                            html('<img border=0 src=' + currImg.attr('src') + ' height=' + windowHeight + '>');
                        }
                    } else {
                        var currImgChangeHeight = (currImgHeight * windowWidth) / currImgWidth;
                        if (currImgChangeHeight < windowHeight) {
                            var topHeight = (windowHeight - currImgChangeHeight) / 2;
                            if (topHeight > 35) {
                                topHeight = topHeight - 35;
                                css('top', topHeight);
                            } else {
                                css('top', 0);
                            }
                            html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + ';>');
                        } else {
                            css('top', 0);
                            html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '; height=' + windowHeight + '>');
                        }
                    }
                }
                tempContainer.click(function() {
                    $(this).remove();
                    coverLayer(0);
                });
            });
        });
    } else {
        return false;
    }
    //使用禁用蒙层效果  
    function coverLayer(tag) {
        with($('.over')) {
            if (tag == 1) {
                css('height', $(document).height());
                css('display', 'block');
                css('opacity', 1);
                css("background-color", "#191919");
            } else {
                css('display', 'none');
            }
        }
    }
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

点击图片放大



代码描述：点击图片放大、缩小

1

最新

发表评论全部评论

暂时没有评论！

☆0

2017/4/22 18:15:15

with()表示理解不了，求大神指点。
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

chuanqipo

相关代码

点击图片放大

最新