基于HTML5、CSS3的响应式图片处理

原创
2014/12/06 11:10
阅读数 133

完整代码(或者看下面的要点小结):

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        * { margin: 0px; padding: 0px; }
        /** 关键在这里下面一行 **/
        img { max-width: 100%; height:auto; width: auto\9; /* ie8 */ }
        /** 这里的宽和高是背景图片的实际尺寸,主要用于在电脑上完全显示 **/
        #wrap { width: 1080px; height: 1848px; margin: 0px auto; position: relative; }
        /** 这边的宽和高是下载按钮的实际尺寸 **/
        #wrap .btn_download { width: 774px; height: 210px; float: left; position: absolute; z-index: 99999; display: none; }
        /** 当视口宽度小于背景图片的实际宽度 1080px 时 **/
        @media screen and (max-width: 1080px) {
            /* 重新设置背景图片所属父级的宽、高 */
            #wrap { width: 100%; height: auto; }
            /* 重新设置下载按钮的宽、高,这里的高宽度是根据 774/1080=0.71666666... 得到,即下载按钮的宽度与背景图片的宽度比 */
            #wrap .btn_download { width: 71%; height: auto; }
        }
    </style>
</head>
<body>
    <div id="wrap">
        <img src="./images/bg_2_download.png" alt="" id="btn_download">
        <img src="./images/bg_2.jpg" alt="" id="img_back">
    </div>
<script>

//
var oImgBack = document.getElementById("img_back");
var oBtnDownload = document.getElementById("btn_download");

window.onload = function() {

    // 页面载入或刷新时,初始化下载按钮的位置
    setBtnLayout();

    // 视口改变时,重新计算下载的按钮的相对位置
    this.onresize = function() { setBtnLayout(); }
}

/**
 * 根据背景宽度和高度,计算下载按钮的相对布局位置
 */
function setBtnLayout() {
    // 设计给到的切图标注中,实际的top值为1499px、left值为154px
    // 这里的 0.81111 是根据 1499/1848=0.81111... ,即top值与图片实际高度的比例 
    // 这里的 0.1425 是根据 154/1080=0.1425... ,即left值与图片实际宽度的比例 
    var iBtnTop = Math.ceil(oImgBack.offsetHeight * 0.8111);
    var iBtnLeft = Math.ceil(oImgBack.offsetWidth * 0.1425);
    oBtnDownload.style.top = iBtnTop + "px";
    oBtnDownload.style.left = iBtnLeft + "px";
    oBtnDownload.style.display = "block";
}
</script>
</body>
</html>


主要点小结:

  1.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2.     <!--[if lt IE 9]>
            <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
  3. img { max-width: 100%; height:auto; width: auto\9; /* ie8 */ }
  4. 当视口改变时,对下载按钮宽度、top值、left值的计算与处理

  5. 其它对于html5、css3相关内容,请自行查阅,这里不做详细说明


展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部