jquery图片预览使图片在屏幕正中间。

时间:2020-12-11 19:33:04
<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>