js实现下拉刷新上滑加载更多效果

在APP中我们经常会在页面下拉时看到一些动效,例如下拉图片跟随放大、下拉刷新出现loading动画等,这个交互细节在各个主流APP以及手机原生系统中随处可见,能为APP增添个性亮点。 一、背景 在我们的日常项目中,也会遇到这样的需求,在当前环境下,此类效果大多是靠原生来实现的,但是用原生实现有不少缺陷,原因如下: 原生实现周期长; 跨平台实现成本高; 解决方案通用性差; 运用到现有项目改造成本高; 那么我们的H5页面能否实现呢?下面和大家一起来探索。

CSS 与 HTML5 响应式图片

 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。 CSS3 响应式图片 对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Retina 屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」,例如: .mod .hd h3 { background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */ } /* ————- Retina ————- */ @media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */ only screen and (min–moz-device-pixel-ratio: 2), /* Firefox 16 之前 */ only screen …

IE10 CSS Hack

导读: 什么是CSS Hack? IE6 CSS Hack IE7 CSS Hack IE8 CSS Hack IE9 CSS Hack IE10 CSS Hack CSS Hack 速查表 前提:不考虑IE6以下的版本、且运行环境为标准模;IE11未做测试 IE10 CSS Hack IE10 CSS Hack only 无 other IE10 CSS Hack .demo{color:blue\9\0;} /* IE9+*/ .demo{color:#09F\0;/*IE8+*/} .demo{color:#090\9;/* All IE */} @media screen and (min-width:0\0) { .demo{color:blue;}/* IE9 , …

IE9 CSS Hack

导读: 什么是CSS Hack? IE6 CSS Hack IE7 CSS Hack IE8 CSS Hack IE9 CSS Hack IE10 CSS Hack CSS Hack 速查表 前提:不考虑IE6以下的版本、且运行环境为标准模;IE11未做测试 IE9 CSS Hack IE9 CSS Hack only 暂未发现仅IE9能识别的CSS Hack;随着IE10、IE11的出现网络上流传的“IE9 CSS Hack only”已经失效。 other IE9 CSS Hack .demo{color:blue\9\0;} /* IE9+*/ .demo{color:#09F\0;/*IE8+*/} .demo{color:#090\9;/* All IE */} @media screen and (min-width:0\0) …