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 //是一款开源的移动端脚本框架

  • 相关阅读:
    面试题:能谈谈Date、Datetime、Time、Timestamp、year的区别吗?
    面试题:对NotNull字段插入Null值 有啥现象?
    聊聊什么是慢查、如何监控?如何排查?
    谈谈MySQL的基数统计
    .vimrc
    HISKrrr的板子库
    CSP 模拟35
    晚测1
    CSP 模拟34
    nim板子题异或正确性YY
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10617133.html
Copyright © 2011-2022 走看看