文档章节

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

whoru
 whoru
发布于 2014/12/06 11:10
字数 622
阅读 102
收藏 1

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

<!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相关内容,请自行查阅,这里不做详细说明


© 著作权归作者所有

whoru
粉丝 17
博文 156
码字总数 76422
作品 0
济南
高级程序员
私信 提问
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
0
0
10 个旨在美化网站的 HTML5 滑块设计

现在,网站变得更优雅生动,引入了大量的动画和活动的内容——这得益于商业设计的创新。几年前的网页羞涩无趣,其上面的内容静止而乏味。因为滑块的使用这些状况已然改变。现代风格的设计模式...

oschina
2013/09/05
5.5K
10
8款炫酷的HTML5特效源码

HTML5的强大不仅在于可以让网页元素更加灵活多变,更在于它可以很方便的实现网页动画的特效,可以让你的网站更加富有现代化特色。今天,就给大家分享8个让人难忘的HTML5炫酷动画~ 1、HTML5 C...

牵着蜗牛去西藏
2015/02/09
4K
1
html5新效果,请各位同事本周学习一下

Twitter“点赞”红心按钮CSS3动画特效 http://www.htmleaf.com/Demo/201508302494.html HTML5 SVG制作滚动变形的半圆形页面头部特效 http://www.htmleaf.com/html5/SVG/201508302493.html H......

hi30059478
2016/02/21
14
0
35 个免费的响应式网站模板下载

响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹...

oschina
2013/01/23
14.9K
23

没有更多内容

加载失败,请刷新页面

加载更多

MySql双主架构原理

在企业中,一般系统架构的瓶颈会出现在数据库这一部分,mysql主从架构在很大程度上解决了这部分瓶颈,但是在mysql主从同步的架构也存在很多问题;比如:1.关于数据写入部分(也就是主库)往往很难做...

xiaomin0322
28分钟前
0
0
分布式系统中一致性哈希

问题场景 近年来B2C、O2O等商业概念的提出和移动端的发展,使得分布式系统流行了起来。分布式系统相对于单系统,解决了流量大、系统高可用和高容错等问题。功能强大也意味着实现起来需要更多...

Java领航员
29分钟前
0
0
接口限流算法:漏桶算法和令牌桶算法

漏桶算法 漏桶可以看作是一个带有常量服务时间的单服务器队列,如果漏桶(包缓存)溢出,那么数据包会被丢弃。这一点和线程池原理是很相似的。 把请求比作是水,水来了都先放进桶里,并以限定...

铁骨铮铮
36分钟前
5
0
Android 生成二维码工具类

/** * 生成条形码和二维码的工具 */public class ZXingUtils { /** * 生成二维码 要转换的地址或字符串,可以是中文 * * @param url * @param width ...

lanyu96
41分钟前
1
0
谈谈lucene的DocValues特性之SortedNumericDocValuesField

前面已经介绍过NumericDocValuesField,这里想强调一下SortedNumericDocValuesField是针对同一篇文档中一键多值的情况进行排序的,换句话说不同文档的同一字段值可以乱序。核心的写入流程与谈...

FAT_mt
49分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部