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/
浙公网安备 33010602011771号