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 391
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事件，也是触屏适配的重要实践...
ACM-ICPC/CCPC/XCPC算法竞赛资料kmeans聚类
12-18
ACM-ICPC/CCPC/XCPC算法竞赛资料kmeans聚类
【CAOA三维路径规划】基于matlab鳄鱼伏击算法CAOA多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）（Matlab代码实现）
12-18
【CAOA三维路径规划】基于matlab鳄鱼伏击算法CAOA多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）（Matlab代码实现）内容概要：本文介绍了基于Matlab的鳄鱼伏击算法（CAOA）在多无人机协同集群三维路径规划中的应用，重点解决动态环境下的避障问题。该方法以最低成本为目标函数，综合考虑路径长度、飞行高度、威胁等级和转弯角度等因素，通过优化算法实现无人机集群的安全、高效路径规划。文中提供了完整的Matlab代码实现，便于科研人员复现与改进，适用于复杂环境下的无人机协同任务。; 适合人群：具备一定Matlab编程基础，从事无人机路径规划、智能优化算法或协同控制研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①研究多无人机在复杂三维环境中的协同避障路径规划；②验证和改进鳄鱼伏击算法（CAOA）在实际路径规划中的性能；③实现以最低综合成本为目标的智能路径优化，提升无人机集群的任务执行效率与安全性。; 阅读建议：建议读者结合提供的Matlab代码进行实践操作，深入理解目标函数构建、约束条件处理及算法迭代过程，同时可尝试将算法扩展至更多动态障碍物或更大规模无人机集群场景中进行测试与优化。
基于径向基函数神经网络RBFNN的自适应滑模控制学习（Matlab代码实现）
12-18
基于径向基函数神经网络RBFNN的自适应滑模控制学习（Matlab代码实现）内容概要：本文介绍了基于径向基函数神经网络（RBFNN）的自适应滑模控制方法，并提供了相应的Matlab代码实现。该方法结合了RBF神经网络的非线性逼近能力和滑模控制的强鲁棒性，用于解决复杂系统的控制问题，尤其适用于存在不确定性和外部干扰的动态系统。文中详细阐述了控制算法的设计思路、RBFNN的结构与权重更新机制、滑模面的构建以及自适应律的推导过程，并通过Matlab仿真验证了所提方法的有效性和稳定性。此外，文档还列举了大量相关的科研方向和技术应用，涵盖智能优化算法、机器学习、电力系统、路径规划等多个领域，展示了该技术的广泛应用前景。; 适合人群：具备一定自动控制理论基础和Matlab编程能力的研究生、科研人员及工程技术人员，特别是从事智能控制、非线性系统控制及相关领域的研究人员； 使用场景及目标：①学习和掌握RBF神经网络与滑模控制相结合的自适应控制策略设计方法；②应用于电机控制、机器人轨迹跟踪、电力电子系统等存在模型不确定性或外界扰动的实际控制系统中，提升控制精度与鲁棒性； 阅读建议：建议读者结合提供的Matlab代码进行仿真实践，深入理解算法实现细节，同时可参考文中提及的相关技术方向拓展研究思路，注重理论分析与仿真验证相结合。
STM32F407-RT-Thread-CAN工程代码
12-18
STM32F407芯片，开发环境：RT-Thread Stdio开发环境，使用内部drv_can实现can功能，官方的drv_can.c文件中对于stm32f407的位时序配置错误，已修改位时序，但是800k的CAN速率，由于CAN时钟为42M的原因，无法整除(42/0.8=52.5)，导致800k的速率无法使用.
安卓应用源码Android闹钟源码
12-18
安卓应用源码Android 闹钟源码
转子轴承系统振动分析.zip
最新发布
12-18
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值