zoukankan      html  css  js  c++  java
  • 移动端常用组件

    1. swipeslider.js    

    jQuery支持移动端轮播图插件swipeslider.js

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/jQuerySwipeslider201708162304/dist/swipeslider.css">
    </head>
    
    <body>
    
      <figure id="full_feature" class="swipslider">
        <ul class="sw-slides">
          <li class="sw-slide">
            <img src="http://www.jq22.com/demo/jQuerySwipeslider201708162304/img/summer_beach.jpg" alt="Summer beach concept">
          </li>
          <li class="sw-slide">
            <img src="http://www.jq22.com/demo/jQuerySwipeslider201708162304/img/lang_yie_ar_kung_fu.jpg" alt="Lang from Yie Ar Kung Fu">
          </li>
          <li class="sw-slide">
            <img src="http://www.jq22.com/demo/jQuerySwipeslider201708162304/img/tiny_vacation.jpg" alt="Tiny Tina">
          </li>
          <li class="sw-slide">
            <img src="http://www.jq22.com/demo/jQuerySwipeslider201708162304/img/borderlands_tiny_tina.jpg" alt="Tiny Tina from Borderlands 2">
          </li>
          <li class="sw-slide">
            <img src="http://www.jq22.com/demo/jQuerySwipeslider201708162304/img/redhead.jpg" alt="Redhead girl">
          </li>
        </ul>
      </figure>
      <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
      <script type="text/javascript" src="http://www.jq22.com/demo/jQuerySwipeslider201708162304/dist/swipeslider.min.js"></script>
      <script type="text/javascript">
        $(window).load(function () {
          $('#full_feature').swipeslider();
        })
      </script>
    
    </body>
    
    </html>
    View Code

     2. swiper   

    swiper / 移动端触摸滑动插件 / 手机轮播插件

    3. Dialog

    4. iscroll.js

    5. Mdate.js

    6. sosh

    其他:

    zepto.js //移动端用的,跟jq用法一样,基本没什么两样,所以只要会用jq就会用zepto
    echo.js //这是一个懒加载的插件,跟jquery.lazyload
    iscroll.js //主要是做滑动效果的
    sortable.js //拖拽排序人效果
    hammer.js //是一款开源的移动端脚本框架

  • 相关阅读:
    操作符详解(思维导图)
    数组(C语言、思维导图)
    函数(C语言、思维导图)
    分支语句与循环语句(知识点思维导图)
    单链表及其基本操作
    顺序表
    时间复杂度与空间复杂度
    javascript基础知识show
    Java中的四舍五入
    JavaScript中数组迭代方法(jquery)
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10617133.html
Copyright © 2011-2022 走看看