<ul>
<li><img src='image/u1.jpg'></li>
<li><img src='image/u2.jpg'></li>
<li><img src='image/u3.jpg'></li>
</ul>
<div class="bg">
<img class="bgImg" src="">
</div>
<style>
.bgImg{max-width:100%;max-height:100%}
</style>
<script>
var t1=$(window).height(); //获取屏幕高度
var t2=$(window).width(); //获取屏幕宽度
$('ul>li>img').click(function () { //img设置点击事件
$('.bgImg').attr('src',this.src) //修改预览img的Src
var t3=$('.bgImg').height(); //获得当前img高度
var t4=$('.bgImg').width(); //获取当前img宽度
if(t3<t1){ //如果屏幕高度大于img高度,设置图片margin-top
$('.bgImg').css('marginTop',(t1-t3)/2);
}
if(t4<t2){ //如果屏幕宽度大于img宽度,设置图片margin-left
$('.bgImg').css('marginLeft',(t2-t4)/2);
}
})
</script>