html实现点击图片放大功能
锺离珂
<html>
<head>
<style>
.tmpContainer {z-index:101;position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center;}
.bg {z-index:100; position: fixed; left:0; top:0; width:100%;}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="bg"></div><!--遮罩层-->
<div class="amplify">
<img src="img.jpg"/>
</div>
<script>
$(document).ready(function () {
var imgsObj = $('.amplify img');//获取需要放大的图像
if(!imgsObj){
return;
}
$.each(imgsObj,function(){
$(this).click(function(){
var tmpContainer = $('<div class=tmpContainer></div>');
var currImg = $(this);
coverLayer(1);
with(tmpContainer){
appendTo("body");
var windowWidth=$(window).width();
var windowHeight=$(window).height();
//获取原图宽度、高度
var originalImg = new Image();
originalImg.src =currImg.attr("src") ;
var currImgWidth= originalImg.width;
var currImgHeight = originalImg.height;
if(currImgWidth<windowWidth){//图片宽度较小的时候，保留原图
if(currImgHeight<windowHeight){
var topHeight=(windowHeight-currImgHeight)/2;
if(topHeight>35){ //兼容微信浏览器，使图片高度上居中显示在整个手机屏幕中
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('< img src=' + currImg.attr('src') + ' border=0>');
}else{
css('top',0);
html('< img src=' + currImg.attr('src') + ' height='+windowHeight+' border=0>');
}
}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 src=' + currImg.attr('src') + ' width='+windowWidth+' border=0>');
}else{
css('top',0);
html('< img src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+' border=0>');
}
}
}
tmpContainer.click(function(){
$(this).remove();
coverLayer(0);
});
});
});
//使用禁用蒙层效果
function coverLayer(tag){
with($('.bg')){
if(tag){
css('height',$(document).height());
css('display','block');
css('opacity',1);
css("background-color","#fff");
css("background-color","rgba(0,0,0,0.6)" ); //蒙层透明度
}else{
css('display','none');
}
}
}
});
</script>
</body>
</html>
类似资料：