Ini adalah kode sumber plug-in gulir JS yang saya tulis selama Tahun Baru Cina. Saya tidak puas dengan hasil hasil. Saya kembali untuk mengkonsolidasikan dan belajar JS secara mendalam. Plug-in ini memiliki aspek yang tidak memuaskan berikut:
Untuk efek yang berlebihan dari konten, Anda dapat merujuk ke scrollbar dalam daftar sesi terbaru dari klien QQ. Gulirnya sangat halus, sederhananya, tidak memiliki efek transisi animasi.
Kompatibilitas yang tidak sempurna, gaya di bawah IE6 dan 7 masih sedikit cacat.
Gayanya tidak sempurna, seperti bilah gulir ditampilkan hanya ketika mouse ditangguhkan, dan efek tersembunyi setelah penghapusan tidak ditulis.
Struktur internal membingungkan, dan struktur konten perlu disesuaikan.
Lagipula, gambar bilah gulir bukanlah seorang seniman, dan sangat menjijikkan untuk memotong gambarnya sendiri ...
Secara keseluruhan, masih mungkin untuk ditonton, tetapi masih ada kekurangan animasi. Ketika saya menulis plug-in ini, saya menyadari bahwa plug-in saya menggunakan beberapa fungsi yang relatif mendasar, jadi saya pikir fungsi-fungsi ini harus dienkapsulasi. Saya telah mempelajari JS secara mendalam baru -baru ini. Setelah membaca buku yang ada, saya harus mulai menulis plug-in fungsi dasar ini. Tentu saja, mesin animasi sangat diperlukan. Tanpa basa-basi lebih lanjut, kode sumber ada di sini (Catatan: Versi lengkap plug-in ini memiliki gambar, silakan unduh plug-in lengkap di lampiran di akhir artikel):
CSS
Salinan kode adalah sebagai berikut:
.lf_scroll, .lf_scroll li {padding: 0; Margin: 0; List-style: tidak ada; Font: 14px/24px "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', Sans-Serif; Garis Besar: Tidak Ada; }
.lf_scroll {kursor: pointer; Lebar: 10px; Posisi: Absolute; Kanan: 0; TOP: 0; filter: alpha (opacity = 50); -Moz-opacity: 0,5; -khtml-opacity: 0,5; Opacity: 0,5; }
.lf_scrollfocus {filter: alpha (opacity = 100); -Moz-opacity: 1; -khtml-opacity: 1; Opacity: 1; }
.lfs_top, .lfs_center, .lfs_bottom {latar belakang: url ('scrollbar.gif'); Lebar: 10px; Tinggi: 10px; }
.lfs_top {latar belakang posisi: 1px 0px; }
.lfs_center {latar belakang-posisi: tengah 0; Tinggi: 100px; }
.lfs_bottom {latar belakang -posisi: -22px 0; }
/*Pengembang konfigurasi*/
.rolldiv {tinggi: 100%; Lebar: 100%; meluap: tersembunyi; Posisi: kerabat; }
Javascript
Salinan kode adalah sebagai berikut:
/*
* Plugin ini didefinisikan pada bilah gulir halaman web simulasi, silakan masukkan setelah mengikat untuk acara DOM
*
* Versi komentar: 1.0.0
* Penulis: LinkFly
* Sina: Fokus pada setengah abad untuk Anda | cnblogs: http://www.cnblogs.com/silin6/ | Email: [email protected]
* Tanggal: 2014-02-05 02:38:35
*
*
* Dual berlisensi di bawah lisensi MIT dan GPL:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(fungsi (jendela, tidak terdefinisi) {
// Informasi Parameter Konfigurasi
var config = {
Otomatis: Benar,
Tinggi: 'Auto',
Lebar: 'Auto'
};
var linkflyscroll = function (dom, options) {
/// <summary>
/// 1: Hasilkan objek scrollbar yang disimulasikan, [Harap ikat peristiwa dengan objek yang ditentukan setelah objek ini berfungsi, jika tidak, peristiwa yang Anda terikat sebelumnya tidak akan berfungsi]
/// 1.1 - LinkFlyScroll (DOM) - Hasilkan Objek Scrollbar pada DOM yang ditentukan
/// 1.2 - LinkFlyScroll (DOM, Opsi) - Hasilkan objek scrollbar, dan berikan serangkaian parameter yang memungkinkan Anda menyesuaikan model kerja untuk mengonfigurasi objek.
/// </summary>
/// <param name = "dom" type = "string atau elemen">
/// Lulus di objek DOM JS, atau ID objek dari string tipe
/// </param>
/// <param name = "options" type = "json">
/// Kustomisasi model kerja objek ini, dengan opsi berikut:
/// [Opsional] Auto (Boolean): Ketika konten tidak mencapai ketinggian wadah, apakah bilah gulir akan disembunyikan secara otomatis? Default itu benar (ya)
/// [Opsional] Tinggi (int atau string): Unit default adalah PX, yang dapat berupa int dan string. Jika nilainya otomatis, ketinggian CSS digunakan secara default.
/// [Opsional] Lebar (int atau string): Unit default adalah PX, yang dapat berinteraksi dan string. Jika nilainya otomatis, lebar CSS digunakan secara default.
/// </param>
/// <returns type = "linkflyscroll"/>
if (typeof (dom) === 'string') {
dom = document.getElementById (DOM);
}
// tidak ada dom yang ditentukan dan tidak ada dom yang valid
// linkflyscroll (""), linkflyscroll (null), linkflyscroll (tidak ditentukan)
if (! dom ||! dom.nodetype)
kembalikan ini;
// Buat objek wadah
var scrollobj = document.createelement ('div');
// Objek Konten sangat dikloning dan tidak mengandung peristiwa, jadi Anda harus menunggu sampai objek LinkFlyScroll selesai berfungsi sebelum Anda dapat mengikat acara ke objek DOM.
var cloneobj = dom.clonenode (true);
scrollobj.classname = 'rollDiv';
scrollobj.appendchild (cloneobj);
// Ganti objek saat ini di halaman
dom.parentnode.replacechild (scrollobj, dom);
return baru LinkFlyScroll.prototype.init (scrollobj, options? Opsi: {});
};
LinkFlyScroll.prototype.init = function (dom, options) {
/// <summary>
/// 1: Objek ini adalah objek nyata. Cara kerja khusus adalah karena mungkin ada panggilan statis dan panggilan instantiated dari linkflyscroll
/// 1.1 - init (dom, opsi) - Hasilkan objek scrollbar pada dom yang ditentukan
/// </summary>
/// <param name = "dom" type = "element">
/// Objek DOM
/// </param>
/// <param name = "options" type = "json">
/// Kustomisasi model kerja objek ini, dengan opsi berikut:
/// [Opsional] Auto (Boolean): Ketika konten tidak mencapai ketinggian wadah, apakah bilah gulir akan disembunyikan secara otomatis? Default itu benar (ya)
/// [Opsional] Tinggi (int atau string): Unit default adalah PX, yang dapat berupa int dan string. Jika nilainya otomatis, ketinggian CSS digunakan secara default.
/// [Opsional] Lebar (int atau string): Unit default adalah PX, yang dapat berinteraksi dan string. Jika nilainya otomatis, lebar CSS digunakan secara default.
/// </param>
/// <returns type = "linkflyscroll"/>
/*
* Objek ini berisi properti berikut:
* isDrag: apakah scrollbar diseret
* starttop: (bekerja) bilah gulir mulai gulir posisi
* endtop: (bekerja) Posisi gulir ujung batang gulir
* TopLimit: Posisi batas atas bilah gulir
* BottomLimit: Posisi batas di bagian bawah bilah gulir
* Konteks: Konten Dom
* Scrollradix: menggulir kardinalitas
* Target: DOM CANTAB
*/
// Objek ini saat ini, untuk mencegah pointer ini sering berubah di lingkungan (misalnya, saat mengikat peristiwa), simpan objek saat ini.
var Currscroll = ini;
// domelement
if (dom.nodetype) {
// Simpan kontainer dan dom konten
Currscroll.target = DOM;
CurrsCroll.Context = DOM.FirstChild;
// Gabungkan parameter konfigurasi
CurrsCroll.Options = tool.extend (config, options);
if (currscroll.options.width! == 'auto') {
dom.style.width = tool.convertValue (Currscroll.options.width);
}
if (currscroll.options.height! == 'auto') {
dom.style.height = tool.convertValue (Currscroll.options.height);
}
// Temukan DOM yang valid
while (currscroll.context.nodetype! = 1) {
CurrsCroll.Context = CurrsCroll.Context.nextSibling;
}
// Buat Dom Scrollbar
Currscroll.scrollul = document.createElement ('ul');
Currscroll.scrollul.className = 'lf_scroll';
CurrsCroll.Scrollul.AppendChild (Tool.SetClass ('Li', 'LFS_TOP'));
CurrsCroll.Scrollul.AppendChild (Tool.SetClass ('Li', 'LFS_CENTER'));
CurrsCroll.Scrollul.AppendChild (Tool.SetClass ('Li', 'LFS_BOTTOM'));
Currscroll.context.Style.position = 'Relative';
// Sajikan di halaman sebelum Anda dapat membaca data lokasi
dom.AppendChild (CurrsCroll.Scrollul);
this.change ();
tool.addscrollevent (CurrScroll.context, function (e) {
// Bind Mouse Wheel Event, Unit Gulir 3px
if (e.wheel> 0) {// Roda gulir menggulir ke atas
var Currtop = CurrsCroll.endtop -= 3;
Currscroll.scrollevent.call (CurrsCroll, Currtop);
} else {// roda gulir gulir ke bawah
var Currtop = CurrsCroll.endtop += 3;
Currscroll.scrollevent.call (CurrsCroll, Currtop);
}
});
// Teks terlarang dipilih saat menyeret TODO
// Klik acara di bawah mouse dan Anda perlu menentukan apakah itu klik kiri. Saat ini, klik kanan juga akan mewujudkan gulir Todo.
Tool.addevent (CurrsCroll.Scrollul, 'Mousedown', Function (e) {
mousedown.call (Currscroll, E);
});
// Tambahkan acara untuk mengimplementasikan pemantauan di badan untuk pengalaman pengguna yang lebih baik
tool.addevent (document.body, 'mousemove', function (e) {
if (currscroll.isdrag) {
// Dapatkan posisi mouse saat ini
var position = tool.getMousePos (e);
// Posisi teratas bilah gulir saat ini
var currtop = (CurrsCroll.endtop + Position.y - CurrsCroll.starttop);
// Panggilan adalah membuat titik pointer ini ke objek yang berfungsi ini secara akurat
Currscroll.scrollevent.call (CurrsCroll, Currtop);
}
mengembalikan false;
});
// Tambahkan acara rilis mouse, dan dengarkan di tubuh untuk secara akurat menangkap acara rilis
tool.addevent (document.body, 'mouseUp', function () {
mouseup.call (Currscroll, []);
});
var mousedown = function (e) {
/// <summary>
/// 1: Acara Pers Mouse
/// 1.1 - Mousedown (E) - Acara Mousedown di SCROLLBAR PRESS
/// </summary>
/// <param name = "e" type = "event">
/// objek acara
/// </param>
/// <returns type = "linkflyscroll"/>
Currscroll.isdrag = true;
// Dapatkan posisi y mouse saat ini
Currscroll.starttop = tool.getMousePos (e) .y;
Tool.AddClass (CurrsCroll.Scrollul, 'lf_scrollfocus');
mengembalikan false;
};
var mouseup = function () {
/// <summary>
/// 1: Acara rilis mouse
/// 1.1 - mouseUp () - mouseUp () - Release Scrollbar Event di scrollbar
/// </summary>
/// <returns type = "linkflyscroll"/>
Currscroll.isdrag = false;
Currscroll.endtop = CurrsCroll.Scrollul.Style.top? ParseInt (CurrsCroll.Scrollul.Style.top): 0;
tool.removeclass (CurrsCroll.Scrollul, 'lf_scrollfocus');
mengembalikan false;
};
Currscroll.scrollevent = function (Currtop) {
/// <summary>
/// 1: Acara Gulir (Core), cukup lewati koordinat yang perlu digulir (Top Bar Gulir)
/// 1.1 - Scrollevent (Currtop) - Acara Gulir Inti
/// </summary>
/// <param name = "Currtop" type = "int">
/// Nilai atas bagian atas bilah gulir berasal dari lapisan wadah sebelumnya
/// </param>
/// <returns type = "void"/>
if (Currtop <= CurrsCroll.topLimit || Currtop <0) {// Batas Atas
Currtop = CurrsCroll.TopLimit;
} else if (currtop> = currscroll.bottomlimit) {// batas bawah
Currtop = CurrsCroll.Bottomlimit;
}
// Efek offset scrollbar
Currscroll.scrollul.style.top = Currtop + 'px';
var Temptop = ParseInt (CurrsCroll.Context.Style.top? Currscroll.context.style.top: 0);
// Kode debug
// document.getElementById('postionInfo').innerHTML = 'currTop:' + currTop + ' scrolling cardinality:' + currScroll.scrollRadix + ' bottomLimit:' + currScroll.bottomLimit + ' endTop:' + currScroll.endTop + ' startTop:' + currScroll.startTop + " Y:" + currTop + "offsettop:" + CurrsCroll.Scrollul.Offsettop + "Compute:" + (Currtop * CurrsCroll.ScrollRadix * -1) + 'px';
// kode teks
// Konten Gulir: Top bilah gulir saat ini* Kardinalitas mengambil angka negatif
Currscroll.context.style.top = Currtop * CurrsCroll.Scrollradix * -1 + 'px';
};
mengembalikan Currscroll;
};
};
LinkFlyScroll.prototype.init.prototype.change = function () {
/// <summary>
/// 1: Ubah fungsi konten bilah gulir
/// 1.1 - ubah () - Fungsi ini mewakili data yang menyegarkan objek scrollbar ini. Dalam beberapa kasus, data konten terus berubah. Anda dapat memanggil fungsi ini untuk menyegarkan data ke objek scrollbar saat ini.
/// </summary>
/// <returns type = "linkflyscroll"/>
/*
* Properti yang terkandung dalam LinkFlyScroll terutama diinisialisasi atau didefinisikan ulang dalam fungsi ini:
* isDrag: apakah scrollbar diseret
* starttop: (bekerja) bilah gulir mulai gulir posisi
* endtop: (bekerja) Posisi gulir ujung batang gulir
* TopLimit: Posisi batas atas bilah gulir
* BottomLimit: Posisi batas di bagian bawah bilah gulir
* Konteks: Konten Dom
* Scrollradix: menggulir kardinalitas
* Target: DOM CANTAB
*/
// Setel ulang atau baca serangkaian data
var Currscroll = ini;
Currscroll.isdrag = false,
Currscroll.starttop = 0,
Currscroll.endtop = (CurrsCroll.Scrollul.Style.Top? ParseInt (CurrsCroll.Scrollul.Style.Top): 0),
Currscroll.topLimit = CurrsCroll.Target.ScrollTop,
Currscroll.bottomlimit = CurrsCroll.Target.ClientHeight,
Currscroll.scrollradix = 10;
// Dapatkan ketinggian bilah gulir: Tinggi konten* (tinggi kontainer/tinggi konten = wadah sebagai persentase konten)
var scrollpx = currscroll.target.clientHeight * (CurrsCroll.Target.ClientHeight / CurrsCroll.context.OffsetHeight);
// Gulir tinggi bar
Currscroll.scrollul.childnodes [1] .style.height = scrollpx + 'px';
if (currscroll.context.clientHeight <= currscroll.target.clientHeight && currscroll.options.auto) {
CurrsCroll.Scrollul.Style.Display = 'None';
} kalau tidak {
Currscroll.scrollul.style.display = 'block';
// Saat bilah gulir ditampilkan, perbaiki data posisi maksimum
CurrsCroll.BottomLimit -= CurrsCroll.Scrollul.OffsetHeight;
}
// Atur kardinalitas gulir dari bilah gulir (bilah gulir tidak menggulir piksel gulir konten 1px): (Tinggi Konten - Tinggi Kontainer [karena wadah saat ini telah ditampilkan untuk satu layar])/Top Bilah Gulir (bilah gulir kosong dan dapat digulir)
Currscroll.scrollradix = (CurrsCroll.Context.OffsetHeight - CurrsCroll.Target.ClientHeight) / CurrsCroll.Bottomlimit;
mengembalikan Currscroll;
};
linkFlyScroll.prototype.init.prototype.roll = function (value) {
/// <summary>
/// 1: Metode offset scrollbar
/// 1.1 - roll (nilai) - Metode gulir batang gulir
/// </summary>
/// <param name = "value" type = "int">
/// persentase target pengguliran
/// </param>
/// <returns type = "linkflyscroll"/>
var Currscroll = ini;
if (typeof (value)! == 'number') {
mengembalikan Currscroll;
}
var Currtop = (CurrsCroll.Bottomlimit - CurrsCroll.TopLimit) * Nilai / 100;
Currscroll.scrollevent (Currtop);
Currscroll.endtop = Currtop;
mengembalikan Currscroll;
};
/*
* Peralatan
*/
var tool = {
setClass: function (elemen, classname) {
/// <summary>
/// 1: Atur atribut kelas dari node elemen
/// 1.1 - SetClass (elemen, className) - Atur atribut kelas dari node elemen. Jika tidak ada node seperti itu, buat node dan kembalikan objek node yang dimodifikasi
/// </summary>
/// <param name = "element" type = "elemen atau string">
/// Buat node dengan meneruskan string, sebaliknya memodifikasi node
/// </param>
/// <param name = "classname" type = "string">
/// Nama kelas
/// </param>
/// <returns type = "elemen"/>
if (typeof elemen === 'string') {
elemen = document.createElement (elemen);
}
element.classname = className;
elemen kembali;
},
hasclass: function (elemen, classname) {
/// <summary>
/// 1: Tentukan apakah elemen memiliki kelas
/// 1.1 - hasclass (elemen, classname) - menentukan apakah elemen memiliki kelas, pengecualian dalam bisnis (pada dasarnya tidak ada situasi seperti itu) dan kelas memiliki yang benar, jika tidak ia mengembalikan false
/// </summary>
/// <param name = "element" type = "elemen atau string">
/// Objek Node
/// </param>
/// <param name = "classname" type = "string">
/// Nama kelas
/// </param>
/// <returns type = "elemen"/>
if (! element || element.nodetype! == 1) // biarkan pengecualian lulus, dan tidak ada pemrosesan yang dilakukan di luar
Kembali Benar;
var elementClassName = element.className;
if (elementclassname.length <1) {
mengembalikan false;
}
if (elementclassname == className || elementclassname.match (regexp baru ("(^| // s)" + className + "(// s | $)"))) {
Kembali Benar;
}
mengembalikan false;
},
addClass: function (elemen, classname) {
/// <summary>
/// 1: [Tambah] Kelas untuk Elemen
/// 1.1 - AddClass (Elemen, ClassName) - Tambahkan elemen dan kembalikan kelas yang dimodifikasi
/// </summary>
/// <param name = "element" type = "elemen atau string">
/// Objek Node
/// </param>
/// <param name = "classname" type = "string">
/// Nama kelas
/// </param>
/// <returns type = "elemen"/>
if (! Tool.hasclass (elemen, className)) {
if (element.classname.length <1) {
element.classname = className;
} kalau tidak {
element.className + = '' + className;
}
}
elemen kembali;
},
RemoveClass: function (elemen, className) {
/// <summary>
/// 1: Hapus kelas untuk elemen
/// 1.1 - addClass (elemen, classname) - Hapus kelas untuk elemen dan kembalikan kelas yang dimodifikasi
/// </summary>
/// <param name = "element" type = "elemen atau string">
/// Objek Node
/// </param>
/// <param name = "classname" type = "string">
/// Nama kelas
/// </param>
/// <returns type = "elemen"/>
if (tool.hasclass (elemen, className)) {
var reg = regexp baru ("(^| // s)" + className + "(// s | $)");
element.classname = element.classname.replace (reg, '');
}
elemen kembali;
},
css: function (elemen, kunci) {
/// <summary>
/// 1: Dapatkan nilai atribut yang ditentukan oleh elemen CSS
/// 1.1 - CSS (Elemen, ClassName) - Dapatkan nilai atribut yang ditentukan oleh elemen CSS
/// </summary>
/// <param name = "element" type = "elemen atau string">
/// Objek Node
/// </param>
/// <param name = "key" type = "string">
/// atribut CSS untuk diperoleh
/// </param>
/// <returns type = "string"/>
return element.currentstyle? element.currentstyle [key]: document.defaultview.getComputedstyle (elemen, false) [key];
},
addevent: function (elemen, type, fn) {
/// <summary>
/// 1: Tambahkan acara ke elemen
/// 1.1 - CSS (Elemen, Jenis, FN) - Tambahkan peristiwa ke elemen, titik ini ke sumber acara dalam fungsi
/// </summary>
/// <param name = "element" type = "elemen atau string">
/// Objek Node
/// </param>
/// <param name = "type" type = "string">
/// Tambahkan nama acara, tanpa karakter aktif
/// </param>
/// <param name = "fn" type = "function">
/// objek acara
/// </param>
/// <returns type = "void"/>
if (element.attachevent) {
elemen ['e' + type + fn] = fn;
elemen [type + fn] = function () {element ['e' + type + fn] (window.event); }
element.attachevent ('on' + type, elemen [type + fn]);
} else if (element.addeventListener) {
element.addeventlistener (type, fn, false);
}
},
// lepas: fungsi (elemen, type, fn) {
// /// <summary>
// /// 1: Hapus acara untuk elemen, fungsi ini belum digunakan
// /// 1.1 - RemestEvent (Elemen, Type, FN) - Hapus Acara untuk Elemen
// /// </summary>
// /// <param name = "element" type = "elemen atau string">
// /// objek node
// /// </param>
// /// <param name = "type" type = "string">
// /// nama acara yang dihapus
// /// </param>
// /// <param name = "key" type = "string">
// /// nama fungsi acara yang dihapus
// /// </param>
// /// <returns type = "void"/>
// if (element.detachevent) {
// element.detachevent ('on' + type, elemen [type + fn]);
// elemen [type + fn] = null;
//} lain if (element.removeeventlistener) {
// element.removeeventlistener (type, fn, false);
//}
//},
addScrollevent: function (elemen, fn) {
/// <summary>
/// 1: Tambahkan acara Scrollevent
/// 1.1 - AddScrollEvent (Elemen, FN) - APPEND SCROLLEVENT EVENT TO ELEME (Acara Khusus, Acara Gulir Roda Mouse di Elemen)
/// </summary>
/// <param name = "element" type = "elemen atau string">
/// Node Elemen
/// </param>
/// <param name = "fn" type = "function">
/// Metode acara
/// </param>
/// <returns type = "void"/>
var bindscrollfn = function (e) {
E = E || window.event;
// menilai arah gulir roda gulir: Firefox berbeda dari browser lainnya
E.wheel = (e.wheeldelta? E.wheeldelta: -e.detail)> 0? 1: -1; // menilai roda mouse terbalik oleh acara, 1 naik, dan -1 menurun
// Blokir perilaku default browser
if (e.preventdefault) {// ff
e.preventdefault ();
} kalau tidak {
E.ReturnValue = false; //yaitu
}
fn.call (elemen, e);
}
if (document.addeventListener) {
// ff
element.addeventlistener ('dommousescroll', bindscrollfn, false);
// W3C
element.addeventlistener ('mousewheel', bindscrollfn, false);
} else // yaitu
{
element.attachevent ('onmousewheel', bindscrollfn);
}
},
getEvent: function () {
/// <summary>
/// 1: Dapatkan objek acara
/// 1.1 - getEvent () - Dapatkan objek acara tanpa parameter, sementara kompatibilitas menangani IE dan FF
/// </summary>
/// <returns type = "event"/>
if (document.all) {
return window.event;
}
func = getEvent.caller;
while (func! = null) {
var arg0 = func.arguments [0];
if (arg0) {
if ((arg0.constructor == event || arg0.constructor == mouseEvent) || (typeof (arg0) == "objek" && arg0.preventDefault && arg0.stoppropagation)) {
mengembalikan arg0;
}
}
func = func.Caller;
}
kembali nol;
},
getMousepos: function (ev) {
/// <summary>
/// 1: Dapatkan koordinat mouse saat ini
/// 1.1 - getMousePos (EV) - Dapatkan koordinat mouse saat ini, pemrosesan kompatibilitas, dan format objek yang dikembalikan: {x: koordinat mouse x, y: koordinat y mouse}
/// </summary>
/// <param name = "ev" type = "event">
/// objek acara
/// </param>
/// <returns type = "json"/>
if (! ev) {
EV = CurrsCroll.getEvent ();
}
if (ev.pagex || ev.pagey) {
kembali {
x: ev.pagex,
Y: EV.Pagey
};
}
if (document.documentelement && document.documentelement.scrolltop) {
kembali {
x: ev.clientx + document.documentelement.scrollleft - document.documentelement.clientleft,
y: ev.clienty + document.documentelement.scrolltop - document.documentelement.clienttop
};
}
lain if (document.body) {
kembali {
x: ev.clientx + document.body.scrollleft - document.body.clientleft,
y: ev.clienty + document.body.scrolltop - document.body.clienttop
};
}
},
Extand: function (oldobj, newoBj) {
/// <summary>
/// 1: Gabungkan dua objek
/// 1.1 - Perpanjangan (oldobj, newoBj) - gabungkan dua objek dan kembalikan objek gabungan, implementasikan dalam klon, sehingga tidak akan berdampak pada dua objek
/// </summary>
/// <param name = "oldobj" type = "objek">
/// objek A untuk digabungkan, yang digunakan sebagai objek dasar, menimpa atribut nama yang sama dari objek baru ke dalam objek dasar
/// </param>
/// <param name = "newoBj" type = "objek">
/// objek B untuk digabungkan
/// </param>
/// <returns type = "objek"/>
var tempobj = tool.clone (oldobj);
untuk (tombol var di newoBj) {
if (newoBj.hasownproperty (key) &&! Tempobj.hasownproperty (key)) {
tempoBJ [key] = newoBj [key];
}
}
kembalikan tempobj;
},
Clone: function (obj) {
/// <summary>
/// 1: mengkloning objek
/// 1.1 - Klon (OBJ) - Kloning objek dan kembalikan objek baru yang dikloning. Prototipe objek adalah objek yang dikloning
/// </summary>
/// <param name = "obj" type = "objek">
/// objek untuk dikloning
/// </param>
/// <returns type = "objek"/>
function clone () {}
Clone.prototype = obj;
var newoBj = klon baru ();
untuk (tombol var di newoBj) {
if (typeof newoBj [key] == "objek") {
newoBJ [key] = tool.clone (newoBj [key]);
}
}
mengembalikan newoBj;
},
convertValue: function (value) {
/// <summary>
/// 1: Konversi nilai menjadi nilai yang valid
/// 1.1 - ConvertValue (Nilai) - Konversi nilai CSS yang dikonfigurasi oleh JSON ke nilai yang valid, pastikan bahwa nilai nilai bukan "Otomatis"
/// </summary>
/// <param name = "value" type = "objek">
/// Nilai yang akan dikonversi
/// </param>
/// <returns type = "objek"/>
var reg =/^/d+$/g;
if (typeOf (value) === Number '|| reg.test (value)) {
nilai pengembalian + 'px';
} kalau tidak
nilai pengembalian;
}
};
// Daftarkan ke jendela
window.linkflyscroll = linkflyscroll;
// Daftarkan di window.so namespace
if (! window.so) {
window.so = {};
}
window.so.scroll = window.linkflyscroll;
})(jendela);
Contoh Kode
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link href = "linkflyscroll/linkflyrollcss.css" rel = "stylesheet" type = "text/css"/>
<skrip src = "linkflyscroll/linkflyscroll-1.0.0.js" type = "text/javaScript"> </script>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var config = {
Auto: Benar, // Saat konten tidak mencapai ketinggian wadah, akankah scrollbar akan secara otomatis disembunyikan
Tinggi: '100', // Tinggi kerja objek batang gulir (bilah gulir akan ditampilkan jika melebihi ketinggian ini), otomatis mendapatkan ketinggian objek saat ini
Lebar: 'Auto' // SCROLLBAR Objek Lebar Kerja
};
var scrollobj = so.scroll ('obj', config);
// scrollobj.change (); // Ketika konten scrollbar berubah, layar scrollbar perlu disegarkan, maka metode ini dipanggil
// scrollobj.roll (value); // Posisikan scrollbar ke titik tertentu, nilainya adalah persentase relatif terhadap objek scrollbar
};
</script>
</head>
<body>
<Div id = "obj">
<div>
Saat ini, "gaya mode" baru muncul di bidang manajemen perusahaan, dan beberapa perusahaan raksasa "melangsingkan" untuk diri mereka sendiri dan berubah menjadi bisnis yang lebih cerdas dan lebih gesit. Dipahami bahwa Oracle Software semakin menggeser biaya pemeliharaan utama pelanggannya kepada konsultan dan pemasok pihak ketiga.
"Di Cina, 90% bisnis Oracle dilakukan melalui mitra -mitra ini. Selain itu, untuk lebih memastikan pendapatan Oracle, CEO Ellison juga membeli sebuah pulau kecil di Hawaii," kata Craig Guarente.
Sebagai wakil presiden global, Guarente sangat menyadari strategi Oracle. Guarente memiliki 16 tahun pengalaman kerja dan memiliki pengalaman yang kaya dalam manajemen kontrak, manajemen lisensi perangkat lunak, dan audit perangkat lunak. Setelah meninggalkan Oracle pada tahun 2011, ia bergabung dengan Palisade, yang bisnis utamanya adalah membantu pelanggan Oracle memberikan kontrak perangkat lunak, intervensi audit, dan "optimasi" lisensi.
Guarente mengatakan bisnis Palisade berkembang sangat cepat. Sebagai organisasi pihak ketiga, Palisade membantu pelanggan memenangkan pesanan besar karena mereka lebih dekat ke pasar dan dapat memahami kebutuhan pengguna dengan lebih akurat.
Secara umum, perusahaan konsultan membantu pelanggan memilah kebutuhan aktual mereka dan nilai apa yang dapat diberikan perangkat lunak itu sendiri. Guarente memberikan penjelasan terperinci melalui operasi praktis. Misalnya, "Jika Anda ingin membangun pusat data baru, meluncurkan rencana pemulihan bencana baru, atau jika Anda ingin memasuki cloud, perusahaan pihak ketiga pertama-tama akan mengembangkan peta perencanaan dan akhirnya mengimplementasikannya untuk mencapai tujuan akhir pengguna. Jika perangkat lunak tersebut dapat digunakan di berbagai lokasi. Administrator dapat mendiagnosis masalah basis data melalui laporan Repositori Beban Otomatis (AWR).
Dalam beberapa tahun terakhir, dengan munculnya gelombang audit perangkat lunak, banyak perusahaan memasang alat manajemen aset perangkat lunak untuk menentukan perangkat lunak apa yang mereka gunakan, berapa lama itu bisa bertahan, dan berapa banyak orang di perusahaan yang menggunakannya. Tetapi analis manajemen senior Hegedus mengatakan: "Tidak ada alat yang dapat secara akurat memahami aturan perusahaan, terutama aplikasi produk Oracle, dan organisasi pihak ketiga profesional diperlukan untuk membantu pengguna memahami aturan perangkat lunak."
Jadi bagaimana saya bisa menambal aplikasi perangkat lunak Oracle? Presiden Oracle Mark Hurd mengatakan minggu lalu bahwa pada awal aplikasi perusahaan, lembaga pihak ketiga harus didefinisikan sebagai pendukung layanan, sehingga perusahaan dapat memperoleh perbaikan tambalan gratis dan dukungan lainnya di masa depan, daripada hanya membeli hak kekayaan intelektual produk. Selain itu, perusahaan harus secara efektif memanfaatkan konsultan untuk mendukung langkah pertama dalam kontrol biaya ketika memahami perangkat lunak apa yang digunakan perusahaan dan apa yang harus dimasukkan perjanjian. Jangan meninggalkan pemasok perangkat lunak secara membabi buta dan membeli perangkat lunak sesuai dengan proses prediksi dan tebakan Anda.
</div>
</div>
</body>
</html>
Di atas adalah seluruh konten artikel ini, dan penjelasannya sangat rinci. Saya harap Anda menyukainya.