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 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
随机推荐
- SVN 修改URL路径
http://strugglelinux.blog.51cto.com/1009905/672008 标签:休闲 SVN 修改URL路径 职场 原创作品,允许转载,转载时请务必以超链接形式标明文章 原 ...
- 疑问-hadoop
hadoop可以设置备份数据个数,那么这些不同节点的数据块对于hadoop来说有区分谁是备份的谁是直接可以用的吗? hadoop有机架策略,给某些操作如像根据带宽选择节点传输数据 那么这种策略的根据是 ...
- JavaScript 之 弹出窗口总结
一.javascript 控制窗口关闭及刷新 //关闭弹窗 <script language="javascript"> window.close(); </sc ...
- SQL中空值与NULL区别
很多人都有过这样的问题吧 在SQL中填充空值与NULL有什么区别 现在我以一个实例给大家分享一下自己的想法 恳请大家给予批评也指正 谢谢 创建一个监时表 CREATE TABLE #temp ( ...
- JavaScript版几种常见排序算法
今天发现一篇文章讲“JavaScript版几种常见排序算法”,看着不错,推荐一下原文:http://www.w3cfuns.com/blog-5456021-5404137.html 算法描述: * ...
- javacv
(看到有很多同学都来看这篇文章,说明可能是有必要的,然后这个写的比较水,所以 如果求干货的话,请移步: http://www.cnblogs.com/letben/p/5885799.html 但是 ...
- ubuntu14_pip 安装
1:install pip python-dev sudo apt-get install python-dev sudo apt-get install libevent-dev ...
- hdu 2852 树状数组
思路:加一个数e就用update(e,1).删除元素e就用update(e,-1).找比a大的第k大的元素就用二分查找. #include<iostream> #include<cs ...
- iOS下使用sqlite3
1.创建数据库 使用firefox的sqlite manager创建和打开数据库,详细请参考: http://www.cnblogs.com/hanjun/archive/2012/10/29/274 ...
- asp.net的CascadingDropDown取值和赋值
获取选择的值 可以使用形如以下的方式获得选择的值: Label1.Text = ddlProvince.SelectedValue; Label2.Text=ddlCity.Select ...