码迷,mamicode.com
首页 > 其他好文 > 详细

图片在浏览器窗口水平居中展示(图片尺寸不限制)

时间:2017-07-06 18:55:24      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:class   bsp   false   限制   title   play   doc   来源   jpg   

闲言碎语不多说,直接上代码,转载请备注来源地,代码自己看自己悟。

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>图片在浏览器窗口水平居中展示(图片尺寸不限制)</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                background: #606060
            }
            
            html {
                height: 100%;
            }
            
            body {
                position: relative;
                min-height: 100%;
            }
            
            #img-center {
                width: 800px;
                margin: 0 auto;
                display: block;
                margin-top: 2%;
                margin-bottom: 2%;
                cursor: zoom-in;
            }
        </style>
        <script>
            window.onload = function() {
                /*小于浏览器屏幕时居中 */
                var docuH = document.body.clientHeight,
                    domH = document.getElementById("img-center").offsetHeight,
                    dom = document.getElementById("img-center");
                if(domH < docuH) {
                    var csstext = "position:absolute;top:50%;margin-left:-400px;left:50%;margin-top:-" + domH / 2 + "px;";
                    dom.style.cssText = csstext;
                }
            };
            /*滚动定位*/
            function bbimg(o) {
                var zoom = parseInt(o.style.zoom, 10) || 100;
                zoom += event.wheelDelta / 12;
                if(zoom > 0) o.style.zoom = zoom + %;
                return false;
            }
        </script>
    </head>

    <body>
        <img src="img/3.jpg" alt="" id="img-center" onmousewheel="return bbimg(this)">
    </body>

</html>

 

图片在浏览器窗口水平居中展示(图片尺寸不限制)

标签:class   bsp   false   限制   title   play   doc   来源   jpg   

原文地址:http://www.cnblogs.com/zhangyingqin/p/7127068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!