<!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=utf-8" />
<title>jquery图片等比放大和缩放</title>
<script src="../jquery-1.7.2.min.js"></script>
<style>
*{ margin:0; padding:0;}
.autoImg{ width:200px; padding:20px; box-shadow:0 0 5px rgba(0,0,0,.5);float:left; margin-right:20px; }
.autoImg img{cursor:pointer;}
#mask{ width:100%; height:100%; background:rgba(0,0,0,0.8); position:absolute; z-index:1;}
#mask img{ position:relative; z-index:9999; }
#mask span.prev,#mask span.next{ background:rgba(0,0,0,.8); display:block; color:#fff; width:50px; height:50px; line-height:50px; text-align:center; position:absolute;top:50%; z-index:}
#mask span.prev:hover,#mask span.next:hover{ background:#f60; cursor:pointer;}
#mask span.prev{ left:0; }
#mask span.next{ right:0;}
</style>
</head>
<body>
<script>
$(function(){
//等比缩放小图
function autoImgSize(ele){
var oImgWrap = $(ele).width();
$(ele).find(‘img‘).each(function(i,e){
var oImgWidth = $(this).width();
var oImgHeight = $(this).height();
if(oImgWidth>oImgWrap){
var imgNewHeight = (oImgWrap*oImgHeight)/oImgWidth;
$(this).css({‘height‘:imgNewHeight});
}
});
}
//查看大图
function vieworiginal(ele){
var flag = true;
$(ele).find(‘img‘).bind(‘click‘,function(ev){
ev.stopPropagation();
var mask = $(‘<div id="mask"> <img src=" ‘+this.src+‘ "/></div>‘);
$(‘body‘).append(mask);
var winW = $(window).width();
var winH = $(window).height();
var thisW = $(‘#mask‘).find(‘img‘).width();
var thisH = $(‘#mask‘).find(‘img‘).height()
$(‘#mask‘).find(‘img‘).animate({‘left‘:(winW-thisW)/2 ,‘top‘:(winH-thisH)/2},400);
})
}
$(document).bind(‘click‘,function(){
$(‘#mask‘).remove();
})
//初始化
vieworiginal(‘.autoImg‘)
autoImgSize(‘.autoImg‘);
});
</script>
<div class="autoImg">
<img src="http://c.hiphotos.baidu.com/image/pic/item/2e2eb9389b504fc26f244cf3e7dde71191ef6dc9.jpg" />
</div>
<div class="autoImg">
<img src="http://b.hiphotos.baidu.com/image/pic/item/6c224f4a20a4462320b59f619b22720e0cf3d7b1.jpg" />
</div>
<div class="autoImg">
<img src="http://b.hiphotos.baidu.com/image/pic/item/d53f8794a4c27d1e9be388e018d5ad6edcc438c8.jpg" />
</div>
</body>
</html>
时间： 2024-11-03 12:02:13