html5 全屏滚动活动页学习
先看几个具体的实例:
1.腾讯娱乐:http://ent.qq.com/zt2014/qqent/h5.htm?from=groupmessage&isappinstalled=0
2.苏宁互联 :http://image.suning.cn/images/game/hlwx/index.html?from=timeline&isappinstalled=0#rd
3.qq音乐:http://y.qq.com/m/act/year10/04.html?ADTAG=weixin&from=groupmessage&isappinstalled=0
这些都是基于html5的活动页面。这些全屏的滚动页面,必须是基于touch 的触摸事件。有几种选择
-- : 基于zepto的touch事件
-- : 基于原生的事件的实现
-- : 还可以基于jquery 封装的touch事件实现。(jquery.event.move:https://github.com/stephband/jquery.event.swipe)
项目中看自己的取舍。这里面有个问题:最好不要在body中实现做滚动的事件操作。否则由于滚动的原因,浏览器的得到的高度可能不准。(当然嵌入在微信浏览器中没有问题)。
自己个人尝试 实现的原理比较简单, 比较重要的思路是:页面布局方面类似于图片轮播的那种。只是他的宽度或者高度是动态的计算出来的。然后使用jquery.event.move进行
判断滑动方向以及滑动的距离。
html5 全屏滚动活动页学习的更多相关文章
- FullPage.js全屏滚动插件学习总结
如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...
- html5——全屏滚动
鼠标滚轮 window.onmousewheel=function(){}; 基本描述 1.我们使用插件fullpage,为了更好的兼容性 2.动画效果是在滚动到这一屏时触发的,此时给当前屏幕加cur ...
- 学习笔记: js插件 —— fullPage.js (页面全屏滚动)
fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js, 233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- 手机端实现fullPage——全屏滚动效果
封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1. 纯js实现,小巧轻便. 2. 兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1. 仅封装了基础功能,H ...
- fullpage.js全屏滚动插件使用方法
在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...
- 六一广告页H5全屏滚动效果实现
明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...
- FullPage.js-基于 jQuery 的插件全屏滚动插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
随机推荐
- javascript 实现htmlEncode htmlDecode
屌屌的写法..function htmlEncode(value){ //create a in-memory div, set it's inner text(which jQuery automa ...
- UITableViewCell高度自适应探索--AutoLayout结合Frame
UITableViewCell高度自适应探索--UITableView+FDTemplateLayoutCell地址: http://www.jianshu.com/p/7839e3a273a6UIT ...
- C. Fox And Names
C. Fox And Names time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- cocos2d-x lua 触摸事件
cocos2d-x lua 触摸事件 version: cocos2d-x 3.6 1.监听 function GameLayer:onEnter() local eventDispatcher = ...
- js里一些经典的算法
//1.找出某个数字在一组数组内的存不存在 如果存在 找出他所在的索引. function indexOf(arr,item){ var i; if(Array.prototype.indexOf){ ...
- Wing IDE 5 for Python 安装及破解方法
安装Wing IDE 官网下载deb安装文件 开始安装程序 dpkg -i 文件名.deb 安装完成后打开注册界面,输入下面的License ID 后得到RequestCode,将RequestCod ...
- 向MyEclipse添加Oracle数据库
向MyEclipse添加Oracle数据库 1.点击下面圈起来的位置,打开MyEclipse database Explorer视图. 2.在如图空白处右击,选择new进入New Database C ...
- centos7重置root开机登录密码
今天忘记了centos7 root登录的密码,本来要好好的做个图文的教程也好啊,但是忘记截图什么的,就不在重复的工作了, 参考了下面的两个链接重置了密码,结合使用效果更好哦,嘿嘿.. 下次要是再遇到这 ...
- next_permutation()—遍历全排列
# next_permutation()--遍历全排列 template <class BidirectionalIterator> bool next_permutation (Bidi ...
- oracle 学习笔记 复制表结构
1.复制表结构以及数据 create table d_table_name as select * from s_table_name; ---注意并不会创建索引 2.只复制表结构 create t ...