jquery圖片預覽使圖片在屏幕正中間。

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