sui mobile图片浏览

官方地址:http://m.sui.taobao.org/demos/photo-browser/

<!DOCTYPE html>
<!-- saved from url=(0044)http://m.sui.taobao.org/demos/photo-browser/ -->
<html class="pixel-ratio-1"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=2.0">
    <link rel="shortcut icon" href="http://m.sui.taobao.org/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <!-- css所需样式 -->
  
    <link rel="stylesheet" href="http://m.sui.taobao.org/dist/css/sm.css">
    <link rel="stylesheet" href="http://m.sui.taobao.org/dist/css/sm-extend.css">
    <link rel="stylesheet" href="http://m.sui.taobao.org/assets/css/demos.css">

    <link rel="apple-touch-icon-precomposed" href="http://m.sui.taobao.org/assets/img/apple-touch-icon-114x114.png">
  <!--核心插件及sui路由过滤-->   <script src="js/zepto.js"></script> <script src="js/config.js"></script> </head> <body> <div class="page-group"> <div id="page-photo-browser" class="page page-current"> <header class="bar bar-nav"> <a class="button button-link button-nav pull-left back" href="http://m.sui.taobao.org/demos"> <span class="icon icon-left"></span> 返回 </a> <h1 class="title">图片浏览器</h1> </header> <div class="content native-scroll"> <div class="content-block row"> <div class="col-50"><a class="button pb-popup">默认模式</a></div> <div class="col-50"><a class="button pb-popup">Popup</a></div> </div> <div class="content-block"><a class="button pb-standalone-captions">带文字描述</a></div> </div> </div> </div> <script>
    //外部定义图片地址的数组 var aaa=[ '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg', '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg', '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg', '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg', '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg', '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg', ]; </script> <script src="js/sm.js"></script> <script src="js/sm-extend.js"></script>
  <!--需把上页定义aaa数组传到demos.js内--> <script src="js/demos.js"></script> </body></html>

  另一种手机图征浏览插件:http://dimsemenov.com/plugins/magnific-popup/

posted @ 2017-04-08 22:36  xszjk  阅读(321)  评论(0)    收藏  举报