适用ios和安卓微信公众号h5答题上下滑屏插件

适用ios和安卓微信公众号h5答题上下滑屏插件

首先引入zepto.js文件

具体js滑动事件如下：

document.body.addEventListener("touchmove", function(a) { a.preventDefault() });

(function(g, h, j, d) {

var k = j.createElement("div").style;

var e = (function() {

var p = ["t", "webkitT", "MozT", "msT", "OT"],

n, o = 0,

m = p.length;

for (; o < m; o++) { n = p[o] + "ransform";

if (n in k) {

return p[o].substr(0, p[o].length - 1) } }

return false })();

function i(m) {

if (e === false) {

return false }

if (e === "") {

return m }

return e + m.charAt(0).toUpperCase() + m.substr(1) }

var b = i("transform");

var c = i("transitionDuration");

var l = function(m) {

return j.querySelectorAll(m) };

var f = false;

var a = function(m) { m = m || {};

this.btn = m.btn ? l(m.btn) : l(".down");

this.page = m.box ? l(m.box) : l(".pageBox");

this.time = m.time || 400;

this.box = j.body;

this.pageLength = this.page.length;

this.index = 0;

this.pageH = 0 };

a.prototype = { constructor: a, init: function() { this.initPage();

this.event() }, initPage: function() {

var m = h.innerHeight;

this.pageH = m;

j.getElementById("pullPage").style.height = m + "px" }, event: function() {

var o = this;

if (this.btn) {

for (var n = 0; n < this.btn.length; n++) {

(function(q) {

var p = o.btn[q];

p.addEventListener("click", function() {

if (this.index >= this.pageLength - 1) {

return false }

o.index++;

o.pageMove() }) })(n) } }

for (var m = 0; m < this.pageLength; m++) {

(function(p) { o.touchEvent(p) })(this.page[m]) } }, touchEvent: function(o) {

var q = o,

r = this,

m = true,

n = 0,

p = endTime = 0;

o.addEventListener("touchstart", function(s) { p = new Date();

r.starY = s.changedTouches[0].clientY;

r.starX = s.changedTouches[0].clientX;

m = false });

o.addEventListener("touchmove", function(v) {

if (f) {

return false }

var t = v.changedTouches[0].pageY;

var u = v.changedTouches[0].clientX;

if (Math.abs(u - r.starX) > Math.abs(t - r.starY)) {

return false }

var s = t - r.starY;

if (s < 0 && r.index >= r.pageLength - 1) {

return false }

if (s > 0 && r.index <= 0) {

return false }

if (s < 0) {

if (r.index >= r.pageLength - 1) {

return false }

// m = true;

// n = r.index + 1;

// r.page[n].style[b] = "translateY(" + (r.pageH + s) + "px)"

} else {

if (r.index <= 0) {

return false }

m = true;

n = r.index - 1;

r.page[n].style[b] = "translateY(" + (-r.pageH + s) + "px)" }

});

o.addEventListener("touchend", function(x) {

if (!m || f) {

return false }

endTime = new Date();

var t;

var w = endTime - p;

var u = x.changedTouches[0].pageY;

var v = x.changedTouches[0].clientX;

var s = u - r.starY;

if (Math.abs(s) > 100 || w <= 150) {

if (s < 0) { r.index++ } else { r.index-- }

r.pageMove();

return false }

if (s < 0) { t = r.page[r.index + 1];

t.style[c] = r.time + "ms";

t.style[b] = "translateY(" + r.pageH + "px)" } else { t = r.page[r.index - 1];

t.style[c] = r.time + "ms";

t.style[b] = "translateY(-" + r.pageH + "px)" }

setTimeout(function() { t.style[c] = "0ms" }, r.time) }) }, pageMove: function() {

var m = this;

f = true;

m.page[m.index].style[c] = m.time + "ms";

m.page[m.index].style[b] = "translateY(0)";

setTimeout(function() {

for (var n = 0; n < m.pageLength; n++) {

var o = m.page[n];

if (n == m.index) { o.classList.add("active");

continue }

o.classList.remove("active");

o.style[c] = "0ms";

if (n < m.index) { o.style[b] = "translateY(-" + m.pageH + "px)" }

if (n > m.index) { o.style[b] = "translateY(" + m.pageH + "px)" } }

f = false }, m.time) }, goPage: function(m) {

if (m < 1 || m > this.pageLength) {

throw "第" + m + "不存在";

return false }

this.index = m - 1;

this.pageMove() } };

h.pullPage = a })(Zepto, window, document);

(function() {

var a = window.innerHeight;

document.body.style.height = a + "px" })();

$(function() { $(".diog .close").on("click", function() { $(".diog").hide() });

$("#page0>p").on("click", function() { $(".hdgz").show() }) });

//注册

//html

1/12

您的性别？

单选

男

女

跳转到第五页下一页

2下一页

33跳转到第一页

4下一页跳转到第一页

5跳转到第一页

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize =clientWidth /7.5 + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

var pull=new pullPage();

pull.init();