apicloud apicloud

注册
查看: 2290|回复: 0

[APP开发技巧] 模仿frameGroup,可用于查看大图,简单的frameGroup

主题:
124
帖子:
694
云币:
2454

[APP开发技巧] 模仿frameGroup,可用于查看大图,简单的frameGroup

2290 0 | 发表于 2015-10-27 14:37:01 |阅读模式 | |
js:
  1. (function(f) {
  2.         var b = "";
  3.         var d = "";

  4.         function c(g) {
  5.                 var h = document.body.scrollLeft;
  6.                 b = setInterval(function() {
  7.                         if (h == document.body.scrollLeft) {
  8.                                 clearInterval(b);
  9.                                 e()
  10.                         } else {
  11.                                 h = document.body.scrollLeft
  12.                         }
  13.                 }, 20)
  14.         }

  15.         function e() {
  16.                 var k = document.body.scrollLeft;
  17.                 var g = (Math.round(document.body.scrollLeft / a)) * a;
  18.                 var h = g - k;
  19.                 var j = 1;
  20.                 if (h < 0) {
  21.                         j = -1
  22.                 }
  23.                 d = setInterval(function() {
  24.                         if (Math.abs(document.body.scrollLeft - g) < 10) {
  25.                                 clearInterval(d);
  26.                                 document.body.scrollTop = document.body.scrollHeight;
  27.                                 document.body.scrollLeft = g
  28.                         } else {
  29.                                 document.body.scrollLeft = document.body.scrollLeft + 10 * j
  30.                         }
  31.                 }, 10)
  32.         }
  33.         var a = document.body.clientWidth;
  34.         f.init = function() {
  35.                 var g = $api.domAll(".page");
  36.                 for (i = 0; i < g.length; i++) {
  37.                         g[i].style.left = a * i + "px";
  38.                         g[i].style.top = "0px"
  39.                 }
  40.                 var h = $api.dom(".pageContent");
  41.                 h.ontouchend = c;
  42.         }
  43. })(window);
复制代码
html:
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.                 <meta charset="UTF-8">
  5.                 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  6.                 <meta name="format-detection" content="telephone=no" />
  7.                 <meta name="apple-mobile-web-app-capable" content="yes">
  8.                 <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.                 <meta  name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
  10.                 <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  11.                 <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
  12.                 <script src="../../script/api.js" type="text/javascript" charset="utf-8"></script>
  13.                 <style type="text/css">
  14.                 .pageContent{
  15.                 width: 100%;
  16.                 position: relative;
  17.                 }
  18.                         .page{
  19.                                 position: absolute;
  20.                                 height:800px;
  21.                                 width: 100%;
  22.                                 top:0px;
  23.                         }
  24.                 </style>
  25.         </head>
  26.         <body>
  27.         <div class="pageContent">
  28.                 <div class="page" style="background-color: #6AB494;">1</div>
  29.                 <div class="page" style="background-color: #777777;">2</div>
  30.                 <div class="page" style="background-color: #EE4123;">3</div>
  31.         </div>
  32.         </body>
  33.         <script src="../../script/mysampleswipe.js" type="text/javascript" charset="utf-8"></script>
  34.         <script type="text/javascript">
  35.         </script>
  36. </html>
复制代码

1

查看全部评分

您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表