点击图片实现图片放大的效果：
我们经常会看到当我们点击图片的时候，图片可以放大，放到原来本身的样子，看起来特别舒服。
今天我参考了网上一些经验实现了图片放大功能。
首先我们看代码：
<html>
<head>
<style>
.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;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="over"></div><!--背景层-->
<div class="logoImg amplifyImg" >
<!--注意：此处的amlifyImg不可少-->
<img src="~/images/chun.jpg" style="cursor:pointer;"/><!-- 此处是引入图片的路径 -->
</div>
<script>
$(document).ready(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);
//}
css('top', topHeight);//上面是适应安卓的，这是适应pc端的
html('<div id="body-left" style="height:' + windowWidth + 'px;"><img src="/images/ico_left.png" /></div><div ><img border=0 src=' + currImg.attr('src') + '></div ><div id="body-right" style=" height:' + (windowHeight+35) + 'px; margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
} else {
css('top', 0);
html('<div id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png" /></div><div><img border=0 src=' + currImg.attr('src') + ' height=' + windowHeight + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px; margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
}
} 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);
//}
css('top', topHeight);//上面是适应安卓的，这是适应pc端的
html('<div id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png" /></div><div><img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px; margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
} else {
css('top', 0);
html('<div id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png" /></div><div><img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + 'height=' + windowHeight + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px; margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
}
}
}
//tempContainer.click(function () {
// $(this).remove();
// coverLayer(0);
//});
show();
});
});
}
else {
return false;
}
//使用禁用蒙层效果
function coverLayer(tag) {
with ($('.over')) {
if (tag == 1) {
css('height', $(document).height());
css('display', 'block');
css('opacity', 1);
css("background-color", "#FFFFFF");
css("background-color", "rgba(0,0,0,0.8)"); //蒙层透明度
}
else {
css('display', 'none');
}
}
}
function show() {
$(".tempContainer").on("click", "#body-left ", function () {
alert(1);
});
$(".tempContainer").on("click", "#body-right ", function () {
alert(2);
});
}
});
</script>
</body>
</html>
难点我都具体分析了。
看看效果图吧。
这是浏览图，点击后的效果是：
看起来还不错。
版权声明：本文为weixin_45932157原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。