Terminal seluler PC kompatibel dengan IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ Inersia Assist, Sliding Rebound
Mode fasad
Salinan kode adalah sebagai berikut:
window.onload = function () {
/*Uji data*/
var insert = '';
untuk (var i = 0; i <80; i ++) {
Sisipkan + = '<div style = "Lebar: 100%; Teks-Align: Center;"> Tes Sliding' + i + '</div>';
}
document.geteLementById ("movearea"). innerHtml = masukkan;
/*Uji data*/
var at = new appTouch ({
tcontain: 'appeea', // Diperlukan: ID area geser
Tmove: 'Movearea', // Diperlukan: Pindahkan Area ID
tscroller: 'scroller', // wajib: scrollbar khusus
tscrollerarea: 'scrollerarea' // Diperlukan: Area scrollbar
}, onMoveend);
// ke panggilan balik atas/bawah
fungsi onmoveend (m) {
//console.log(m);
}
}
/*================================================================= ===================================================================
* Nama: AppTouch
* Fungsi: Komponen Simulasi Geser Aplikasi Web
* Parameter: Konfigurasi Terkait
===============================*//
var appTouch = function (config, callback) {
this.touchContain = config.tcontain;
this.touchmove = config.tmove;
this.touchscroller = config.tscroller;
this.touchsCrolerArea = config.tscrollerarea;
this.callbackfn = callback;
this.move ();
}
appTouch.prototype = {
pindahkan: function (e) {
var monitor = document.geteLementById (this.touchcontain), // listenergy container
target = document.geteLementById (this.touchmove), // pindahkan target
scroller = document.geteLementById (this.touchscroller), // scrollbar khusus
scrollerarea = document.geteLementById (this.touchscrolerarea), // area gulir
sheight = monitor.offsetheight /target.offsetheight * monitor.offsetheight, // Sesuaikan panjang scrollbar
st = (target.offsetHeight - monitor.offsetHeight) /(monitor.offsetHeight - sheight), // blok bergerak sesuai dengan panjang satuan roller
tslow = 4, // ke atas/bawah minus basis
tmove = 0, // slider ke nilai teratas
tmovel = tmove + 140, // rentang drop-down dibiarkan top
bmove = monitor.offsetHeight - target.offsetHeight, // Nilai teratas dari slider
BMOVEL = BMOVE - 140, // Rentang benar -benar peningkatan
callbackfn = this.callbackfn, // fungsi panggilan balik
flg = false, // apakah penanda meluncur
Mulai, // Tandai posisi awal
starttop, // tandai nilai tinggi di awal geser
bergerak = 0;
// Jarak Gerakan
// Pendaftaran Acara Mouse
addevent (monitor, 'mousedown', movestart);
addevent (monitor, 'mousemove', movein);
addEvent (monitor, 'mouseUp', moveend);
addEvent (jendela, 'mousemove', movein);
addEvent (window, 'mouseUp', moveend);
// Pendaftaran Acara Sentuh Perangkat Seluler
addEvent (monitor, 'touchstart', movestart);
addEvent (monitor, 'touchmove', movein);
addEvent (monitor, 'Touchend', Moveend);
/**
*Pengemasan mode penampilan/jauh
*/
/*Mendengarkan acara*/
fungsi addevent (el, type, fn) {
if (el.addeventListener) {
el.addeventlistener (tipe, fn, false);
} lain jika (el.attachevent) {
el.attachevent ('on' + type, fn);
} kalau tidak {
el ['on' + type] = fn;
}
}
// Batalkan perilaku default browser
fungsi stop (e) {
// opera/chrome/ff
if (e.preventdefault)
e.preventdefault ();
//YAITU
E.ReturnValue = false;
}
// Kemasannya berakhir
/**
*Fungsi Operasi
*/
// parameter pelonggaran inersia
var lastmovetime = 0;
var lastmovestArt = 0;
var stopinerliamove = false;
/*Pemicu seluler*/
function movestart (e) {
berhenti (e);
flg = true;
if (e.touches)
e = e.touches [0];
starty = e.clienty;
starttop = target.style.top || 0;
// inersia lambat
lastmovestArt = starty;
lastMoVetime = new Date (). getTime ();
stopinerliamove = true;
scrollerarea.style.visibility = 'visible';
}
/*Selama gerakan*/
function movein (e) {
if (flg) {
berhenti (e);
if (e.touches)
e = e.touches [0];
pindahkan = E.Clienty - starty + parseInt (startTop);
if (pindahkan> tmove) {
(pindahkan - tmove) / tslow + tmove> tmovel? pindahkan = tmovel: move = (move - tmove) / tslow + tmove
} lain jika (pindahkan <bmove)
(Pindah - Bmove) / tslow + bmove <bmovel? pindahkan = bmovel: move = (move - bmove) / tslow + bmove;
target.style.top = move + 'px';
scroller.style.top = -move / st + 'px';
// inersia lambat
var nowtime = new date (). getTime ();
stopinerliamove = true;
if (nowtime - lastmoVetime> 300) {
lastmoVetime = sekarang waktu;
lastmovestArt = e.clienty;
}
}
}
/*Pindah ujung*/
fungsi bergerak (e) {
berhenti (e);
if (e.touches)
e = e.touches [0];
// inersia lambat
var contenttop = target.style.top.replace ('px', '');
var contenty = (parseInt (contenttop) + e.clienty - lastmovestArt);
var nowtime = new date (). getTime ();
var v = (e.clienty - lastmovestArt) / (sekarang waktu - lastmoVetime);
// Jari -jari sedang dipotong pada periode waktu terakhir
stopinerliamove = false;
(function (v, startTime, Contenty) {
var dir = v> 0? -1: 1;
// arah percepatan
VAR DESICING = dir * 0,005;
fungsi inertiamove () {
if (stopinersiamove)
kembali;
var nowtime = new date (). getTime ();
var t = sekarang - startTime;
var nowv = v + t * deselerasi;
var movey = (v + nowv)/ 2 * t;
// Ubah arah kecepatan berarti bahwa kecepatan telah mencapai 0
if (dir * nowv> 0) {
if (pindahkan> tmove) {
callbackfn ('top');
target.style.top = tmove + 'px';
scroller.style.top = tmove + 'px';
} lain jika (pindahkan <bmove) {
callbackfn ('lalu itu');
target.style.top = bmove + 'px';
scroller.style.top = -bmove / st + 'px';
}
setTimeout (function () {
if (! stopinersiamove)
scrollerarea.style.visibility = 'tersembunyi';
}, 4000);
kembali;
}
MOVE = Contenty + Movey;
if (pindahkan> tmove) {
t /= 20;
pindahkan = (pindahkan - tmove) / 10 + tmove;
} lain jika (pindahkan <bmove) {
t /= 20;
pindahkan = (pindahkan - bmove) / 10 + bmove;
}
target.style.top = move + "px";
scroller.style.top = -move / st + 'px';
setTimeout (inerliamove, 10);
}
inertiamove ();
}) (v, sekarang waktu, konten);
bergerak = 0;
flg = false;
}
// Operasi berakhir
/**
*Inisialisasi terkait
*/
// Inisialisasi panjang batang gulir
scroller.style.height = sheight + 'px';
// Inisialisasi berakhir
},
OtherInteract: function () {
// Fungsi lain diperluas
}
}
Yaitu Hack CSS
Salinan kode adalah sebagai berikut:
tubuh, html {latar belakang-warna:#333; Margin: 0; Tinggi: 100%; Line-Height: 2.0; Font-Family: 'Microsoft Yahei'; overflow-y: tersembunyi;}
#contain {margin: 0 auto; Posisi: kerabat; Lebar: 100%; Max-Width: 480px; _width: 480px; Tinggi: 100%; Kursor: Pointer! Penting;}
#Apparea {position: absolute; Lebar: 100%; Tinggi: 100%; meluap: tersembunyi; latar belakang-warna: #fff;}
#topinfo {position: absolute; atas: 60px; lebar: 100%; Tinggi: 60px; Teks-Align: tengah; font-size: 18px; }
#bottominfo {position: absolute; bawah: 0; lebar: 100%;}
#scrollerarea {position: absolute; Kanan: 0; Lebar: 1,5%; Tinggi: 100%; Visibilitas: tersembunyi;}
#scroller {position: absolute; TOP: 0; Lebar: 100%; latar belakang-warna: #aaa;}
#movearea {position: absolute; Atas: 0px; Lebar: 100%; latar belakang-warna: #ddd;}
Kode HTML
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<meta name = "viewport" content = "width = perangkat-lebar, skala awal = 1.0, skala pengguna = tidak">
<tautan tipe = "Teks/CSS" hREF = "css/main.css" rel = "stylesheet">
<title> Sliding Rebound </title>
<!-[jika lt yaitu 9]> <! [Endif]->
<noscript> </noscript>
</head>
<body>
<Div id = "contil">
<Div id = "appeea">
<Div id = "TopInfo">
logo atau animasi
</div>
<Div id = "BottomInfo">
Beberapa informasi 2014-4-28
</div>
<Div ID = "Movearea"> </div>
<div id = "scrollerarea">
<Div id = "scroller"> </div>
</div>
</div>
</div>
<skrip src = "js/main.js"> </ptript>
</body>
</html>