利用zepto.js实现移动页面图片全屏滑动
HTML
<%--
Created by IntelliJ IDEA.
User: fanso2o
Date: 2017/2/28
Time: 16:09
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html ng-app="wechat">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta charset="utf-8">
<title ng-bind="newTitle" style="text-align: center"></title>
<%@ include file="../../common/head.jsp" %>
<link rel="stylesheet" href="/res/wechat/css/v61/styles.css">
</head>
<body ng-controller="activityController as activity">
<div class="preload" id="preload"></div>
<div id="v61">
<div class="container">
<!-- p1 -->
<section class="page p1">
<span class="bottom-bg"></span>
<span class="bg-icon"></span>
<div class="p1-box">
<span class="p1-bg"></span>
<span class="p1-title"></span>
<p class="time-box">活动时间：<span ng-bind="(activity.activityInfo.dateFrom|wxDate) + ' 至 ' + (activity.activityInfo.dateTo|wxDate)"></span></p>
</div>
<div class="top-box">
<div class="logo-box">
<img src="{{activity.activityInfo.picLogo | wxResUrl}}" alt="logo">
</div>
<div class="rules-box" ng-click="activity.showContent = true;"><span></span>活动规则</div>
</div>
<div class="footer-box">
<div class="next-box">
<span class="next1"></span>
<span class="next2"></span>
</div>
<a href="http://dwz.cn/4xAz0d" class="coryright">粉丝魔方Fanso2o.com | 跨界改变生活</a>
</div>
<div class="alert ng-hide" ng-show="activity.showContent">
<div class="p1-alert">
<h3 class="alert-title">活动规则 <span class="close-icon" ng-click="activity.showContent = false;"></span></h3>
<div class="alert-content">
<p ng-bind-html="activity.htmlDes"></p>
</div>
</div>
</div>
</section>
<!-- p2 -->
<section class="page p2">
<span class="p2-top"></span>
<span class="p2-bottom"></span>
<div class="footer-box">
<div class="next-box">
<span class="next1"></span>
<span class="next2"></span>
</div>
<a href="http://dwz.cn/4xAz0d" class="coryright">粉丝魔方Fanso2o.com | 跨界改变生活</a>
</div>
</section>
<!-- p3 -->
<section class="page p3">
<span class="p3-top"></span>
<span class="p3-bottom"></span>
<div class="footer-box">
<div class="next-box">
<span class="next1"></span>
<span class="next2"></span>
</div>
<a href="http://dwz.cn/4xAz0d" class="coryright">粉丝魔方Fanso2o.com | 跨界改变生活</a>
</div>
</section>
<!-- p4 -->
<section class="page p4">
<span class="bottom-bg"></span>
<span class="bg-icon"></span>
<div class="p4-box">
<span class="p4-bg"></span>
<span class="p4-title"></span>
</div>
<div class="draw-btn" ng-if="activity.showDraw" ng-click="activity.activityDraw()"></div>
<div class="footer-box">
<a href="http://dwz.cn/4xAz0d" class="coryright">粉丝魔方Fanso2o.com | 跨界改变生活</a>
</div>
</section>
</div>
</div> <%@ include file="../../common/foot.jsp" %>
<jsp:include page="../../common/share.jsp"></jsp:include> <script src="/res/wechat/js/libs/zepto.js/zepto.min.js"></script>
<script src="/res/wechat/css/v61/index.js"></script>
</body>
</html>
js
function scrollFn() {
$(document).on("touchstart", function (event) {
$(".container").addClass('transition');
});
//preventDefault
$(document).on("touchmove", function (event) {
event.preventDefault();
});
function addC(x, y, z) {
$(x).on(y, function () {
$(".container").addClass(z);
})
}
function removeC(m, n, h) {
$(m).on(n, function () {
$(".container").removeClass(h);
})
}
//p1 -- p2
addC('.p1', 'swipeUp', 'to-p2');
addC('.p1 .next-box', 'tap', 'to-p2');
//p2 -- p1
removeC('.p2', 'swipeDown', 'to-p2');
//p2 -- p3
addC('.p2', 'swipeUp', 'to-p3');
addC('.p2 .next-box', 'tap', 'to-p3');
//p3 -- p2
removeC('.p3', 'swipeDown', 'to-p3');
//p3 -- p4
addC('.p3', 'swipeUp', 'to-p4');
addC('.p3 .next-box', 'tap', 'to-p4');
//p4 -- p3
removeC('.p4', 'swipeDown', 'to-p4');
}
利用zepto.js实现移动页面图片全屏滑动的更多相关文章
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- 弹出iframe内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
- javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)
javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦) 缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列 ...
- 移动端全屏滑动的小插件，简单，轻便，好用，只有3k swiper,myswiper,page,stage
https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
- iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果
8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...
- iOS - 全屏滑动
取经地址 1.使用关联 关联是指把两个对象相互关联起来,使得其中的一个对象作为另一个对象的一部分. 使用关联,是基于关键字的,因此,我们可以为任意对象增加任意多的关联,但是关键字是唯一的.关联可以保证 ...
- UINavigationController实现全屏滑动返回功能
说明: UINavigationController默认在push出的控制器中都有边沿滑动返回功能,但是只能从屏幕左边滑才能返回,若从屏幕中间画并没有效果.下面实现全屏滑动功能. 探究: 系统默认能够 ...
- Android 高大上的侧滑菜单DrawerLayout，解决了不能全屏滑动的问题
DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图: 注意左上角那个图标,有木有很好玩,哈哈. ...
随机推荐
- MAMP mysql无法启动 总结（以后有发现再添加）
1.错误信息Can't start server : Bind on unix socket: Address already in use 解析:主要原因是上次关闭Mysql是出现异常而导致的, 解 ...
- Vue学习笔记——Vue-router
转载:https://blog.csdn.net/guanxiaoyu002/article/details/81116616 第1节:Vue-router入门 .解读router/index.js文 ...
- 将maven项目打成war包
//修改成war包 <packaging>war</packaging> //plugins中添加新的配置 <build> <plugins> < ...
- hibernate annotation 之 注解声明
@Entity 将一个 POJO 类注解成一个实体 bean ( 持久化 POJO 类 ) @Table 为实体 bean 映射指定具体的表,如果该注解没有被声明,系统将使用默认值 ( 即实体 bea ...
- 如何上传文件到git
具体有三大步骤: 一.创建新的仓库 二.本地仓库 三.git命令上传(需要下载git) 一.创建新的仓库 二.本地仓库 其实这个本地仓库就是文件的所在地,在哪都可以 三.git命令上传(需要下载g ...
- ThinkPHP5的简单使用
目录的介绍 thinkphp5 的控制器的创建 第一步:新建一个控制器 第二步:admin.php控制器内容如下 第三步:如何显示模型页面 第四步:显示模板页面 第五步:定义模板变量 第六步:运行结果 ...
- Jan&Feb 工作总结
一.工作任务: 熟悉dcbi项目(运维经分系统),完成指定需求. 熟悉bi项目(数据分析平台),完成指定需求. steel circus 主机游戏官网制作. 一拳超人游戏预注册页wap手机端制作. 二 ...
- low版九九乘法表
# while循环实现九九乘法表num_one = 1while num_one <= 9: num_two = 1 while num_two <= num_one: print(&qu ...
- USB电扇无刷电机改装
现在USB电扇已经很常见了,网上随便可以低价买到.里面的电机分为有刷和无刷两种.我拆过的有刷USB电扇都非常劣质,里面的电机貌似是旧DVD机的拆机货:而无刷也有优劣之分,有的硅钢片非常少,铜线也细.这 ...
- 设置Hadoop+Hbase集群pid文件存储位置
有时候,我们对运行几天或者几个月的hadoop或者hbase集群做停止操作,会发现,停止命令不管用了,为什么呢? 因为基于java开发的程序,想要停止程序,必须通过进程pid来确定,而hadoop和h ...