利用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主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图: 注意左上角那个图标,有木有很好玩,哈哈. ...
随机推荐
- Erlang学习记录:运算符
数学运算符 说明 详细 符号 加减乘 +-* 浮点数除 结果为浮点数 / 整数除 除数和被除数都必须是整数,结果为整数 div 整数取余 rem 逻辑运算符 说明 符号 详细 and 前后两个值都为真 ...
- day22 yield的表达式的应用，面向过程编程，内置函数前几个
Python之路,Day10 = Python基础10 生成器表达式: (i for i in range(10) if i > 5)os.walk(r'文件路径')返回一个迭代器, 第一次ne ...
- thinkphp 三元运算
模板可以支持三元运算符,例如: {$status?'正常':'错误'} {$info['status']?$info['msg']:$info['error']} 注意:三元运算符中暂时不支持点语法. ...
- webpack官方文档学习
一.webpack是什么? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 二.安装 前提条 ...
- Docker系列(七)：Docker图形化管理和监控
Docker管理工具之官方三剑客 Docker Machine是什么鬼 从前 现在 你需要登录主机,按照主机及操作系统特有的安装以及配置步骤安装Docker,使其 能运行Docker容器. Docke ...
- dockerfile自动创建docker镜像
特点:类似于ansible 剧本,大小几kb 而,手动做的镜像,要几百M,甚至上G ,传输不方便 dockerfile 支持自定义容器的初始命令 dockerfile只要组成部分: 基础镜像信息 FR ...
- 初识OpenCV-Python - 006: 图像的几何变换
本次小节学习了图像的变换,主要应用到如下方法: cv2.resize(), cv2.warpAffine(), cv2.getRotationMatrix2D(), cv2.getAffineTran ...
- nput="file" 浏览时只显示指定excel文件，筛选特定文件类型
<p>显示 .xls, .xlsx, .csv 文件...</p><input type="file" accept=".csv, appl ...
- go string和[ ]byte
https://www.cnblogs.com/zhangboyu/p/7623712.html
- h5对接jssdk支付分并调用开启支付分页面
1.ws.config签名 调用ticket等获取ws.config的签名,下面会调用方法再调用方法时需要再次按照调用方法的签名 wx.config({ debug: true, // 开启调试模 ...