Kod adalah seperti berikut:
//Acara gerak isyarat
touchstart //Dicetuskan apabila jari menyentuh skrin
touchmove //Dicetuskan apabila jari yang telah menyentuh skrin mula bergerak
touchend //Dicetuskan apabila jari meninggalkan skrin
sentuh batal
//Acara sentuh
gesturestart //Dicetuskan apabila dua jari menyentuh skrin
gesturechange //Dicetuskan apabila dua jari menyentuh skrin dan mula bergerak
isyarat
//Acara putaran skrin
onorientationchange
// Kesan apabila jari yang menyentuh skrin bertukar arah
perubahan orientasi
//Atribut berkaitan disokong oleh acara sentuhan
menyentuh
targetTouches
changedTouchs
clientX // Koordinat X sentuhan berbanding dengan port pandangan (tidak termasuk offset tatal)
clientY // Koordinat Y sentuhan relatif kepada port pandangan (tidak termasuk offset tatal)
screenX // Berkaitan dengan skrin
screenY // Berbanding dengan skrin
pageX // Berkaitan dengan halaman penuh (termasuk menatal)
pageY // Berkaitan dengan halaman penuh (termasuk menatal)
target // Nod peristiwa sentuhan berasal daripada
pengecam // Nombor pengenalan, unik untuk setiap peristiwa sentuhan
4. Acara putaran skrin: onorientationchange
Tambahkan acara putaran skrin mendengar untuk mengetahui status putaran skrin (putaran kiri, putaran kanan atau tiada putaran) pada bila-bila masa. Contoh:
// Tentukan sama ada skrin diputar
fungsi orientationChange() {
suis(tetingkap.orientasi) {
Kes 0:
makluman("Mod potret 0, lebar skrin: " lebar skrin "; ketinggian skrin: " tinggi skrin;
rehat;
Kes -90:
alert("Putaran kiri -90,screen-width: " screen.width "; screen-height:" screen.height);
rehat;
Kes 90:
makluman("Putaran kanan 90,lebar skrin: " skrin.lebar "; tinggi skrin: " skrin.tinggi;
rehat;
Kes 180:
alert("Mod landskap 180,screen-width: " screen.width "; screen-height:" screen.height
Rehat;
};
};
//Tambahkan pendengar acara
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
5 Sembunyikan bar alamat & halang bar skrol daripada muncul semasa mengendalikan acara:
Salin kod
Kod adalah seperti berikut:
6. Acara gelongsor dua jari:
Salin kod
Kod adalah seperti berikut:
// Acara gelongsor dua jari
addEventListener('load', Function(){ window.onmousewheel = twoFingerScroll;},
// Serasi dengan semua penyemak imbas, bermakna pengendali acara dipanggil semasa fasa menggelegak (fasa tangkapan sebenar)
);
fungsi twoFingerScroll(ev) {
var delta =ev.wheelDelta/120;
Kembalikan benar;
};
7. Tentukan sama ada ia adalah iPhone:
// Tentukan sama ada ia adalah iPhone:
fungsi ialahAppleMobile() {
Kembali (navigator.platform.indexOf('iPad') != -1);
};
8. Storan tempatan:
Contoh: (Perhatikan bahawa nama data n hendaklah disertakan dalam tanda petikan)
Salin kod
Kod adalah seperti berikut:
var v = localStorage.getItem('n') ? localStorage.getItem('n') : "" // Jika data dengan nama n wujud, bacakannya dan tetapkan kepada pembolehubah v .
9 Gunakan pautan khas:
Jika anda mematikan pengecaman automatik dan mahu beberapa nombor telefon dipautkan ke fungsi pendailan iPhone, anda boleh mengisytiharkan pautan telefon seperti ini,
Salin kod
Atau untuk sel:
Salin kod
Kod adalah seperti berikut:
|
10. Autokapitalisasi dan autopembetulan
Untuk mematikan kedua-dua ciri ini, anda boleh menggunakan pilihan autocapitalize dan autocorrect:
Salin kod
11. WebKit CSS:
① "Model kotak" secara khusus menerangkan kandungan blok kotak sempadan, termasuk sempadan, isian, dsb.
Salin kod
-webkit-box-sizing: sizing_model; nilai pemalar jidar: kotak sempadan/kotak-kandungan
-webkit-box-shadow: hoff voff blur color; //Bayang-bayang bekas (parameternya ialah: horizontal X-direction offset; menegak Y-direction offset; Gaussian blur radius; nilai shadow color)
-webkit-margin-bottom-collapse: collapse_behavior; Nilai malar: runtuh/buang/pisahkan
-webkit-margin-start: lebar;
-webkit-padding-start: lebar;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 bulat/regangkan bulat/regangkan;
-webkit-appearance: butang tekan; //Prestasi CSS terbina dalam, pada masa ini hanya menyokong butang tekan
②"Model pemformatan visual" menerangkan sifat dan menentukan kedudukan dan saiz elemen blok.
arah: rtl
unicode-bidi: bidi-override; pemalar: bidi-override/embed/normal
③ "Kesan Visual" menerangkan atribut dan melaraskan kandungan blok kesan visual, termasuk gelagat limpahan, gelagat pelarasan, keterlihatan, animasi, transformasi dan peralihan.
klip: rect(10px, 5px, 10px, 5px)
ubah saiz: auto; pemalar: auto/kedua-duanya/mendatar/tiada/menegak
keterlihatan: boleh dilihat; pemalar: runtuh/tersembunyi/terlihat
-webkit-transition: kelegapan 1s linear; kesan animasi mudah/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: lebih kelihatan; Malar: boleh dilihat (nilai lalai)/tersembunyi
-webkit-box-reflect: kanan 1px; Cermin terbalik
-webkit-box-reflect: di bawah 4px -webkit-gradient(linear, kiri atas, kiri bawah,
daripada(lutsinar), hentian warna(0.5, lutsinar), kepada(putih));
-webkit-mask-image: -webkit-gradient(linear, kiri atas, kiri bawah, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));; //Topeng CSS/kesan topeng
-webkit-mask-attachment: tetap;
-webkit-perspective: value; Constant: tiada (lalai)
-webkit-perspective-origin: kiri atas;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d;
④Atribut perihalan "Jana kandungan, nombor automatik dan senarai" membolehkan anda menukar komponen kandungan, mencipta bab dan tajuk bernombor automatik dan memanipulasi gaya kandungan penyenaraian.
kandungan: “Item” kaunter(bahagian) ” “;
Ini menetapkan semula kaunter.
Bahagian pertama
>dua bahagian
tiga bahagian
kenaikan balas: bahagian 1;
set semula balas: bahagian;
⑤ "Media paging" menerangkan sifat prestasi dan penampilan, mengawal tingkah laku versi bercetak halaman web, seperti pemisah halaman.
page-break-after: auto; Constant: sentiasa/auto/elak/kiri/kanan
page-break-before: auto; Constant: sentiasa/auto/elak/kiri/kanan
page-break-inside: auto; Constant: auto/elak
⑥Atribut perihalan "Warna dan Latar Belakang" mengawal latar belakang elemen peringkat blok dan warna komponen kandungan teks.
-webkit-background-clip: content; Constant: border/content/padding/text
-webkit-background-asal: padding;
-saiz-latar belakang webkit: 55px;
⑦ "Fon" ialah faktor yang secara khusus menerangkan sifat pemilihan fon teks. Laporan itu juga menerangkan sifat yang digunakan untuk memuat turun definisi fon.
Salin kod
⑧ "Teks" menerangkan gaya teks tertentu, jarak dan tatal automatik atribut.
Salin kod Kod adalah seperti berikut:
bayang teks: #00FFFC 10px 10px 5px;
text-transform: huruf besar; pemalar: huruf besar/huruf kecil/tiada/huruf besar
word-wrap: break-word; pemalar: break-word/normal
-webkit-marquee: kanan besar tak terhingga normal 10s;
-webkit-marquee-direction: hadapan/auto/undur/bawah/hadapan/kiri/undur/kanan/atas
-webkit-marquee-incrementt: 1-n/infinite(infinite times)
-webkit-marquee-speed: cepat/biasa/lambat
-gaya-webkit-marquee: ganti/tiada/skrol/slaid
-webkit-text-fill-color: #ff6600; Pemalar: huruf besar, huruf kecil, tiada, huruf besar
-webkit-text-security: bulatan;
-webkit-text-size-adjust: tiada;
-webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; Malar: normal/after-white-space
-webkit-penampilan: caps-lock-indicator;
-webkit-nbsp-mod: ruang;
-webkit-rtl-ordering: logik;
-webkit-user-drag: elemen; pemalar: elemen/auto/tiada
-webkit-user-modify: baca-sahaja;
-webkit-user-select: text; Constant: text/auto/none
⑨ "Jadual" menerangkan reka letak dan kandungan khusus jadual prestasi reka bentuk.
Salin kod
–webkit-column-break-inside: logik;
-webkit-column-count: 3; //Lajur
-peraturan-lajur-webkit: 1px pepejal #fff;
gaya: putus-putus, bertitik, berganda, alur, tersembunyi, sisipan, tiada, permulaan, rabung, pepejal
⑩Atribut perihalan "antara muka pengguna" melibatkan elemen antara muka pengguna dalam penyemak imbas, seperti kawasan teks menatal, bar skrol, dsb. Laporan itu juga menerangkan sifat di luar skop kandungan halaman, seperti gaya serlahan ciri kursor dan paparan apabila anda menahan sentuh
Sasaran, seperti pautan pada iPhone.
Salin kod
Kod adalah seperti berikut:
12. Peralihan animasi
Ini adalah ciri yang paling inovatif dalam Webkit: mentakrifkan animasi menggunakan fungsi peralihan.
Salin kod Kod adalah seperti berikut:
-webkit-animasi: tajuk infinite ease-in-out 3s;
Ini juga boleh disingkatkan. Tetapi apa yang benar-benar membuatkan saya berasa hebat ialah kerangka utama, yang boleh mentakrifkan proses transformasi animasi untuk panggilan, prosesnya ialah 0% hingga 100% atau dari (0%) kepada (100%). Ringkasnya, selagi anda mempunyai idea, adalah sangat mudah bagaimana anda mahu unsur-unsur berubah semasa proses.
Salin kod
Kod adalah seperti berikut:
-webkit-transform: taip (skala/putar/skew/terjemah anjakan)
skala(bilangan,bilangan) pembesaran. skalaX dan skalaY(3), boleh disingkatkan sebagai: skala(*, *)
putar(*deg) sudut putaran. rotateX dan rotateY boleh disingkatkan sebagai: rotate(*, *)
Skew(*deg) Sudut condong. skewX dan skewY boleh disingkatkan sebagai: skew(*, *)
translate(*,*) koordinat pergerakan. translateX dan translateY boleh disingkatkan sebagai: translate(*, *).
Contoh melaksanakan kotak mesej pop timbul simulasi (Makluman):
① Tentukan peralihan (huraikan kerangka utama dalam perenggan | 
