利用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主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图: 注意左上角那个图标,有木有很好玩,哈哈. ...
随机推荐
- pipenv的使用
首先,确保pip install pipenv已经安装 1.新建一个文件夹,并在地址栏输入cmd,回车. 2.输入pipenv install,等待虚拟环境搭建完毕. 3.输入pipenv shell ...
- cocos2D-X LUA 常用功能封装和工作经验的一些解决方案
--[[ Packaging_KernelEngine.h 文件说明:所有对象在建立时位置是优先的,传入位置参数必须cc.p(X,Y) CurObj:表示要传入当前的对象 将3.10 lua api ...
- PL/SQL跨库查询数据
步骤一:找到Database links (新建) 步骤二:正确填写完对应信息 (应用) : 步骤三:执行PL/SQL语句(完成) select * from tablename@MYDATA 注释 ...
- C#，判断数字集合是否是连续的
/// <summary> /// 判断数字集合是否是连续的 /// </summary> /// <returns></returns> public ...
- HDU-1501-Zipper-字符串的dfs
Given three strings, you are to determine whether the third string can be formed by combining the ch ...
- Git 查看、删除、重命名远程分支
原文地址:http://blog.csdn.net/sunnyyoona/article/details/52065544 1. 查看远程分支 分支加上-a参数可以查看远程分支,远程分支会用红色表示出 ...
- 第四周课堂笔记4th
编码 Ascii美国 一个字节表示一个字符,必能表示汉子 大写字母65-90 小写字母97-122 265个位置 8位表示一个字节, 8bit=1byte GBK 中国 只包含本国文字 ...
- <Python基础>字符串的基本操作
s = 'abCDeFg aBcDea' print(s.find('b')) #通过元素查找索引,找不到返回-1 print(s.index('b')) #通过元素查找索引,找不到报错(会报错,基本 ...
- [AHOI2014/JSOI2014]骑士游戏
题目 思博贪心题写了一个半小时没救了,我也没看出这是一个\(spfa\)来啊 设\(dp_i\)表示彻底干掉第\(i\)只怪物的最小花费,一个非常显然的事情,就是对于\(k_i\)值最小的怪物满足\( ...
- 面试系列16 dubbo负载均衡策略和集群容错策略都有哪些？动态代理策略呢
(1)dubbo负载均衡策略 1)random loadbalance 默认情况下,dubbo是random load balance随机调用实现负载均衡,可以对provider不同实例设置不同的权重 ...