html5上下滑动“翻页”实现，是真正的翻页_随笔

HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

<!DOCTYPE html>

<title>HTML5手机页面触屏滑动上下翻页特效</title>

</head>

</div>

</div>

</section>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</section>

</body></html>

2、css代码：

@charset "utf-8"

.ad_foot li { margin:0 auto 1emfont-size:1.8empadding:15pxbackground:#FFF}

.ad_foot li a {display:block}

.ad_foot li .l {width:75pxheight:75pxfloat:leftoverflow:hidden}

.ad_foot li .l img {width:75pxwidth:75px}

.ad_foot li .r {width:78%float:leftmargin-left:30pxcolor:#666overflow:hidden}

.ad_foot li .r p {color:#999font-size:1.2em}

.ad_foot li .r span {font-size:0.8em}

.ad_foot li .r i {font-style:normal}

.lazy-img, .lazy-finish{background-color:#f0eded}

.page-list{font-size:20pxfont-family: "Microsoft yahei"padding-left:17pxpadding-top:30pxheight:35pxborder-bottom:1px solid #b5b5b5display:none}

.ad_foot{padding:15px 15px 0 15px}

/*声音播放按钮*/

#song_img {width:293pxheight:41pxdisplay:blockposition:absoluteright:4.1emtop:1.6emfont-size:1.7emtext-align:centerline-height:41pxcolor:#FFFbackground:url(../img/music_c3.png) no-repeat 0 0}

/*底部推荐*/

.ad_list{margin-top:2em}.ad_list li {width:46%background:nonepadding:0float:leftmargin-bottom: 1em}

.ad_list li.r {float:right}.ad_list li a img {width:100%height:auto}

.ad_foot h3 {width:100%height:48pxline-height:48pxbackground:#F9F5EC}

.ad_foot h3 a {display:inline-blockcolor:#444width:50%text-align:centerfont-size:1.5emheight:48pxborder-bottom:2px solid #FF9240}

.ad_foot h3 a.active {color:#FFFbackground:#FF9240}

.magazine_1 li {

width:100%

margin-bottom: 1em

font-size: 1.8em

padding: 15px

background: #FFF}

.magazine_1 li a {display:block}

.magazine_1 li .l {width: 75px

height: 75px

float: left

overflow: hidden}

.magazine_1 li .l img {width:75pxheight:75px}

.magazine_1 li .r {width: 78%

float: left

margin-left: 30px

color: #666

overflow: hidden}

.magazine_1 li .r p {

color: #999

font-size: 1.2em

.magazine_1 li .r span {font-size:0.8em}

.ad_foot li .r i {font-style:normal}

3、运行效果如下：

CSS3除了为开发者提供二维变形之外，还将动画从二维平面推动到了三维立体状态，能够实现真正的三维特效。

三维变形和二维变形一样，均使用的是transform属性。想要触发三维变形有两种方式：一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”，另一种方式是直接使用CSS3三维变形的语法。

触发方法1：告知浏览器变形方式

-webkit-transform-style:preserve-3d

Tips：IE不支持三维变形，在移动端，绝大多数的浏览器均为WebKit内核，因此，在此句代码之前需要书写-webkit-的前缀内核。

Tips：不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中，如果当前元素属于body的子级元素，又希望应用三维变形，则在body和当前元素之间多嵌套一层结构，并为这层元素应用三维变形即可。

触发方法2：直接使用CSS3变形语法

<!DOCTYPE html>

<head>

<title>言成科技/title>

<style>

.box1 {

width: 150px

height: 150px

border: 2px solid blue

}

.box1 div {

height: 150px

background: rgba(0, 0, 0, 0.5)

-webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg)

transform: translate3d(30px, 60px, 20px) rotateX(30deg)

}

</style>

</head>

<body>

</div>

</body>

</html>

具体三维变形的具体属性详见《CSS3-3D相关知识详解—视角以及变形方向》

3D效果制作

需求

制作一个立方体，并进行旋转

代码实例

<!DOCTYPE HTML>

<html>

<head>

<style>

.main-bac { -webkit-perspective:1500 } /*设定透视距离*/

.main{

width:200px

height:200px

margin: 0 auto

position:relative

-webkit-transform-style:preserve-3d

-webkit-transition:-webkit-transform 2s ease 0s/*过渡时间*/

}

/*基本样式*/

.main p{

position: absolute

margin: 0

padding: 0

width: 200px

height: 200px

text-align: center

line-height: 200px

font-size: 26px

opacity:0.5

}

/*将第一个元素Z轴向前移动100px，形成第一个面（正面）*/

.main p:nth-of-type(1) {

background-color:red

-webkit-transform:translateZ(100px)

}

/*将第一个元素Z轴向前移动100px，绕x轴旋转90度形成上面的面*/

.main p:nth-of-type(2) {

background-color:orange

-webkit-transform:rotateX(90deg) translateZ(100px)

}

/*将第一个元素Z轴向前移动100px，绕x轴旋转-90度形成下边的面*/

.main p:nth-of-type(3) {

background-color:yellow

-webkit-transform:rotateX(-90deg) translateZ(100px)

}

/*将第一个元素Z轴向前移动100px，绕y轴旋转90度形成右侧的面*/

.main p:nth-of-type(4) {

background-color:green

-webkit-transform:rotateY(90deg) translateZ(100px)

}

/*将第一个元素Z轴向前移动100px，绕y轴旋转-90度形成左侧的面*/

.main p:nth-of-type(5) {

background-color:#b435bf

-webkit-transform:rotateY(-90deg) translateZ(100px)

}

/*将第一个元素Z轴向前移动100px，绕y轴旋转180度形成后面（背面）*/

.main p:nth-of-type(6) {

background-color:blue

-webkit-transform:rotateY(180deg) translateZ(100px)

}

/*鼠标移入时绕Y轴旋转180度，绕Z轴旋转180度*/

.main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg) }

</style>

</head>

<body>

<p>JavaScript</p>

</div>

</body>

</html>

代码解析

当鼠标移入的时候，立方体逐渐的发生旋转（非突变），围绕X轴旋转45度的同时，围绕Y轴旋转45度。

当鼠标移出立方体时，立方体恢复到初始状态。在最开始状态时，并没有采用无限远的视角，设置一定的视角，让刚开始时直视立方体时，不会觉得是一个平面。

3D效果制作-目标效果图

以上资料来源：《HTML5布局之路》

由于HTML5和微信内置浏览器的火爆，移动端H5网页越发流行。在设计制作移动端网页的时候，你是否疑惑，这种网站设计稿应该做成的多少屏宽，是否应该跟手机的分辨率一致，还是应该按照iPhone的分辨率来设计（注意H5网页区别于APP，APP的设计稿直接按照手机分辨率来设计）？那么对于现在2K屏幕的手机，应该如何制作设计稿和前端稿呢？

作为本次文章系列的“上”部，将解决一些基本概念：像素（pixel）、ppi、分辨率、物理像素（physical pixel）、CSS像素、设备独立像素（deviceindependent pixel）等等。

为图像显示的基本单位，表示“图像元素”之意。 每个这样的信息元素不是一个点或者一个方块，而是一个抽象的采样。 仔细处理的话，一幅图像中的像素可以在任何尺度上看起来都不像分离的点或者方块；但是在很多情况下，它们采用点或者方块显示。

这一段是出自维基百科的解释。其实很多会Photoshop的人都有一个误区：认为像素是一个宽高相等的小方块，并且的像素都是“那么大”，但是不知道这个宽高的具体数字。

像素是一个抽象概念，它是一个相对单位。

像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。

先可以跳过这个话题，介绍ppi概念，像素没有大小就好理解了。

PPI的复杂之处在于如果他所属的上下文环境不同，意义也会完全不一样。当我们在谈论显示设备的PPI时，它代指的屏幕的像素密度；当我们在谈论和图片相关时，我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况。

PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。

举例1：

中的七张图，假设图片尺寸都为1x1寸，那么 PPI 分别为 1、2、5、10、20、50、100 。 在同一物理尺寸内 ，随着像素数的增大，图像细节越多， PPI 增大，图像越清晰，像素所占空间相对越小。

因此，从讨论像素大小的角度来说，图①中各个方框像素的宽度（单位为英寸）分别为：1、1/2、1/5、1/10、1/20、1/50、1/100。像素在每个不同ppi下大小都不同，因此讨论像素的大小也就变得无意义了。像素是没有大小的。像素是一个抽象概念，它是一个相对单位。

像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。

举例②：

在photoshop中分别建立两个文档：①800x600px，72ppi，②800x600px，300ppi。那么这两个文档在PS或者生成图片时，显示的视觉效果是完全一样的，因为宽高的像素点数是完全一样的，在设备上渲染出来的效果图是一致的。当你把文档②中的任意图层复制到文档①中，从视觉上发现图层不会变大或者缩小。只有把这两个文档作为图片1:1打印出来时，才会发现72ppi的图片要大于300ppi的图片（注意ppi的含义），前者宽（高）大约是后者的4.16（300/72）倍。

任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，ppi对于图片来说时没有任何意义的，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有他的意义。

分辨率泛指显示系统对细节的分辨能力。能显示图像都能叫显示系统，比如显示器，投影仪，照片。

分辨率常用的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（像素每英寸）。从单位来看，分辨率是一个比值，与物理单位的比值。

日常所说的“这张图片的尺寸（或分辨率）是100x100像素”，一般都是在描述数字图片，这样的描述只是说明了图片文件包含多少个像素。比如图1中的七张图，我们习惯于说，第1张图的分辨率是1x1像素，第5张图的分辨率是20x20像素，其实只是说明了图片的像素数而已。

这是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。

最先使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。

对比如下两幅图，可以清晰地看出是否 Retina 屏的显示差异：

图2 iPhone 3GS

图3 iPhone 4

两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是一样的，从上图可以看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提高了，但它不同于普通的电脑显示器那样为了显示更多的内容，而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例，工作时显卡渲染出的2880x1880个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍。

注意：在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。

为什么是“每四个一组”？而且要让这四个一组来显示“原来屏幕的一个像素”？这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”，可以被称作“设备独立像素”， device independent pixel ，或者 density-independentpixel ，它可以是系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。

“设备独立像素”也有人称为“CSS像素”，一种形象的说法，更倾向于表明与 CSS 中尺寸的对应。

设备独立像素与物理像素的对应关系，可以这样看：

图4

类似的每四个一组的对应关系，也许正是 Retina 显示技术所做的。

作为Web开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。

CSS像素有什么特别的地方？我们可以借用quirksmode中的这个例子：

假设我们用PC浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。

但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。

吊诡的是此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。

CSS像素与屏幕像素1：1同样大小时：

图5

CSS像素(黑色边框)开始被拉伸，此时1个CSS像素大于1个屏幕像素

图6

也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大 *** 作让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的情况，在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。

从上面的例子可以看出，CSS像素从来都只是一个相对值。

设备像素比=设备物理像素/设备独立像素

设备像素比在 js 中可以通过 devicePixelRatio 的参数取得（需要页面的 viewport 设置为 content=”width=device-width” 此处为前端布局知识，较为专业，笔者也只是意会，无法说清楚，请自行百度）

iPhone 4 的设备像素比为2，线长（横向、纵向、对角线）上的物理像素数与设备独立像素数的对应关系即为2。

根据这个对应关系，一般可以通过屏幕的物理分辨率和设备像素比确定设备独立像素数。

那么在我们做移动端网站时，将viewport设置了content=”width=device-width”，设备独立像素也就等于CSS像素。

经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。

这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。笔者从其他文章中找到了一些答案。（原型图屏宽是320px是为了满足原型软件在1：1比例显示上适当，二是为了保证早期iphone320px屏宽的显示需求）

“其实这个属性值很有意思，字面意应该是 viewport 宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于 Apple ，因为早期 iPhone 的分辨率为 320px*480px ，大量为 iPhone 量身定制的网站都设置了 viewport:width=device-width ，并且按照宽度 320px 来设计制作，所以其他浏览器加入 viewport 支持时为了兼容性也将 device-width 定义为了 320px 。”

那么到了后来的iPhone4的屏幕是960x640px，几乎所有人都知道Retina显示屏，所有方向上的像素都成了原来的2倍。而设备独立像素的屏宽还是保持着320px。其它智能手机早期的分辨率基本上也使用了大致相同的屏幕尺寸与分辨率，因此才有了 320px 这个不约而同的约定。

当然，如果把 viewport 的 width 属性设置为一个定值，比如 320、 480、 700 等等，那 viewport 的宽度即为设定的宽度。此时，设备独立像素宽度，也即所设定的宽度，而物理像素与设备独立像素的比值，则不再是最初始的设备像素比值了（比如 iPhone 4 中的2）。

现在的智能手机屏幕尺吋多样，分辨率有很多种，相应地，设备像素比也不一致，有1、1.5、2、2.25、3等等，而在一般情况下（指 viewport 设置为 width=device-width 时）的设备独立像素宽度，也不再只是 320px 了，还有 360px 、 400px等等。这是从 http://screensiz.es/phone 统计的大部分手机独立像素数据。

若设备像素比是N，就表示该手机屏幕上的N个物理像素来显示一个CSS像素。

本文对已移动端网站涉及到的一些概念进行了较为基础的解释，在下一篇中，会介绍H5网页在做设计稿以及前端布局时的最为省力的方法。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7294668.html

html5上下滑动“翻页”实现，是真正的翻页

发表评论

评论列表（0条）