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>
jquery图片预览使图片在屏幕正中间,需要引入Jquery 文件
或者也可以使用layer.js弹出层插件进行设置。

【layer弹出层介绍】

 
 

  
  
弹层之美
 
 
在线调试 扩展皮肤 1.8.5版本
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被4612792人次关注）。layer 甚至兼容了包括IE6在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。
layer采用MIT开源协议，将会永久性提供无偿服务。因着数年的坚持维护，截至到2016年11月07日，已运用在超过20万家Web平台，其中不乏众多知名大型网站。目前layer已经成为国内乃至全世界最多人使用的Web弹层解决方案，并且她仍在与Layui一并高速发展。