Zepto手机触屏翻屏

转载 于 2021-01-08 15:04:12 发布 · 103 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.cnblogs.com/mbyund/p/5485371.html

demo:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<title>Zepto手机触屏翻屏</title>

<script type="text/javascript" src="http://s0.ifengimg.com/static/js/zepto.min.js"></script>

<style>

*{padding:0; margin:0;}

.screen-1{background:#F00;}

.screen-2{background:#0F0;}

.screen-3{background:#00F;}

.screen-4{background:#FF0;}

.screen-5{background:#0FF;}

.screen-6{background:#F0F;}

</style>

</head>

 

<body>

<div class="screen screen-1">1</div>

<div class="screen screen-2">2</div>

<div class="screen screen-3">3</div>

<div class="screen screen-4">4</div>

<div class="screen screen-5">5</div>

<div class="screen screen-6">6</div>

<script type="text/javascript" src="pageSlider.js"></script>

<script>

Zepto(function($){

    var b = $(".screen").pageSlider();

    $(".screen").eq(1).on("enter",function(){//进场事件

        console.log(11111111);

    });

    $(".screen").eq(1).on("leave",function(){//出场事件

        console.log(22222222);

    });

})

</script>

</body>

</html>

JS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

$.fn.pageSlider = function(){

    var _this = this;

    var _len = _this.length;

    var currentIndex = 0;

    _this.each(function(idx,ele){

        var zIndex = (_len - idx) * 10;

        $(ele).css({

            width: "100%",

            height: "100%",

            position: "absolute",

            zIndex: zIndex,

            "transition-duration":"700ms",

            "-webkit-transition-duration":"700ms",

            "-webkit-animation-timing-function":"ease-in-out"

        });

    });

    _this.on("swipeUp", function(){//next

        if(currentIndex < _len - 1){

            _this.eq(currentIndex).css({

                "-webkit-transform":"translateY(-100%)",

                "transform":"translateY(-100%)"

            });

            _this.eq(currentIndex).trigger("leave");

            _this.eq(currentIndex+1).css({

                "-webkit-transform":"translateY(0)",

                "transform":"translateY(0)"

            });

            _this.eq(currentIndex+1).trigger("enter");

            currentIndex ++;

        }

         

    });

    _this.on("swipeDown", function(){//prev

        if(currentIndex > 0){

            _this.eq(currentIndex-1).css({

                "-webkit-transform":"translateY(0)",

                "transform":"translateY(0)"

            });

            _this.eq(currentIndex-1).trigger("enter");

            _this.eq(currentIndex).trigger("leave");

            currentIndex --;

        }

    });

}

精选资源
HTML5手机上下滑动翻页特效特效代码
03-20
开发者可能使用了一些现有的库或框架，如jQuery或者更轻量级的库如zepto.js，来简化DOM操作和事件处理。同时，为了提高用户体验，可能会有防抖或节流的策略来避免频繁的触摸事件触发，防止页面过度渲染。 最后，...
手机端zepto.js点击滑动显示隐藏
wtw945的博客
07-21 1835
var btn1 = $('.wtw-btn1') //弹框一 function box1(value1,value2){ let str = '&lt;div class="wtw-pop wtw-pop1"&gt;'+ '&lt;div class="wtw-pop-bg"&gt;&lt;/div&gt;'+ '&lt;div class="wtw-pop...
pc端点击事件在移动端失效（zepto）
dlh918的博客
01-31 5996
jQuery 和 Zepto 是不能一起引入的，否则会有冲突。 只引入Zepto 的前提下，jQuery的部分方法是不能用的（toggle、slideUp、slideDown...） 所以实际上触发了事件，但是看不到效果，误以为没有触发.... var 移动端 = 手机真机环境调试（不是浏览器模仿的移动端）； 什么onclick、$(document).on();、$(docume
jQuery 与 Zepto 的区别
majunjie2017的博客
11-11 2992
jQuery 与 Zepto 的区别 jquery定义：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。 jQuery设计的宗旨是“write Less，Do More”。 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性：
手机脚本框架 Zepto 使用中笔记
weixin_33929309的博客
11-08 131
前段时间完成了公司一个产品的 HTML5 触屏版，开发中使用了Zepto这个著名的 DOM 操作库。 为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。 而 Zepto 只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ...
Zepto 使用中的一些注意点
行成于思毁于随
05-12 1768
前段时间完成了公司一个产品的 HTML5 触屏版，开发中使用了 Zepto 这个著名的 DOM 操作库。 为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。 而 Zepto 只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ，所以学习成本也很低。 但是在
Swiper5手机触摸滑动插件快速使用
仗剑天涯，从摘要开始
12-22 1215
Swiper插件官网 https://www.swiper.com.cn/ 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。 <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="di...
移动开发js库Zepto.js使用中的一些注意点
weixin_30466039的博客
12-24 69
来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考。 前段时间完成了公司一个产品的 HTML5 触屏版，开发中使用了Zepto这个著名的 DOM 操作库。 为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。 而 Zepto ...
手机端滑屏翻页，页面元素动画
weixin_33726943的博客
11-15 495
引入touch.js文件 // Zepto.js // (c) 2010-2014 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ var touch = {}, ...
H5项目常见问题及注意事项，视频全屏，定位，屏幕旋转和触摸，偏页面重构向 来源joacycode的github...
06-22 392
Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width ...
手机触屏滑动图片切换特效技术解析
### 知识点：手机触屏滑动图片切换特效 #### 1. 触屏技术与滑动操作基础 触屏技术允许用户通过手指接触屏幕与手机进行交互，其响应灵敏度和准确性是现代智能设备用户体验的重要组成部分。滑动操作是触屏操作中最为...
yscroll：轻量级移动端区域滚动与翻屏动画解决方案
从标签信息来看，“yscroll, 区域滚动, H5翻屏动画, 轻量级, 手机事件, 横向滚动, 竖向滚动, 滚动动量, 反弹效果, 吸附翻屏”全面概括了该库的核心能力与应用场景。特别是“H5翻屏动画”这一标签，突显了其在营销类...
超炫HTML5触屏购物网站模板下载
JavaScript或轻量级框架（如Zepto.js）则负责监听touchstart、touchmove、touchend事件，确保用户在手机屏幕上的每一次点击、滑动都能精准响应。此外，避免使用hover伪类，转而依赖tap事件，也是触屏适配的重要实践...
medici.zip
12-19
medici.zip
STM32电机库无感代码注释无传感器版本龙贝格观测三电阻双AD采样前馈控制弱磁控制斜坡启动
12-19
STM32电机库无感代码注释无传感器版本龙贝格观测三电阻双AD采样前馈控制弱磁控制斜坡启动内容概要：本文档为一份关于STM32电机控制的无传感器版本代码注释资源，聚焦于龙贝格观测器在永磁同步电机（PMSM）无感控制中的应用。内容涵盖三电阻双通道AD采样技术、前馈控制、弱磁控制及斜坡启动等关键控制策略的实现方法，旨在通过详细的代码解析帮助开发者深入理解基于STM32平台的高性能电机控制算法设计与工程实现。文档适用于从事电机控制开发的技术人员，重点解析了无位置传感器控制下的转子初始定位、速度估算与系统稳定性优化等问题。; 适合人群：具备一定嵌入式开发基础，熟悉STM32平台及电机控制原理的工程师或研究人员，尤其适合从事无感FOC开发的中高级技术人员。; 使用场景及目标：①掌握龙贝格观测器在PMSM无感控制中的建模与实现；②理解三电阻采样与双AD同步采集的硬件匹配与软件处理机制；③实现前馈补偿提升动态响应、弱磁扩速控制策略以及平稳斜坡启动过程；④为实际项目中调试和优化无感FOC系统提供代码参考和技术支持； 阅读建议：建议结合STM32电机控制硬件平台进行代码对照阅读与实验验证，重点关注观测器设计、电流采样校准、PI参数整定及各控制模块之间的协同逻辑，建议配合示波器进行信号观测以加深对控制时序与性能表现的理解。
自定义button样式，round-corners按钮
12-19
下载前必看：https://pan.quark.cn/s/cbeecb3ae425 GSCaptchaButton 功能 倒计时 自动禁用/启用按钮 自定义文字 使用方法 无论是自定义控件还是 xib，将继承自 UIButton 改为 GSCaptchaButton 开始倒计时 手动结束 判断是否处于倒计时状态 要求 Master iOS 8.0+ Xcode 10 (Swift 4.2 - 5.0) 安装 CocoaPods: 在 中增加: 手动 将 文件拖入你的项目
电气设备故障检测.zip
最新发布
12-19
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
FCN网络实现（PyTorch）
12-19
下载方式：https://pan.quark.cn/s/abd8d67e2b79 pytorch FCN easiest demo 不断更新中~ 这个repo是在读论文Fully Convolutional Networks for Semantic Segmentation时的一个pytorch简单复现，数据集很小，是一些随机背景上的一些包的图片（所有数据集大小一共不到80M），如下图 数据集示意图 关于此数据集详细信息，见数据集 根据论文实现了FCN32s、FCN16s、FCN8s和FCNs 部分代码参考了这个repo 使用visdom可视化，运行了20个epoch后的可视化如下图： 可视化1 可视化2 如何运行 1 我的运行环境 Windows 10 CUDA 9.x （可选） Anaconda 3 （numpy、os、datetime、matplotlib） pytorch == 0.4.1 or 1.0 torchvision == 0.2.1 visdom == 0.1.8.5 OpenCV-Python == 3.4.1 2 具体操作 打开终端，输入 打开另一终端，输入 若没有问题可以打开浏览器输入来使用可视化 3 训练细节 训练细节 数据集 training data来自这里，ground-truth来自这里。 链接中提供的图片中，部分ground-truth的有误，而且部分有ground-truth的图片没有对应training data的图片，将这些有错误的图片分别剔除，重新编号排序之后剩余533张图片。 之后我随机选取了67张图片旋转180度，一共在training data和ground-truth分别凑够600张图片（0.jpg ~...
VaComm64-v.2.0.0.0-D5-XE12.Full.Source.rar
12-19
VaComm64-v.2.0.0.0-D5-XE12.Full.Source.rar
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值