เทอร์มินัลมือถือ PC เข้ากันได้กับ IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ Inertia Assist, Sliding Rebound
โหมดซุปเปอร์
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
/*ข้อมูลทดสอบ*//
var insert = '';
สำหรับ (var i = 0; i <80; i ++) {
insert + = '<div style = "ความกว้าง: 100%; text-allign: center;"> การทดสอบเลื่อน' + i + '</div>';
-
document.getElementById ("movearea"). innerhtml = แทรก;
/*ข้อมูลทดสอบ*//
var at = ใหม่ apptouch ({
tcontain: 'explea', // ต้องการ: ID พื้นที่เลื่อน
tmove: 'movearea', // ต้องการ: ย้าย ID พื้นที่
tscroller: 'scroller', // จำเป็น: scrollbar ที่กำหนดเอง
Tscrollerarea: 'Scrollerarea' // ต้องการ: พื้นที่ Scrollbar
}, onmoveend);
// ไปที่การโทรกลับด้านบน/ล่าง
ฟังก์ชั่น onmoveend (m) {
//console.log(M);
-
-
- -
* ชื่อ: AppTouch
* ฟังก์ชั่น: ส่วนประกอบการจำลองแอปพลิเคชันเว็บแอปพลิเคชัน
* พารามิเตอร์: การกำหนดค่าที่เกี่ยวข้อง
-
var apptouch = function (config, callback) {
this.touchContain = config.tContain;
this.touchmove = config.tmove;
this.touchscroller = config.tscroller;
this.touchscrollerarea = config.tscrollerarea;
this.callbackfn = การโทรกลับ;
this.move ();
-
apptouch.prototype = {
ย้าย: ฟังก์ชั่น (e) {
var monitor = document.getElementById (this.touchcontain), // Listenergy Container
target = document.getElementById (this.touchmove), // ย้ายเป้าหมาย
scroller = document.getElementById (this.touchscroller), // scrollbar ที่กำหนดเอง
Scrollerarea = document.getElementById (this.touchscrollerarea), // พื้นที่ Scroller
sheight = monitor.offsetheight /target.offSetheight * Monitor.offSetheight, // ปรับแต่งความยาวของแถบเลื่อน
ST = (target.offSetheight - Monitor.OffSetheight) /(Monitor.OffSetheight - Sheight), // ย้ายบล็อกที่สอดคล้องกับความยาวของหน่วยของลูกกลิ้ง
tslow = 4, // ไปด้านบน/ล่างลบฐานลบ
tmove = 0, // ตัวเลื่อนไปที่ค่าสูงสุด
tmovel = tmove + 140, // ช่วงแบบเลื่อนลงได้รับอนุญาตให้อยู่ด้านบน
bmove = monitor.offsetheight - target.offsetheight, // ค่าสูงสุดของตัวเลื่อน
bmovel = bmove - 140, // ช่วงการเพิ่มขึ้นอย่างแน่นอน
callbackfn = this.callbackfn, // ฟังก์ชั่นการโทรกลับ
flg = false, // ว่าเครื่องหมายเลื่อนหรือไม่
starty // ทำเครื่องหมายตำแหน่งเริ่มต้น
starttop, // ทำเครื่องหมายค่าความสูงที่จุดเริ่มต้นของการเลื่อน
ย้าย = 0;
// ระยะการเคลื่อนไหว
// การลงทะเบียนเหตุการณ์เมาส์
Addevent (Monitor, 'Mousedown', Movestart);
AddEvent (Monitor, 'Mousemove', Movein);
AddEvent (Monitor, 'Mouseup', Moveend);
AddEvent (หน้าต่าง 'Mousemove', Movein);
AddEvent (หน้าต่าง 'Mouseup', Moveend);
// การลงทะเบียนกิจกรรมสัมผัสอุปกรณ์มือถือ
AddEvent (Monitor, 'TouchStart', Movestart);
AddEvent (Monitor, 'TouchMove', Movein);
AddEvent (Monitor, 'TouchEnd', Moveend);
-
*บรรจุภัณฑ์ที่ปรากฏ/โหมดไกลออกไป
-
/*การฟังเหตุการณ์*//
ฟังก์ชั่น addevent (el, type, fn) {
if (el.addeventListener) {
El.addeventListener (ประเภท, fn, false);
} อื่นถ้า (el.attachevent) {
El.attachevent ('on' + type, fn);
} อื่น {
el ['on' + type] = fn;
-
-
// ยกเลิกพฤติกรรมเริ่มต้นของเบราว์เซอร์
ฟังก์ชั่นหยุด (e) {
// opera/chrome/ff
ถ้า (E.PreventDefault)
E.preventDefault ();
//เช่น
E.returnValue = FALSE;
-
// บรรจุภัณฑ์สิ้นสุดลง
-
*ฟังก์ชั่นการทำงาน
-
// พารามิเตอร์การผ่อนคลายเฉื่อย
var lastMoveTime = 0;
var lastMovestart = 0;
var stopinertiamove = false;
/*ทริกเกอร์มือถือ*/
ฟังก์ชั่น movestart (e) {
หยุด (e);
flg = true;
ถ้า (e.touches)
e = e.touches [0];
starty = e.clienty;
startTop = target.style.top || 0;
// เฉื่อยช้า
lastMovestart = starty;
LastMoveTime = วันที่ใหม่ (). getTime ();
stopinertiamove = true;
Scrollerarea.style.visibility = 'มองเห็นได้';
-
/*ระหว่างการเคลื่อนไหว*/
ฟังก์ชั่น movein (e) {
ถ้า (flg) {
หยุด (e);
ถ้า (e.touches)
e = e.touches [0];
ย้าย = e.clienty - starty + parseint (starttop);
ถ้า (ย้าย> tmove) {
(ย้าย - tmove) / tslow + tmove> tmovel? move = tmovel: move = (move - tmove) / tslow + tmove
} อื่นถ้า (ย้าย <bmove)
(ย้าย - bmove) / tslow + bmove <bmovel? Move = bmovel: move = (move - bmove) / tslow + bmove;
target.style.top = ย้าย + 'px';
scroller.style.top = -move / st + 'px';
// เฉื่อยช้า
var nowtime = new Date (). getTime ();
stopinertiamove = true;
if (Nowtime - LastMoveTime> 300) {
LastMoveTime = Nowtime;
LastMovestart = E.Clienty;
-
-
-
/*ย้าย End*//
ฟังก์ชั่น Moveend (e) {
หยุด (e);
ถ้า (e.touches)
e = e.touches [0];
// เฉื่อยช้า
var contentTop = target.style.top.replace ('px', '');
var contenty = (parseint (contentTop) + e.clienty - lastMovestart);
var nowtime = new Date (). getTime ();
var v = (e.clienty - lastMovestart) / (Nowtime - LastMovetime);
// นิ้วกำลังเฉือนในช่วงเวลาสุดท้าย
StopInerTiamove = FALSE;
(ฟังก์ชั่น (v, starttime, contenty) {
var dir = v> 0? -1: 1;
// ทิศทางการเร่งความเร็ว
การตัดสินใจ var = dir * 0.005;
ฟังก์ชั่น INERTIAMOVE () {
if (stopinertiamove)
กลับ;
var nowtime = new Date (). getTime ();
var t = Nowtime - starttime;
var nowv = v + t * การชะลอตัว;
var movey = (v + nowv)/ 2 * t;
// การเปลี่ยนทิศทางความเร็วหมายความว่าความเร็วถึง 0
if (dir * nowv> 0) {
ถ้า (ย้าย> tmove) {
callbackfn ('top');
target.style.top = tmove + 'px';
Scroller.style.top = tmove + 'px';
} อื่นถ้า (ย้าย <bmove) {
callbackfn ('แล้วมัน');
target.style.top = bmove + 'px';
scroller.style.top = -bmove / st + 'px';
-
settimeout (function () {
ถ้า (! stopinertiamove)
Scrollerarea.style.visibility = 'Hidden';
}, 4000);
กลับ;
-
ย้าย = contenty + movey;
ถ้า (ย้าย> tmove) {
t /= 20;
ย้าย = (ย้าย - tmove) / 10 + tmove;
} อื่นถ้า (ย้าย <bmove) {
t /= 20;
ย้าย = (ย้าย - bmove) / 10 + bmove;
-
target.style.top = ย้าย + "px";
scroller.style.top = -move / st + 'px';
Settimeout (Inertiamove, 10);
-
INERTIAMOVE ();
}) (V, Nowtime, Contenty);
ย้าย = 0;
flg = false;
-
// การดำเนินการสิ้นสุดลง
-
*การเริ่มต้นที่เกี่ยวข้อง
-
// การเริ่มต้นความยาวแถบเลื่อน
Scroller.style.height = sheight + 'px';
// การเริ่มต้นสิ้นสุดลง
-
อื่น ๆ : function () {
// ฟังก์ชั่นอื่น ๆ ถูกขยาย
-
-
เช่นแฮ็ค CSS
การคัดลอกรหัสมีดังนี้:
ร่างกาย, html {พื้นหลังสี:#333; มาร์จิ้น: 0; ความสูง: 100%; ความสูงของสาย: 2.0; Font-Family: 'Microsoft Yahei'; Overflow-y: ซ่อน;}
#Contain {margin: 0 auto; ตำแหน่ง: ญาติ; ความกว้าง: 100%; ความกว้างสูงสุด: 480px; _width: 480px; ความสูง: 100%; เคอร์เซอร์: ตัวชี้! สำคัญ;}
#Apparea {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; ล้น: ซ่อน; พื้นหลังสี: #FFF;}
#topinfo {ตำแหน่ง: สัมบูรณ์; ด้านบน: 60px; ความกว้าง: 100%; ความสูง: 60px; TEXT-ALIGN: CENTER; ขนาดตัวอักษร: 18px; -
#bottominfo {ตำแหน่ง: Absolute; Bottom: 0; Width: 100%;}
#Scrollerarea {ตำแหน่ง: สัมบูรณ์; ขวา: 0; ความกว้าง: 1.5%; ความสูง: 100%; ทัศนวิสัย: ซ่อน;}
#Scroller {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ความกว้าง: 100%; พื้นหลังสี: #aaa;}
#Movearea {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ความกว้าง: 100%; พื้นหลังสี: #DDD;}
รหัส HTML
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ผู้ใช้-scalable = no">>
<link type = "text/css" href = "css/main.css" rel = "stylesheet">
<title> เลื่อนรีบาวด์ </title>
<!-[ถ้า lt คือ 9]> <! [endif]->
<Noscript> </oscript>
</head>
<body>
<div id = "มี">
<div id = "explea">
<div id = "topinfo">
โลโก้หรือภาพเคลื่อนไหว
</div>
<div id = "bottominfo">
การแสดงความสามารถในปี 2014-4-28
</div>
<div id = "movearea"> </div>
<div id = "scrollerarea">
<div id = "scroller"> </div>
</div>
</div>
</div>
<script src = "js/main.js"> </script>
</body>
</html>