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

原创 2018年02月12日 10:57:16

基于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>

文档地址

版权声明:本文为博主原创文章,未经博主允许可以随便转载。 https://blog.csdn.net/a419419/article/details/79315344

移动端Slider效果插件(for Zepto)

昨天,有位叫学智的哥们(和我大学一个同学(绰号-法师)同名不同姓)要做一个手机上的页面切换效果,虽然自己的期望和实际的效果相差并不是很大,但法师追求完美,眼睛里揉不得沙子的秉性,把他逼得急躁,惶恐,甚...
  • lufei1993425
  • lufei1993425
  • 2015-05-25 10:20:53
  • 3885

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

  • 2017年01月23日 09:21
  • 17KB
  • 下载

Zepto实现滑动核销效果

主要事件:touchmove touchstart touchend 0、定义常量值(滑动 横向记录差 distance,手指离开屏幕位置与开始滑动位置;刮开角度 :angle 当距离差到达时的翻转角...
  • z69183787
  • z69183787
  • 2017-04-01 17:13:45
  • 621

zepto实现移动端轮播图

zepto是一个移动端的框架,语法几乎跟jQuery一样,但是因为移动端模块化开发的思想所以zepto较多的应用于移动端,节省移动端的流量,虽然现在4G时代的到来,流量的价格很便宜,但是zepto对于...
  • u013035477
  • u013035477
  • 2016-11-02 13:17:40
  • 5025

手机端滑动插件swiper3.x的使用示例

1  兼容性ie9勉强兼容 2  http://www.swiper.com.cn/api/index.html test * {margin: 0...
  • u011500781
  • u011500781
  • 2016-03-27 13:45:48
  • 4162

手机移动端左右滚动特效

jQuery手机移动端图片触屏滑动焦点图网页特效 $(document).ready(function(){ $(".main_visual").hover(funct...
  • xiaoshan0711
  • xiaoshan0711
  • 2015-08-21 11:16:02
  • 1002

用原生JavaScript写出类似jQuery中slideUp和slideDown效果

本文主要介绍如何用原生JavaScript代码实现类似jQuery中的slideUp和slideDown效果。首先用一个不完善的例子来引入JavaScript中定时器的”问题“,然后给出相应的解决方案...
  • u013578101
  • u013578101
  • 2015-04-29 10:18:45
  • 5241

zepto和jquery的区别,zepto的不同使用8条小结

1. Zepto 对象 不能自定义事件   例如执行: $({}).bind('cust', function(){});  结果:  TypeError: Object has no method ...
  • kongjiea
  • kongjiea
  • 2015-01-08 11:54:18
  • 85876

基于zepto的H5/移动端tab切换触摸拖动加载更多数据

 以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很感谢西门的后...
  • oaa608868
  • oaa608868
  • 2016-12-07 15:01:44
  • 2681

说说zepto.js的事件

1、创建并初始化一个指定的DOM事件。如果给定properties对象,使用它来扩展出新的事件对象。默认情况下,事件被设置为冒泡方式;这个可以通过设置bubbles为false来关闭。 $.Even...
  • xyphf
  • xyphf
  • 2016-07-14 13:42:17
  • 9145
收藏助手
不良信息举报
您举报文章:基于zepto的motion库-移动端页面无缝循环滑动效果
举报原因:
原因补充:

(最多只允许输入30个字)