|
模仿frameGroup,可用于查看大图,简单的frameGroup
[复制链接]
js:- (function(f) {
- var b = "";
- var d = "";
- function c(g) {
- var h = document.body.scrollLeft;
- b = setInterval(function() {
- if (h == document.body.scrollLeft) {
- clearInterval(b);
- e()
- } else {
- h = document.body.scrollLeft
- }
- }, 20)
- }
- function e() {
- var k = document.body.scrollLeft;
- var g = (Math.round(document.body.scrollLeft / a)) * a;
- var h = g - k;
- var j = 1;
- if (h < 0) {
- j = -1
- }
- d = setInterval(function() {
- if (Math.abs(document.body.scrollLeft - g) < 10) {
- clearInterval(d);
- document.body.scrollTop = document.body.scrollHeight;
- document.body.scrollLeft = g
- } else {
- document.body.scrollLeft = document.body.scrollLeft + 10 * j
- }
- }, 10)
- }
- var a = document.body.clientWidth;
- f.init = function() {
- var g = $api.domAll(".page");
- for (i = 0; i < g.length; i++) {
- g[i].style.left = a * i + "px";
- g[i].style.top = "0px"
- }
- var h = $api.dom(".pageContent");
- h.ontouchend = c;
- }
- })(window);
复制代码 html:- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
- <meta name="format-detection" content="telephone=no" />
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
- <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
- <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
- <script src="../../script/api.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- .pageContent{
- width: 100%;
- position: relative;
- }
- .page{
- position: absolute;
- height:800px;
- width: 100%;
- top:0px;
- }
- </style>
- </head>
- <body>
- <div class="pageContent">
- <div class="page" style="background-color: #6AB494;">1</div>
- <div class="page" style="background-color: #777777;">2</div>
- <div class="page" style="background-color: #EE4123;">3</div>
- </div>
- </body>
- <script src="../../script/mysampleswipe.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- </script>
- </html>
复制代码
|
|