六一广告页H5全屏滚动效果实现
明天就六一儿童了（放假了），在这里提前祝大家周末快乐，每逢节假日公司必然会推出h5活动页的需求，这次六一儿童节也不例外，产品这次倒是没提什么互动效果需求，只不过根据UI妹子给的设计图，图片与图片中颜色区分过于明显，所以自己感觉还是做全屏滚动效果比较好看，因此在这里做个总结......
方法一：
效果图展示（动态图用的是LICEcap软件）：
全局代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>移动端h5活动整页滑屏</title>
<style type="text/css">
*{padding:0;margin:0}
body,html{height:100%;background-color:#fff}
.wrap{width:100%;height:100%;overflow:hidden}
.wrap2{width:100%;height:1000%;transition:.3s linear}
.page{width:100%;height:10%;}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="wrap2" id="wrap2">
<img class="page" src="img/six01.png"/>
<img class="page" src="img/six02.png"/>
<img class="page" src="img/six03.png"/>
<img class="page" src="img/six04.png"/>
<img class="page" src="img/six05.png"/>
<img class="page" src="img/six06.png"/>
<img class="page" src="img/six07.png"/>
<div class="img-eight page">
这一块是input框，为了简化代码，易于理解去掉了
</div>
</div>
</div>
<script type="text/javascript">
//重要！禁止移动端滑动的默认事件（这一块是移动端下拉的时候会触发到刷新事件，滑动图片会上不去）
document.body.addEventListener('touchmove', function(event) {
event = event ? event : window.event;
if(event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
}, false)
var pages = function(obj) {
var box = document.getElementById(obj.wrap);
var box2 = document.getElementById(obj.wrap2);
var len = obj.len;
var n = obj.n;
var startY, moveY, cliH;
//获取屏幕高度
var getH = function() {
cliH = document.body.clientHeight
};
getH();
window.addEventListener('resize', getH, false);
//touchStart
var touchstart = function(event) {
if(!event.touches.length) {
return;
}
startY = event.touches[0].pageY;
moveY = 0;
};
//touchMove
var touchmove = function(event) {
if(!event.touches.length) {
return;
}
moveY = event.touches[0].pageY - startY;
box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
};
//touchEnd
var touchend = function(event) {
//位移小于+-50的不翻页
if(moveY < -50) n++;
if(moveY > 50) n--;
//最后&最前页控制
if(n < 0) n = 0;
if(n > len - 1) n = len - 1;
//重定位
box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面
console.log(n)
};
//touch事件绑定
box.addEventListener("touchstart", function(event) {
touchstart(event)
}, false);
box.addEventListener("touchmove", function(event) {
touchmove(event)
}, false);
box.addEventListener("touchend", function(event) {
touchend(event)
}, false);
};
pages({
wrap: 'wrap', //.wrap的id
wrap2: 'wrap2', //.wrap2的id
len: 8, //一共有几页，这里就是数字几
n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
});
</script>
</body> </html>
方法二：
效果图如下：
整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端滚屏效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
body,html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.g-fullPage{
width: 100%;
height: 100%;
overflow: hidden;
}
.g-fullPage div{
width: 100%;
height: 100%;
text-align: center;
line-height: 100%;
transition: 0.5s ease-in;
}
.g-fullPage div:nth-child(1){
background-color: #D5F1FD;
}
.g-fullPage div:nth-child(2){
background-color: aquamarine;
}
.g-fullPage div:nth-child(3){
background-color: mediumseagreen;
}
</style>
</head>
<body>
<div class="g-fullPage">
<div class="f-pageFirst">1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<script type="text/javascript">
/*
mainClass 滑动父容器类名
firstClass 第一页的类名
num 总页数
*/
function fullPage(mainClass, firstClass, num) {
var startX = 0, //初始横坐标
startY = 0, //初始纵坐标
marginTop = 0, //上下滑动变量
touchNum = 0, //上滑极限，是否可以上滑
touchFlag = true, //可滑动标志 true 可滑动，false 不可滑
bodyHeight = document.body.offsetHeight,
page = document.getElementsByClassName(mainClass)[0],
pageFirst = document.getElementsByClassName(firstClass)[0]; //获取触摸的初识坐标
page.addEventListener("touchstart",function(e){
e.preventDefault();
startX = e.targetTouches[0].clientX;
startY = e.targetTouches[0].clientY;
})
//重置触摸的坐标值
page.addEventListener("touchend",function(e){
e.preventDefault();
startX = 0;
startY = 0;
touchFlag = true;
}) //监听并实现 上、下 滑动效果
page.addEventListener("touchmove",function(e){
e.preventDefault();
var newX = e.targetTouches[0].clientX,
newY = e.targetTouches[0].clientY;
if (newY - startY > 50) {
if (touchFlag == true && touchNum > 0) {
console.log("下滑");
touchFlag = false;
marginTop += 1;
touchNum -= 1;
pageFirst.style.marginTop = marginTop * bodyHeight+"px";
}
} else if (newY - startY < -50) {
if (touchFlag == true && marginTop > -num+1) {
console.log("上滑");
touchFlag = false;
marginTop -= 1;
touchNum += 1;
pageFirst.style.marginTop = marginTop * bodyHeight+"px";
}
}
})
} fullPage("g-fullPage", "f-pageFirst",3);
</script>
</html>
总结：希望上面两种方法对大家有所帮助，最后，祝大家六一快乐啦！
六一广告页H5全屏滚动效果实现的更多相关文章
- 全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- 手机端实现fullPage——全屏滚动效果
封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1. 纯js实现,小巧轻便. 2. 兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1. 仅封装了基础功能,H ...
- pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- pagePiling.js - 创建美丽的全屏滚动效果
在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...
- H5全屏滚动专题页最佳实践
1.slip.js + rem.js 主要插件: slip.js github: https://github.com/binnng/slip.js rem.js 插件为阿里淘宝的 rem 实现的基础 ...
- 用fullPage来实现全屏滚动效果
[注意]所有的page要用div包裹,id为fullpage.不能直接包在body中 [使用fullpage的步骤] 1.导入 JQuery.js,fullpage.js,fullpage.css ...
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
- 全屏滚动插件pagePiling.js
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...
随机推荐
- HTML5 烟花系统
需求:在一个虚拟烟花球中,在不同的部位填充不同颜色.质地的烟花火药:观看试放效果.最好能结合点物理学定律(以便展现火药粉被爆炸扩散到一定程度再爆炸的效果) 这是这学期的一个作业,感觉挺无聊的,纯粹是老 ...
- 手把手教你在Linux系统下安装MongoDB
1. 下载最新的stable版MongoDB [root@spirit-of-fire ~]# wget http://downloads.mongodb.org/linux/mongodb-linu ...
- 使用Xshell链接阿里云服务
1.下载Xshell,进入xshell官网 https://xshell.en.softonic.com/,选择免费版本进行下载,在该页面https://www.netsarang.com/zh/fr ...
- Qt Delgate的使用 简单说明
(一) Qt Model/View 的简单说明 .预定义模型 (二)使用预定义模型 QstringListModel例子 (三)使用预定义模型QDirModel的例子 (四)Qt实现自定义模型基于QA ...
- Kafka Eagle 安装
Kafka Eagle 是一款开源的 Kafka 集群监控系统. 一.下载 https://download.kafka-eagle.org/ 二.安装 # 解压 .tar.gz -C /opt/ / ...
- springboot-mvc:入参日期类型转换String->Date
4种方式: 1.通过在application.ym中配置 spring.mvc.data-format: yyyy-MM-dd HH:mm:ss ,使用的是ParserConverter 优点:简单的 ...
- Go语言fmt.Printf使用指南（占位符总结）
本文整理了Go语言的标准输出流(fmt.Printf)在打印到屏幕时的格式化输出操作. 在这里按照占位符将被替换的变量类型划分,更方便查询和记忆. 总结 1.1 General(通用占位符) 占位符 ...
- 手把手教你把5V的Arduino改造成3.3V版本
Arduino Pro Mini是基于ATmega328的微控制板,支持5V/3.3V电压.但是我们比较容易买到的是5V供电的版本,有的时候需要用到3.3V版本(比如我们的软控DAC).怎样才能让这款 ...
- java数据结构之LinkedHashMap
一.LinkedHashMap源码注释 public class LinkedHashMap<K,V> extends HashMap<K,V> implements Map& ...
- UniEAP UTF 用户手册 （引擎）
目录 第1章 概述 5 1.1 术语解释 5 第2章 测试文件组织 6 2.1 测试执行文件详解 7 2.1.1 参数配置 7 2.1.2 测试报告配置 9 2.1.3 浏览器类型配置 9 2.1.4 ...