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实现移动页面图片全屏滑动的更多相关文章
	

    
								
  1. js控制页面的全屏展示和退出全屏显示
		
    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
    
		
    2. 
						
  2. 微信小程序点击图片全屏
		
    作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
    
		
    3. 
						
  3. 弹出iframe内嵌页面元素到父页面并全屏化
		
    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题)  ...
    
		
    4. 
						
  4. javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)
		
    javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦) 缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列 ...
    
		
    5. 
						
  5. 移动端全屏滑动的小插件，简单，轻便，好用，只有3k swiper,myswiper,page,stage
		
    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
    
		
    6. 
						
  6. iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果
		
    8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...
    
		
    7. 
						
  7. iOS - 全屏滑动
		
    取经地址 1.使用关联 关联是指把两个对象相互关联起来,使得其中的一个对象作为另一个对象的一部分. 使用关联,是基于关键字的,因此,我们可以为任意对象增加任意多的关联,但是关键字是唯一的.关联可以保证 ...
    
		
    8. 
						
  8. UINavigationController实现全屏滑动返回功能
		
    说明: UINavigationController默认在push出的控制器中都有边沿滑动返回功能,但是只能从屏幕左边滑才能返回,若从屏幕中间画并没有效果.下面实现全屏滑动功能. 探究: 系统默认能够 ...
    
		
    9. 
						
  9. Android 高大上的侧滑菜单DrawerLayout，解决了不能全屏滑动的问题
		
    DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图:   注意左上角那个图标,有木有很好玩,哈哈. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [JZOJ3348] 【NOI2013模拟】秘密任务
			
    题目 题目大意 给你一个无向图,你要割掉一些边使得\(1\)到\(n\)的所有最短路径被阻截. 割掉一个边\((u,v)\)的代价为\(a_u\)或\(a_v\)(记为两种不同的方案). 问最小代价及 ...
    
			
    2. 
						
  2. Windows 开启win32 控制台
			
    {     AllocConsole();     FILE *Journal = NULL;     freopen_s(&Journal, "CONOUT$", &qu ...
    
			
    3. 
						
  3. 关于merge的测试
			
      测试多线程情况下merge是否能产生重复数据.    merge并发测试: 测试代码: 100线程,,插入连续的1000个数字
    
			
    4. 
						
  4. selenium python bindings 元素定位
			
    1. 辅助 Firepath Firefox是所有做前端的必不可少的浏览器因为firebug的页面元素显示很清晰.用selenium 去定位元素的时候Firefox还有一个非常友好的工具就是firep ...
    
			
    5. 
						
  5. css选择器之间的  空格和逗号
			
    当两个选择器之间有空格的情况下,代表的是子类选择器 .a .b{} 代表的是a类的b子类 而两个选择器之间没有空格的情况下,代表的是同时拥有两个类名的标签 <div class="a  ...
    
			
    6. 
						
  6. iOS开发之SceneKit框架--实战地月系统围绕太阳旋转
			
    1.创建地月太阳系统scn文件 注意:moon在earth结构下,earth和moon在sun结构下. 2.获取scn中模型的对应节点和自转(太阳为例) 获取节点: name是对应的Identity字 ...
    
			
    7. 
						
  7. java web项目部署到云服务器
			
    第一步把java web项目打包 成war包 第二步:在Build选里选择build Artfacts->water:war->Build war包建立完毕. 第三步:在官网下载winsc ...
    
			
    8. 
						
  8. springboot-配置多数据源（AOP实现）（HikariCP + MybatisPlus + mysql + SqlServer）
			
    场景: springboot项目,默认使用HikariCP连接池 + MybatisPlus持久层框架 + mysql数据库等一套流程,现需求需去第三方sqlserver数据库拉取数据,直连数据库,不 ...
    
			
    9. 
						
  9. mysql的建表约束
			
    主键约束(primary key) 主键约束能够唯一确定一张表中的记录,也就是可以通过某个字段添加约束,就可以是的该字段不重复,且不为空 create table user (id int prima ...
    
			
    10. 
						
  10. tomcat下面部署多个项目
			
    最近需要部署多个项目,我目前所知道的两种方法,第一种是一个tomcat部署一个项目,需要布置多个tomcat就可以部署多个项目.第二种就是一个tomcat下面部署多个项目. 首先我们先来说说两种的优劣 ...
    
			
    11.