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

Posted 2020-08-24

<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>