利用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主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图: 注意左上角那个图标,有木有很好玩,哈哈. ...
随机推荐
- [JZOJ3691] 【CF414E】Mashmokh's Designed tree
题目 题目大意 给你一棵树,接下来对这棵树进行三种操作: 1.询问两点之间的距离. 2.让某个点变为它原来的第\(h\)个祖先的最后一个儿子. 3.求\(dfs\)序中最后一个深度为\(k\)的点. ...
- [JZOJ3234] 阴阳
题目 题目大意 有一棵树,每条边有\(0\)或\(1\)两种颜色. 求满足存在\((u,v)\)路径上的点\(x\)使得\((u,x)\)和\((x,v)\)路径上的两种颜色出现次数相同的点对\((u ...
- 校园商铺-2项目设计和框架搭建-9验证Service
1. 新建接口 main: com.csj2018.o2o.service/AreaService.java package com.csj2018.o2o.service; import java. ...
- 数据库实例性能调优利器：Performance Insights
Performance Insights是什么 阿里云RDS Performance Insights是RDS CloudDBA产品一项专注于用户数据库实例性能调优.负载监控和关联分析的利器,以简单直 ...
- duilib库分析1.消息流程分析
看下CWindowWnd类与CPaintManagerUI类是咋进行消息分发的吧. 1. 先看下CPaintManagerUI类的MessageLoop函数: void CPaintManagerUI ...
- VS2010-MFC（常用控件：列表框控件ListBox）
转自:http://www.jizhuomi.com/software/186.html 列表框控件简介 列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选中的项会高亮显示.列表框可分为单 ...
- AYITOJ-括号序列-栈的入门
题目描述 给定一个由括号组成的字符串 问其是否为一个合法的括号序列 合法的括号序列的定义如下 1. 空字符串是合法的括号序列 2. 若字符串A是合法的括号序列, 那么{A},[A],(A)也是合法的括 ...
- 面试系列18 rediscluster 原理
一.节点间的内部通信机制 1.基础通信原理 (1)redis cluster节点间采取gossip协议进行通信 跟集中式不同,不是将集群元数据(节点信息,故障,等等)集中存储在某个节点上,而是互相之间 ...
- html自定义分页
public class MyPager { /// <summary> /// 每一页数据的条数 /// </summary> public int PageSize { g ...
- MVC中DropDownListFor的使用注意事项
1.在MVC的View页面中使用DropDownListFor时当DropDownListFor是列表是通过后台ViewBag传过来时,当ViewBag中的Key与DropDownListFor一致时 ...