基于zepto的motion库-移动端页面无缝循环滑动效果

最新推荐文章于 2022-02-11 16:43:35 发布
最新推荐文章于 2022-02-11 16:43:35 发布
阅读量1.3k 收藏 1
点赞数 2
分类专栏： js算法 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a419419/article/details/79315344
版权

基于zepto的motion库-移动端页面无缝循环滑动效果
案例地址

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="author" content="Tencent-TGideas">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>单屏滚动-循环</title>
<script src="http://ossweb-img.qq.com/images/js/zepto/zepto.min.js"></script>
<script src="http://ossweb-img.qq.com/images/js/motion/slide.v2.0.min.js"></script>
<style>
/* reset */
*{margin:0; padding:0;border:0;}
img{border:0;vertical-align:middle;}
ul,ol,dl{list-style:none;}
html, body{height: 100%;}
body {font-size:12px; font-family:arial, "Microsoft YaHei", simsun; line-height:20px;}
</style>
</head>

<body>

    <div class="slide">                  
        <ul class="content">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
         </ul>
    </div>

    <style>
        .slide {position:relative; width:100%; height:100%;overflow: hidden;}
        .slide .content{width: 100%;height: 100%;margin: 0 auto;}
        .slide .content li{width: 100%;height:100%;overflow: hidden;-webkit-background-size: cover;background-size: cover;line-height: 400px;text-align: center;color: #fff;font-size:100px;}
        .slide .content li:nth-child(1){background-image:url(http://ossweb-img.qq.com/images/sy/motion/b1.jpg);}
        .slide .content li:nth-child(2){background-image:url(http://ossweb-img.qq.com/images/sy/motion/b2.jpg);}
        .slide .content li:nth-child(3){background-image:url(http://ossweb-img.qq.com/images/sy/motion/b3.jpg);}
        .slide .content li:nth-child(4){background-image:url(http://ossweb-img.qq.com/images/sy/motion/b4.jpg);}
    </style>

    <script>
        Zepto(function($){
            window.pageSlide = new mo.Slide({
                target: $('.slide li'),
                circle: true
            });
        });
    </script>

</body>
</html>

文档地址

开心大表哥
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web前端----移动端库和bootstrap框架
Python美丽星球--微信(Felixzfb)
11-26 1152
Web前端笔记 第十一部分：js移动端库和bootstrap框架，re正则 1. 移动端js事件 移动端的操作方式和PC端是不同的，移动端主要用手指操作， 所以有特殊的touch事件，touch事件包括如下几个事件： 1、touchstart: //手指放到屏幕上时触发 2、touchmove: //手指在屏幕上滑动式触发 3、touchend: //手指离开屏幕时触发 4、touchcanc...
（九）移动端前端开发-Zepto框架
m0_56517198的博客
02-14 619
Zepto的一些的可选功能专门针对移动浏览器，因为最初的目标是专门为移动网站提供一个精简的jQuery替代方案。//需求：点击div元素，给div元素添加animate动画（需要包含transform属性里面的方法）。使用jQuery时load事件的处理函数不会执行，使用Zepto时load事件的处理函数会执行。//tap事件类似PC端上的click事件，它表示手指触摸某个元素会被出发。//选中页面中所有id为foo元素,将其背景设为粉色。//选中页面中所有的div元素,将其背景设为红色。
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
weixin_33819479的博客
09-02 252
该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。 公司的移动端项目是基于zepto的，有一个页面要求文字能够无缝地不停向上滚动，但查了网上的资料，大多都是基于jquery的，虽然稍作修改就可以用于移动端，但不能实现触摸上下翻滚。所以就去了zepto的官网查看其API，却发现如果要使用zepto的swipe(...
zepto: 专门给移动端使用的javascript库
weixin_60488295的博客
11-25 945
深拷贝合集 JSON.parse(JSON.stringify(数据)) var res = JSON.parse(JSON.stringify(obj)); console.log(res); console.log(res == obj); // false extend(true, ...data); var res1 = $.extend(true, {}, obj); console.log(res1); console.log(res1 == obj); // fal
基于zepto.js的移动端H5单页面跟随手指滑动切换控件pageSlider
摩羯座
02-14 1万+
html5 slide
zepto（适用于移动端开发)
lihui61357457的博客
09-28 1008
1. Zepto? Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库， 它与jQuery有着类似的api, 如果你会用jQuery，那么你也会用Zepto 2.既然和jQuery差不多, 为什么还需要Zepto? 2.1jQuery更多是在PC端被应用，Zepto更多是在移动端被应用； 也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大； 也正是因为Z...
11-移动端开发教程-zepto.js入门教程
derfyfxh588690的博客
03-28 423
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。 1. Why Zepto.js？ API类似jQuery，熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库，代码体积小，尤其适合移动端开发。 Zepto增加了针对移动...
使用Zepto.js实现移动端的轮播图效果
沐小侠
02-11 707
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。 Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。 API类似jQuery，熟悉jQuery可以无缝迁移到Zepto.js。 Zepto仅针对高版本现代浏览器设计了最小核心的通用库，
移动端上下拖动调整顺序效果_基于swiper的手机移动端上下滑动效果
weixin_39746241的博客
12-20 495
2015-04-21 06:40:52我前几篇文章中我介绍过一种手机移动端上下滑动的效果，那个效果是通过zepto来实现的，今天我来介绍一种基于swiper实现手机端上下滑动的效果。我先来贴出body内的代码代码中每个section为一个页面，总共为6个页面，也就是说能够滑动6个页面。每个页面都有一个向下的箭头，来提示下滑。再来看一下js代码var init = new Object();init...
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
09-28
主要介绍了基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码 ，非常具有实用价值，需要的朋友可以参考下。
zepto-touchSlider:移动端滑动翻页效果（for Zepto）
05-27
zepto-touchSlider是一款专为Zepto.js库设计的移动端滑动翻页插件，它能够帮助开发者在手机或平板等移动设备上实现流畅的水平或垂直滑动翻页效果。Zepto.js是一款轻量级的JavaScript库，类似于jQuery，但专注于移动...
ajax请求时提醒参数为空的解决办法
热门推荐
开心大表哥
09-29 3万+
1.ajax请求时提醒参数为空的解决办法： 我们要把js对象用stringify转成json,然后再加上：contentType: “application/json” var _phone = $("#phone").val(); var timestamp = (new Date()).valueOf(); var x= {
仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法
开心大表哥
12-08 2万+
我们想要的效果是pc文件和mobile文件统一入口，适配不同的设备。 先看看项目的目录： 在index.html里面配置js控制选择那一个文件夹下的文件就可以了。 我们要利用：Navigator 对象，Navigator 对象包含有关浏览器的信息。 index.html很简单，直接上码吧：<!DOCTYPE html> <html> <head> <meta ch
js防止安卓手机软键盘弹出挤压页面导致变形的方法
开心大表哥
10-12 2万+
h5防止安卓手机软键盘弹出挤压页面导致变形的方法 先看看问题： 1.原来是这样的： 2.在苹果手机里面是正常的： 3.到了安卓就是这样： 4.原因就是在安卓中被软键盘顶上来了，而苹果的软键盘是覆盖的（分层） 5.后来用的解决方法是，把当前页面的body固定好，即在当然页面加上这段js：$('body').height($('body')[0].clientHeight);6.
所有网站都通用的自定义弹出框alert
开心大表哥
08-12 2万+
A.所有网站都通用的自定义弹出框.A </body> <script> var Alert = function(data){ //没有数据则返回 if(!data){ return; } //设置内容 th
js获取当前日期，并且转化为时间格式“yyyy-MM-dd HH:MM:SS”
开心大表哥
08-29 1万+
js获取当前日期，并且转化为时间格式“yyyy-MM-dd HH:MM:SS”function getNowFormatDate() { var date = new Date(); var seperator1 = "/"; var seperator2 = ":"; var month = date.getMonth() + 1; var strDate
js爬虫拿到的字符串数据转化成数组再转化成json对象
开心大表哥
11-01 1万+
js爬虫拿到的字符串数据转化成数组再转化成json对象 当我们通过js获取一些jsonp返回的数据时，这些数据的结构会比较特殊，所以需要通过处理才能获取到数据中想要的内容。 假设我们现在获取到了这样一个字符串数据：backdata([{“id”:1,”name”:”小明”},{“id”:1,”name”:”小明”},{“id”:1,”name”:”小明”}])。 接下来就是获取字符串里面的特定
js apicloud 移动端 页面缩小方法
最新发布
09-02
在js apicloud移动端中，可以使用以下方法来实现页面缩小： 1. 使用CSS缩放：可以通过设置页面的缩放比例来实现页面缩小。可以通过增加一个CSS样式表，并将缩放比例设置为小于1的值，例如0.8或0.5。在页面加载时，将该样式表应用到页面上即可实现缩小效果。 2. 使用viewport标签：在html的head标签中添加一个viewport标签，通过设置initial-scale属性来控制页面的初始缩放比例。例如，可以设置initial-scale=0.8来将页面缩小为原来的80%。 3. 使用JavaScript缩放：可以使用JavaScript来动态地改变页面的缩放比例。可以通过获取页面元素的宽度和高度，并将其乘以一个小于1的比例来实现缩小效果。然后将新的宽度和高度应用到页面元素上即可。 4. 使用插件或库：对于js apicloud移动端开发，还可以使用一些插件或库来实现页面缩小。例如，可以使用Zepto或iScroll等库来实现页面的缩放和滚动效果。 需要注意的是，页面缩小可能会导致页面内容变得模糊不清，因此需要根据实际情况来调整缩放比例，以保证页面显示效果的清晰度。此外，需要考虑不同设备的屏幕尺寸和分辨率，以便在不同设备上获得统一的缩放效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值