นี่คือซอร์สโค้ดของปลั๊กอินการเลื่อน JS ที่ฉันเขียนในช่วงปีใหม่ของจีน ฉันไม่พอใจกับผลลัพธ์ของผลลัพธ์ ฉันกลับไปรวมและเรียนรู้ JS ในเชิงลึก ปลั๊กอินนี้มีแง่มุมที่ไม่น่าพอใจดังต่อไปนี้:
สำหรับเอฟเฟกต์ที่มากเกินไปของเนื้อหาคุณสามารถอ้างถึงแถบเลื่อนในรายการเซสชันล่าสุดของไคลเอนต์ QQ การเลื่อนของมันนั้นราบรื่นมากเพียงแค่ไม่มีเอฟเฟกต์การเปลี่ยนภาพเคลื่อนไหว
ความเข้ากันได้ที่สมบูรณ์แบบสไตล์ภายใต้ IE6 และ 7 ยังคงมีข้อบกพร่องเล็กน้อย
สไตล์นั้นไม่สมบูรณ์เช่นแถบเลื่อนจะปรากฏขึ้นเฉพาะเมื่อเมาส์ถูกระงับและเอฟเฟกต์ที่ซ่อนอยู่หลังจากการกำจัดไม่ได้เขียน
โครงสร้างภายในมีความสับสนและโครงสร้างเนื้อหาจะต้องมีการปรับ
ภาพแถบเลื่อนไม่ใช่ศิลปินและมันก็น่ารังเกียจมากที่จะตัดภาพด้วยตัวเอง ...
โดยรวมแล้วมันยังคงเป็นไปได้ที่จะดู แต่ก็ยังขาดภาพเคลื่อนไหว เมื่อฉันเขียนปลั๊กอินนี้ฉันรู้ว่าปลั๊กอินของฉันใช้ฟังก์ชั่นพื้นฐานบางอย่างดังนั้นฉันคิดว่าฟังก์ชั่นเหล่านี้ควรถูกห่อหุ้ม ฉันได้ศึกษา JS ในเชิงลึกเมื่อเร็ว ๆ นี้ หลังจากอ่านหนังสืออยู่ในมือฉันควรเริ่มเขียนปลั๊กอินฟังก์ชั่นพื้นฐานนี้ แน่นอนว่าเอ็นจิ้นแอนิเมชั่นนั้นขาดไม่ได้ หากไม่มีความกังวลใจเพิ่มเติมซอร์สโค้ดอยู่ที่นี่ (หมายเหตุ: เวอร์ชันที่สมบูรณ์ของปลั๊กอินนี้มีรูปภาพโปรดดาวน์โหลดปลั๊กอินที่สมบูรณ์ในไฟล์แนบในตอนท้ายของบทความ):
CSS
การคัดลอกรหัสมีดังนี้:
.lf_scroll, .lf_scroll li {padding: 0; มาร์จิ้น: 0; รายการสไตล์: ไม่มี; ตัวอักษร: 14px/24px "Helvetica neue", Helvetica, Arial, 'Microsoft Yahei', Sans-Serif; โครงร่าง: ไม่มี; -
.lf_scroll {เคอร์เซอร์: ตัวชี้; ความกว้าง: 10px; ตำแหน่ง: สัมบูรณ์; ขวา: 0; ด้านบน: 0; ตัวกรอง: อัลฟ่า (ความทึบ = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; ความทึบ: 0.5; -
.lf_scrollfocus {ตัวกรอง: อัลฟ่า (ความทึบ = 100); -moz-opacity: 1; -khtml-opacity: 1; ความทึบ: 1; -
.lfs_top, .lfs_center, .lfs_bottom {พื้นหลัง: url ('scrollbar.gif'); ความกว้าง: 10px; ความสูง: 10px; -
.lfs_top {ตำแหน่งพื้นหลัง: 1px 0px; -
.lfs_center {ตำแหน่งพื้นหลัง: กลาง 0; ความสูง: 100px; -
.lfs_bottom {ตำแหน่งพื้นหลัง: -22px 0; -
/*นักพัฒนา config*/
.rolldiv {ความสูง: 100%; ความกว้าง: 100%; ล้น: ซ่อน; ตำแหน่ง: ญาติ; -
จาวาสคริปต์
การคัดลอกรหัสมีดังนี้:
-
* ปลั๊กอินนี้ถูกกำหนดไว้ในแถบสกรอลหน้าเว็บจำลองโปรดแทรกหลังจากการเชื่อมโยงสำหรับกิจกรรม DOM
-
* เวอร์ชันแสดงความคิดเห็น: 1.0.0
* ผู้แต่ง: LinkFly
* Sina: มุ่งเน้นไปที่ครึ่งศตวรรษสำหรับคุณ | cnblogs: http://www.cnblogs.com/silin6/ | อีเมล: [email protected]
* วันที่: 2014-02-05 02:38:35
-
-
* ใบอนุญาตคู่ภายใต้ใบอนุญาต MIT และ GPL:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
-
-
(ฟังก์ชั่น (หน้าต่างที่ไม่ได้กำหนด) {
// ข้อมูลพารามิเตอร์การกำหนดค่า
var config = {
อัตโนมัติ: จริง
ความสูง: 'อัตโนมัติ',
ความกว้าง: 'อัตโนมัติ'
-
var linkflyscroll = function (dom, ตัวเลือก) {
/// <summary>
/// 1: สร้างวัตถุแถบม้วนจำลอง [โปรดผูกเหตุการณ์กับวัตถุที่ระบุหลังจากวัตถุนี้ทำงานมิฉะนั้นเหตุการณ์ที่คุณผูกพันก่อนหน้านี้จะไม่ทำงาน]
/// 1.1 - LinkFlyscroll (DOM) - สร้างวัตถุแถบเลื่อนบน DOM ที่ระบุ
/// 1.2 - LinkFlyscroll (DOM, ตัวเลือก) - สร้างวัตถุแถบเลื่อนและจัดเตรียมชุดของพารามิเตอร์ที่ช่วยให้คุณปรับแต่งรูปแบบการทำงานสำหรับการกำหนดค่าวัตถุ
/// </summary>
/// <param name = "dom" type = "สตริงหรือองค์ประกอบ">
/// ส่งผ่านในวัตถุ js dom หรือ id วัตถุของประเภทสตริง
/// </param>
/// <param name = "ตัวเลือก" type = "json">
/// ปรับแต่งรูปแบบการทำงานของวัตถุนี้ด้วยตัวเลือกต่อไปนี้:
/// [ไม่บังคับ] auto (บูลีน): เมื่อเนื้อหาไม่ถึงความสูงของคอนเทนเนอร์แถบเลื่อนจะถูกซ่อนโดยอัตโนมัติหรือไม่? ค่าเริ่มต้นเป็นจริง (ใช่)
/// [ไม่บังคับ] ความสูง (int หรือสตริง): หน่วยเริ่มต้นคือ PX ซึ่งสามารถเป็น int และสตริง หากค่าเป็นอัตโนมัติความสูงของ CSS จะถูกใช้โดยค่าเริ่มต้น
/// [ตัวเลือก] ความกว้าง (int หรือสตริง): หน่วยเริ่มต้นคือ PX ซึ่งสามารถเป็น int และสตริง หากค่าเป็นอัตโนมัติความกว้างของ CSS จะถูกใช้โดยค่าเริ่มต้น
/// </param>
/// <returns type = "linkflyscroll"/>
if (typeof (dom) === 'string') {
dom = document.getElementById (dom);
-
// ไม่ระบุ DOM และไม่พบ DOM ที่ถูกต้อง
// linkflyscroll (""), linkflyscroll (null), linkflyscroll (ไม่ได้กำหนด)
if (! dom ||! dom.nodeType)
คืนสิ่งนี้;
// สร้างวัตถุคอนเทนเนอร์
var scrollobj = document.createElement ('div');
// วัตถุเนื้อหาถูกโคลนอย่างลึกซึ้งและไม่มีเหตุการณ์ดังนั้นคุณต้องรอจนกว่าวัตถุ LinkFlyscroll จะทำงานเสร็จก่อนที่คุณจะสามารถผูกเหตุการณ์กับวัตถุ DOM ได้
var cloneobj = dom.clonenode (จริง);
Scrollobj.className = 'rolldiv';
Scrollobj.AppendChild (Cloneobj);
// แทนที่วัตถุปัจจุบันบนหน้า
dom.parentnode.replacechild (Scrollobj, Dom);
ส่งคืน linkflyscroll.prototype.init ใหม่ (Scrollobj, ตัวเลือก? ตัวเลือก: {});
-
linkflyscroll.prototype.init = function (dom, ตัวเลือก) {
/// <summary>
/// 1: วัตถุนี้เป็นวัตถุจริง วิธีการทำงานพิเศษเป็นเพราะอาจมีการโทรแบบคงที่และการโทรแบบอินสแตนซ์ของ linkflyscroll
/// 1.1 - init (DOM, ตัวเลือก) - สร้างวัตถุแถบเลื่อนบน DOM ที่ระบุ
/// </summary>
/// <param name = "dom" type = "element">
/// วัตถุ DOM
/// </param>
/// <param name = "ตัวเลือก" type = "json">
/// ปรับแต่งรูปแบบการทำงานของวัตถุนี้ด้วยตัวเลือกต่อไปนี้:
/// [ไม่บังคับ] auto (บูลีน): เมื่อเนื้อหาไม่ถึงความสูงของคอนเทนเนอร์แถบเลื่อนจะถูกซ่อนโดยอัตโนมัติหรือไม่? ค่าเริ่มต้นเป็นจริง (ใช่)
/// [ไม่บังคับ] ความสูง (int หรือสตริง): หน่วยเริ่มต้นคือ PX ซึ่งสามารถเป็น int และสตริง หากค่าเป็นอัตโนมัติความสูงของ CSS จะถูกใช้โดยค่าเริ่มต้น
/// [ตัวเลือก] ความกว้าง (int หรือสตริง): หน่วยเริ่มต้นคือ PX ซึ่งสามารถเป็น int และสตริง หากค่าเป็นอัตโนมัติความกว้างของ CSS จะถูกใช้โดยค่าเริ่มต้น
/// </param>
/// <returns type = "linkflyscroll"/>
-
* วัตถุนี้มีคุณสมบัติต่อไปนี้:
* isdrag: แถบเลื่อนที่ถูกลาก
* starttop: (ทำงาน) แถบเลื่อนเริ่มตำแหน่งเลื่อนตำแหน่ง
* endtop: (ทำงาน) ตำแหน่งเลื่อนแถบเลื่อนตำแหน่ง
* Toplimit: ตำแหน่งขีด จำกัด ด้านบนของแถบเลื่อน
* BottomLimit: ตำแหน่งขีด จำกัด ที่ด้านล่างของแถบเลื่อน
* บริบท: เนื้อหา DOM
* Scrollradix: การเลื่อน cardinality
* เป้าหมาย: คอนเทนเนอร์ DOM
-
// ปัจจุบันวัตถุนี้เพื่อป้องกันไม่ให้ตัวชี้นี้เปลี่ยนบ่อยในสภาพแวดล้อม (ตัวอย่างเช่นเมื่อมีผลผูกพัน) บันทึกวัตถุปัจจุบัน
var currscroll = this;
// domelement
if (dom.NodeType) {
// บันทึกคอนเทนเนอร์และเนื้อหา DOM
currscroll.target = dom;
currscroll.context = dom.firstchild;
// พารามิเตอร์การกำหนดค่ารวม
currscroll.options = tool.extend (config, ตัวเลือก);
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);
-
// ค้นหา dom ที่ถูกต้อง
ในขณะที่ (currscroll.context.nodeType! = 1) {
currscroll.context = currscroll.context.nextsibling;
-
// สร้างแถบเลื่อน DOM
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 = 'ญาติ';
// นำเสนอบนหน้าก่อนที่คุณจะสามารถอ่านข้อมูลตำแหน่ง
dom.appendchild (currscroll.scrollul);
this.change ();
tool.addscrollevent (currscroll.context, function (e) {
// ผูกเหตุการณ์ล้อเมาส์, ชุดเลื่อน 3px
if (e.wheel> 0) {// ล้อเลื่อนเลื่อนขึ้นไปด้านบน
var currtop = currscroll.endtop -= 3;
currscroll.scrollevent.call (currscroll, currtop);
} else {// ล้อเลื่อนเลื่อนลง
var currtop = currscroll.endtop += 3;
currscroll.scrollevent.call (currscroll, currtop);
-
-
// ข้อความที่ต้องห้ามถูกเลือกเมื่อลากสิ่งที่ต้องทำ
// คลิกเหตุการณ์ใต้เมาส์และคุณต้องพิจารณาว่าเป็นการคลิกซ้ายหรือไม่ ปัจจุบันคลิกขวาที่จะตระหนักถึงการเลื่อนสิ่งที่ต้องทำ
tool.addevent (currscroll.scrollul, 'mousedown', ฟังก์ชั่น (e) {
mousedown.call (currscroll, e);
-
// เพิ่มกิจกรรมเพื่อใช้การตรวจสอบบนร่างกายเพื่อประสบการณ์การใช้งานที่ดีขึ้น
tool.addevent (document.body, 'mousemove', ฟังก์ชั่น (e) {
if (currscroll.isdrag) {
// รับตำแหน่งเมาส์ปัจจุบัน
ตำแหน่ง var = tool.getMousepos (e);
// ตำแหน่งด้านบนของแถบเลื่อนปัจจุบัน
var currtop = (currscroll.endtop + position.y - currscroll.starttop);
// การโทรคือการทำให้ตัวชี้นี้ชี้ไปที่วัตถุที่ใช้งานนี้ได้อย่างถูกต้อง
currscroll.scrollevent.call (currscroll, currtop);
-
กลับเท็จ;
-
// เพิ่มเหตุการณ์การเปิดตัวเมาส์และฟังร่างกายเพื่อจับเหตุการณ์การวางจำหน่ายอย่างถูกต้อง
tool.addevent (document.body, 'mouseup', function () {
mouseup.call (Currscroll, []);
-
var mousedown = function (e) {
/// <summary>
/// 1: เหตุการณ์การกดเมาส์
/// 1.1 - Mousedown (E) - เหตุการณ์ Mousedown ใน Scrollbar Press
/// </summary>
/// <param name = "e" type = "Event">
/// วัตถุเหตุการณ์
/// </param>
/// <returns type = "linkflyscroll"/>
currscroll.isdrag = true;
// รับตำแหน่งเมาส์ปัจจุบัน
currscroll.starttop = tool.getMousepos (e) .y;
tool.addclass (currscroll.scrollul, 'lf_scrollfocus');
กลับเท็จ;
-
var mouseup = function () {
/// <summary>
/// 1: เหตุการณ์การเปิดตัวเมาส์
/// 1.1 - MouseUp () - MouseUp () - เหตุการณ์แถบเลื่อนในแถบเลื่อน
/// </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');
กลับเท็จ;
-
currscroll.scrollevent = function (currtop) {
/// <summary>
/// 1: เหตุการณ์เลื่อน (แกน) เพียงแค่ผ่านในพิกัดที่ต้องเลื่อน (แถบเลื่อนด้านบน)
/// 1.1 - Scrollevent (Currtop) - Core Scroll Event
/// </summary>
/// <param name = "currtop" type = "int">
/// ค่าสูงสุดของด้านบนของแถบเลื่อนมาจากชั้นก่อนหน้าของคอนเทนเนอร์
/// </param>
/// <returns type = "void"/>
if (currtop <= currscroll.toplimit || currtop <0) {// ขีด จำกัด ด้านบน
currtop = currscroll.toplimit;
} อื่นถ้า (currtop> = currscroll.bottomlimit) {// ขีด จำกัด ล่าง
currtop = currscroll.bottomLimit;
-
// เอฟเฟกต์ชดเชยแถบเลื่อน
currscroll.scrollul.style.top = currtop + 'px';
var temptop = parseInt (currscroll.context.style.top? currscroll.context.style.top: 0);
// รหัสดีบัก
// document.getElementById ('postioninfo'). innerhtml = 'currtop:' + currtop + 'การเลื่อน cardinality:' + currscroll.scrollradix + 'bottomlimit:' + currscroll.bottomlimit + 'endtop:' + currscroll. Currtop + "Offsettop:" + currscroll.scrollul.offsettop + "คำนวณ:" + (currtop * currscroll.scrollradix * -1) + 'px';
// รหัสข้อความ
// การเลื่อนเนื้อหา: แถบเลื่อนปัจจุบัน* Cardinality ใช้จำนวนลบ
currscroll.context.style.top = currtop * currscroll.scrollradix * -1 + 'px';
-
ส่งคืน currscroll;
-
-
linkflyscroll.prototype.init.prototype.change = function () {
/// <summary>
/// 1: เปลี่ยนฟังก์ชั่นของเนื้อหาแถบเลื่อน
/// 1.1 - เปลี่ยน () - ฟังก์ชั่นนี้แสดงถึงข้อมูลที่รีเฟรชวัตถุแถบเลื่อนนี้ ในบางกรณีข้อมูลของเนื้อหามีการเปลี่ยนแปลงอยู่ตลอดเวลา คุณสามารถเรียกฟังก์ชั่นนี้เพื่อรีเฟรชข้อมูลไปยังวัตถุแถบเลื่อนปัจจุบัน
/// </summary>
/// <returns type = "linkflyscroll"/>
-
* คุณสมบัติที่มีอยู่ใน LinkFlyscroll ส่วนใหญ่จะเริ่มต้นหรือนิยามใหม่ในฟังก์ชั่นนี้:
* isdrag: แถบเลื่อนที่ถูกลาก
* starttop: (ทำงาน) แถบเลื่อนเริ่มตำแหน่งเลื่อนตำแหน่ง
* endtop: (ทำงาน) ตำแหน่งเลื่อนแถบเลื่อนตำแหน่ง
* Toplimit: ตำแหน่งขีด จำกัด ด้านบนของแถบเลื่อน
* BottomLimit: ตำแหน่งขีด จำกัด ที่ด้านล่างของแถบเลื่อน
* บริบท: เนื้อหา DOM
* Scrollradix: การเลื่อน cardinality
* เป้าหมาย: คอนเทนเนอร์ DOM
-
// รีเซ็ตหรืออ่านชุดข้อมูล
var currscroll = this;
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;
// รับความสูงของแถบเลื่อน: ความสูงของเนื้อหา* (ความสูงของคอนเทนเนอร์/ความสูงของเนื้อหา = คอนเทนเนอร์เป็นเปอร์เซ็นต์ของเนื้อหา)
var scrollpx = currscroll.target.clientheight * (currscroll.target.clientheight / currscroll.context.offsetheight);
// ความสูงของแถบเลื่อน
currscroll.scrollul.childnodes [1] .style.height = scrollpx + 'px';
if (currscroll.context.clientheight <= currscroll.target.clientheight && currscroll.options.auto) {
currscroll.scrollul.style.display = 'ไม่มี';
} อื่น {
currscroll.scrollul.style.display = 'block';
// เมื่อแถบเลื่อนแสดงให้แก้ไขข้อมูลตำแหน่งสูงสุด
currscroll.bottomlimit -= currscroll.scrollul.offsetheight;
-
// ตั้งค่าการเลื่อน cardinality ของแถบเลื่อน (แถบเลื่อนไม่เลื่อนเนื้อหา 1px pixel การเลื่อน): (ความสูงของเนื้อหา - ความสูงของคอนเทนเนอร์ [เนื่องจากคอนเทนเนอร์ปัจจุบันได้รับการแสดงสำหรับหนึ่งหน้าจอ])/แถบเลื่อน (แถบเลื่อนว่างเปล่าและสามารถเลื่อนได้)
currscroll.scrollradix = (currscroll.context.offsetheight - currscroll.target.clientheight) / currscroll.bottomlimit;
ส่งคืน currscroll;
-
linkflyscroll.prototype.init.prototype.roll = function (value) {
/// <summary>
/// 1: วิธีชดเชยแถบเลื่อน
/// 1.1 - ม้วน (ค่า) - วิธีการเลื่อนแถบเลื่อน
/// </summary>
/// <param name = "value" type = "int">
/// เปอร์เซ็นต์ของเป้าหมายการเลื่อน
/// </param>
/// <returns type = "linkflyscroll"/>
var currscroll = this;
if (typeof (value)! == 'number') {
ส่งคืน currscroll;
-
var currtop = (currscroll.bottomlimit - currscroll.toplimit) * value / 100;
currscroll.scrollevent (currtop);
currscroll.endtop = currtop;
ส่งคืน currscroll;
-
-
* เครื่องมือ
-
var tool = {
setClass: function (element, className) {
/// <summary>
/// 1: ตั้งค่าแอตทริบิวต์คลาสของโหนดองค์ประกอบ
/// 1.1 - SetClass (Element, className) - ตั้งค่าแอตทริบิวต์คลาสของโหนดองค์ประกอบ หากไม่มีโหนดดังกล่าวให้สร้างโหนดและส่งคืนวัตถุโหนดที่แก้ไขแล้ว
/// </summary>
/// <param name = "element" type = "องค์ประกอบหรือสตริง">
/// สร้างโหนดโดยผ่านสตริงมิฉะนั้นแก้ไขโหนด
/// </param>
/// <param name = "className" type = "String">
/// ชื่อคลาส
/// </param>
/// <returns type = "element"/>>>>
if (typeof element === 'string') {
element = document.createElement (องค์ประกอบ);
-
element.className = className;
องค์ประกอบกลับ;
-
hasclass: ฟังก์ชั่น (element, classname) {
/// <summary>
/// 1: พิจารณาว่าองค์ประกอบมีคลาสหรือไม่
/// 1.1 - Hasclass (Element, className) - กำหนดว่าองค์ประกอบมีคลาสข้อยกเว้นในธุรกิจ (โดยทั่วไปไม่มีสถานการณ์ดังกล่าว) และคลาสมีความจริงหรือไม่
/// </summary>
/// <param name = "element" type = "องค์ประกอบหรือสตริง">
/// วัตถุโหนด
/// </param>
/// <param name = "className" type = "String">
/// ชื่อคลาส
/// </param>
/// <returns type = "element"/>>>>
if (! องค์ประกอบ || element.nodeType! == 1) // ปล่อยให้ข้อยกเว้นผ่านและไม่มีการประมวลผลใด ๆ ข้างนอก
กลับมาจริง;
var elementClassName = element.className;
if (ElementClassName.Length <1) {
กลับเท็จ;
-
if (ElementClassName == className || elementClassName.match (ใหม่ regexp ("(^| // s)" + classname + "(// s | $)"
กลับมาจริง;
-
กลับเท็จ;
-
AddClass: function (element, className) {
/// <summary>
/// 1: [เพิ่ม] คลาสสำหรับองค์ประกอบ
/// 1.1 - AddClass (Element, className) - ผนวกเข้ากับองค์ประกอบและส่งคืนคลาสที่แก้ไขแล้ว
/// </summary>
/// <param name = "element" type = "องค์ประกอบหรือสตริง">
/// วัตถุโหนด
/// </param>
/// <param name = "className" type = "String">
/// ชื่อคลาส
/// </param>
/// <returns type = "element"/>>>>
if (! tool.hasclass (element, classname)) {
if (element.classname.length <1) {
element.className = className;
} อื่น {
element.className + = '' + className;
-
-
องค์ประกอบกลับ;
-
RemoveClass: function (element, className) {
/// <summary>
/// 1: ลบคลาสสำหรับองค์ประกอบ
/// 1.1 - AddClass (Element, className) - ลบคลาสสำหรับองค์ประกอบและส่งคืนคลาสที่แก้ไขแล้ว
/// </summary>
/// <param name = "element" type = "องค์ประกอบหรือสตริง">
/// วัตถุโหนด
/// </param>
/// <param name = "className" type = "String">
/// ชื่อคลาส
/// </param>
/// <returns type = "element"/>>>>
if (tool.hasclass (element, classname)) {
var reg = ใหม่ regexp ("(^| // s)" + classname + "(// s | $)");
element.className = element.className.replace (reg, '');
-
องค์ประกอบกลับ;
-
CSS: ฟังก์ชั่น (องค์ประกอบ, คีย์) {
/// <summary>
/// 1: รับค่าแอตทริบิวต์ที่ระบุโดยองค์ประกอบ CSS
/// 1.1 - CSS (Element, className) - รับค่าแอตทริบิวต์ที่ระบุโดยองค์ประกอบ CSS
/// </summary>
/// <param name = "element" type = "องค์ประกอบหรือสตริง">
/// วัตถุโหนด
/// </param>
/// <param name = "key" type = "String">
/// แอตทริบิวต์ CSS ที่จะได้รับ
/// </param>
/// <returns type = "String"/> >>
return element.currentstyle? element.currentstyle [key]: document.defaultView.getComputedStyle (องค์ประกอบ, เท็จ) [คีย์];
-
AddEvent: ฟังก์ชั่น (องค์ประกอบ, ประเภท, fn) {
/// <summary>
/// 1: ผนวกเหตุการณ์กับองค์ประกอบ
/// 1.1 - CSS (องค์ประกอบ, ประเภท, FN) - ผนวกเหตุการณ์กับองค์ประกอบจุดนี้ไปยังแหล่งเหตุการณ์ในฟังก์ชัน
/// </summary>
/// <param name = "element" type = "องค์ประกอบหรือสตริง">
/// วัตถุโหนด
/// </param>
/// <param name = "type" type = "String">
/// ผนวกชื่อเหตุการณ์โดยไม่มีอักขระบน
/// </param>
/// <param name = "fn" type = "function">
/// วัตถุเหตุการณ์
/// </param>
/// <returns type = "void"/>
if (element.attachevent) {
องค์ประกอบ ['e' + type + fn] = fn;
องค์ประกอบ [type + fn] = function () {องค์ประกอบ ['e' + type + fn] (window.event); -
element.attachevent ('on' + type, element [type + fn]);
} อื่นถ้า (element.addeventListener) {
element.addeventListener (ประเภท, fn, false);
-
-
// removeEvent: ฟังก์ชั่น (องค์ประกอบ, ประเภท, fn) {
// /// <summary>
// /// 1: ลบเหตุการณ์สำหรับองค์ประกอบฟังก์ชั่นนี้ไม่ได้ใช้งาน
// /// 1.1 - remverevent (องค์ประกอบ, ประเภท, fn) - ลบเหตุการณ์สำหรับองค์ประกอบ
// /// </summary>
// /// <param name = "element" type = "องค์ประกอบหรือสตริง">
// /// วัตถุโหนด
// /// </param>
// /// <param name = "type" type = "String">
// /// ชื่อเหตุการณ์ที่ถูกลบ
// /// </param>
// /// <param name = "key" type = "String">
// /// ชื่อฟังก์ชันของเหตุการณ์ที่ถูกลบ
// /// </param>
// /// <returns type = "void"/>
// ถ้า (element.detachevent) {
// element.detachevent ('on' + type, องค์ประกอบ [type + fn]);
// องค์ประกอบ [type + fn] = null;
//} อื่นถ้า (element.removeEventListener) {
// element.removeeVentListener (ประเภท, fn, false);
-
-
addScrollevent: ฟังก์ชั่น (องค์ประกอบ, fn) {
/// <summary>
/// 1: ผนวกเหตุการณ์ Scrollevent
/// 1.1 - AddScrollevent (Element, FN) - ผนวกเหตุการณ์ Scrollevent เข้ากับองค์ประกอบ (กิจกรรมพิเศษ, เหตุการณ์ Mouse Wheel Scroll on Element)
/// </summary>
/// <param name = "element" type = "องค์ประกอบหรือสตริง">
/// โหนดองค์ประกอบ
/// </param>
/// <param name = "fn" type = "function">
/// วิธีการจัดกิจกรรม
/// </param>
/// <returns type = "void"/>
var bindscrollfn = function (e) {
E = E || window.event;
// ตัดสินทิศทางการเลื่อนของล้อเลื่อน: Firefox นั้นแตกต่างจากเบราว์เซอร์อื่น ๆ
E.wheel = (E.wheeldelta? e.wheeldelta: -e.detail)> 0? 1: -1; // ตัดสินล้อเมาส์คว่ำโดยเหตุการณ์ 1 ขึ้นไปและ -1 ลดลง
// บล็อกพฤติกรรมเริ่มต้นของเบราว์เซอร์
if (e.preventDefault) {// ff
E.preventDefault ();
} อื่น {
E.returnValue = FALSE; //เช่น
-
fn.call (องค์ประกอบ, e);
-
if (document.addeventListener) {
// ff
Element.addeventListener ('Dommousescroll', bindscrollfn, false);
// w3c
Element.addeventListener ('Mousewheel', bindscrollfn, false);
} อื่น // เช่น
-
Element.attachevent ('Onmousewheel', bindscrollfn);
-
-
getEvent: function () {
/// <summary>
/// 1: รับวัตถุเหตุการณ์
/// 1.1 - getEvent () - รับวัตถุเหตุการณ์โดยไม่มีพารามิเตอร์ในขณะที่ความเข้ากันได้จัดการ IE และ FF
/// </summary>
/// <returns type = "Event"/> >>
if (document.all) {
กลับไปที่หน้าต่าง event;
-
func = getEvent.Caller;
ในขณะที่ (func! = null) {
var arg0 = func.arguments [0];
ถ้า (arg0) {
if ((arg0.constructor == เหตุการณ์ || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventdefault && arg0.stoppropagation)) {
กลับ arg0;
-
-
func = func.caller;
-
คืนค่า null;
-
getMousepos: ฟังก์ชั่น (ev) {
/// <summary>
/// 1: รับพิกัดเมาส์ปัจจุบัน
/// 1.1 - GetMousePos (EV) - รับพิกัดเมาส์ปัจจุบันการประมวลผลความเข้ากันได้และรูปแบบวัตถุที่ส่งคืน: {X: Mouse X พิกัด, Y: Mouse Y Coordinates}
/// </summary>
/// <param name = "ev" type = "event">
/// วัตถุเหตุการณ์เหตุการณ์
/// </param>
/// <returns type = "json"/>>
ถ้า (! ev) {
ev = currscroll.getEvent ();
-
if (ev.pagex || ev.pagey) {
กลับ {
x: ev.pagex,
y: ev.pagey
-
-
if (document.documentElement && document.documentelement.scrolltop) {
กลับ {
x: ev.clientx + document.documentelement.scrollleft - document.documentelement.clientleft,
y: ev.clienty + document.documentelement.scrolltop - document.documentelement.clienttop
-
-
อื่นถ้า (document.body) {
กลับ {
x: ev.clientx + document.body.scrollleft - document.body.clientleft,
y: ev.clienty + document.body.scrolltop - document.body.clienttop
-
-
-
ขยาย: ฟังก์ชั่น (oldobj, newobj) {
/// <summary>
/// 1: รวมวัตถุสองชิ้น
/// 1.1 - ขยาย (oldobj, newobj) - ผสานวัตถุสองชิ้นและส่งคืนวัตถุที่ผสานนำไปใช้ในโคลนดังนั้นมันจะไม่มีผลกระทบใด ๆ กับวัตถุทั้งสอง
/// </summary>
/// <param name = "oldobj" type = "object">
/// Object A เพื่อรวมเข้าด้วยกันซึ่งใช้เป็นวัตถุพื้นฐานเขียนทับแอตทริบิวต์ของชื่อเดียวกันของวัตถุใหม่ลงในวัตถุพื้นฐาน
/// </param>
/// <param name = "newObj" type = "object">
/// วัตถุ B ที่จะรวม
/// </param>
/// <returns type = "object"/>>>
var tempobj = tool.clone (oldobj);
สำหรับ (คีย์ var ใน newobj) {
if (newobj.hasownproperty (คีย์) &&! tempobj.hasownproperty (คีย์)) {
tempobj [key] = newobj [คีย์];
-
-
กลับ tempobj;
-
โคลน: ฟังก์ชั่น (obj) {
/// <summary>
/// 1: การโคลนนิ่งวัตถุ
/// 1.1 - โคลน (OBJ) - โคลนวัตถุและส่งคืนวัตถุใหม่ที่โคลน ต้นแบบของวัตถุคือวัตถุโคลน
/// </summary>
/// <param name = "obj" type = "object">
/// วัตถุที่จะโคลน
/// </param>
/// <returns type = "object"/>>>
ฟังก์ชั่นโคลน () {}
clone.prototype = obj;
var newobj = new clone ();
สำหรับ (คีย์ var ใน newobj) {
if (typeof newobj [key] == "Object") {
newobj [key] = tool.clone (newobj [key]);
-
-
คืน Newobj;
-
convertValue: ฟังก์ชัน (ค่า) {
/// <summary>
/// 1: แปลงค่าเป็นค่าที่ถูกต้อง
/// 1.1 - ConvertValue (ค่า) - แปลงค่า CSS ที่กำหนดค่าโดย JSON เป็นค่าที่ถูกต้องโปรดตรวจสอบให้แน่ใจว่าค่าของค่าไม่ใช่ "อัตโนมัติ"
/// </summary>
/// <param name = "value" type = "Object">
/// ค่าที่จะแปลง
/// </param>
/// <returns type = "object"/>>>
var reg =/^/d+$/g;
if (typeof (value) === 'number' || reg.test (value)) {
ส่งคืนค่า + 'px';
} อื่น
ค่าส่งคืน;
-
-
// ลงทะเบียนไปยังหน้าต่าง
window.linkflyscroll = linkflyscroll;
// ลงทะเบียนในหน้าต่างดังนั้นเนมสเปซ
ถ้า (! window.so) {
window.so = {};
-
window.so.scroll = window.linkflyscroll;
})(หน้าต่าง);
ตัวอย่างรหัส
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // 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"/>
<script src = "linkflyscroll/linkflyscroll-1.0.0.js" type = "text/javascript"> </script>
<script type = "text/javascript">
window.onload = function () {
var config = {
อัตโนมัติ: จริง // เมื่อเนื้อหาไม่ถึงความสูงของคอนเทนเนอร์แถบเลื่อนจะถูกซ่อนโดยอัตโนมัติ
ความสูง: '100', // ความสูงในการทำงานของวัตถุแถบเลื่อน (แถบเลื่อนจะปรากฏขึ้นหากเกินความสูงนี้) อัตโนมัติจะได้รับความสูงปัจจุบันของวัตถุ
ความกว้าง: 'auto' // วัตถุแถบเลื่อนความกว้างการทำงาน
-
var scrollobj = so.scroll ('obj', config);
// scrollobj.change (); // เมื่อเนื้อหา scrollbar เปลี่ยน
// scrollobj.roll (value); // วางตำแหน่งแถบเลื่อนไปยังจุดหนึ่งค่าคือเปอร์เซ็นต์ที่สัมพันธ์กับวัตถุแถบเลื่อน
-
</script>
</head>
<body>
<div id = "obj">
<div>
ในปัจจุบัน "รูปแบบแฟชั่น" ใหม่กำลังเกิดขึ้นในด้านการจัดการองค์กรและ บริษัท ยักษ์บางแห่งกำลัง "ลดขนาดลง" เพื่อตัวเองและเปลี่ยนเป็นธุรกิจที่ชาญฉลาดและคล่องตัวมากขึ้น เป็นที่เข้าใจกันว่า Oracle Software กำลังเปลี่ยนต้นทุนการบำรุงรักษาหลักของลูกค้าให้เป็นที่ปรึกษาและซัพพลายเออร์บุคคลที่สามมากขึ้น
“ ในประเทศจีน 90% ของธุรกิจของ Oracle ดำเนินการผ่านพันธมิตรเหล่านี้นอกจากนี้เพื่อให้แน่ใจว่ารายได้ของ Oracle ซีอีโอเอลลิสันยังซื้อเกาะเล็ก ๆ ในฮาวายด้วย” Craig Guarente กล่าว
ในฐานะรองประธานระดับโลก Guarente ตระหนักดีถึงกลยุทธ์ของ Oracle Guarente มีประสบการณ์การทำงาน 16 ปีและมีประสบการณ์มากมายในการจัดการสัญญาการจัดการใบอนุญาตซอฟต์แวร์และการตรวจสอบซอฟต์แวร์ หลังจากออกจาก Oracle ในปี 2011 เขาได้เข้าร่วม Palisade ซึ่งธุรกิจหลักคือการช่วยลูกค้า Oracle ให้การทำสัญญาซอฟต์แวร์การแทรกแซงการตรวจสอบและ "การเพิ่มประสิทธิภาพ"
Guarente กล่าวว่าธุรกิจของ Palisade กำลังพัฒนาอย่างรวดเร็ว ในฐานะองค์กรของบุคคลที่สาม Palisade ช่วยให้ลูกค้าได้รับคำสั่งซื้อจำนวนมากเพราะอยู่ใกล้กับตลาดมากขึ้นและสามารถเข้าใจความต้องการของผู้ใช้ได้อย่างแม่นยำยิ่งขึ้น
โดยทั่วไป บริษัท ที่ปรึกษาช่วยให้ลูกค้าตอบสนองความต้องการที่แท้จริงของพวกเขาและสิ่งที่ให้ความสำคัญกับซอฟต์แวร์ที่สามารถให้ได้ Guarente ให้คำอธิบายโดยละเอียดผ่านการปฏิบัติงานจริง ตัวอย่างเช่น "หากคุณต้องการสร้างศูนย์ข้อมูลใหม่เปิดแผนการกู้คืนภัยพิบัติใหม่หรือหากคุณต้องการเข้าสู่ระบบคลาวด์ บริษัท บุคคลที่สามจะพัฒนาแผนที่การวางแผนเป็นอันดับแรกและในที่สุดก็นำไปใช้เพื่อให้บรรลุเป้าหมายสูงสุดของผู้ใช้ ผู้ดูแลระบบฐานข้อมูลสามารถวินิจฉัยปัญหาฐานข้อมูลผ่านรายงานการโหลดอัตโนมัติ (AWR)
ในช่วงไม่กี่ปีที่ผ่านมาด้วยการเพิ่มขึ้นของคลื่นการตรวจสอบซอฟต์แวร์หลาย บริษัท กำลังติดตั้งเครื่องมือการจัดการสินทรัพย์ซอฟต์แวร์เพื่อพิจารณาว่าพวกเขาใช้ซอฟต์แวร์ใดระยะเวลานานเท่าใดและมีกี่คนใน บริษัท ที่ใช้งาน แต่นักวิเคราะห์ผู้บริหารระดับสูง Hegedus กล่าวว่า: "ไม่มีเครื่องมือใดที่สามารถเข้าใจกฎขององค์กรได้อย่างถูกต้องโดยเฉพาะแอปพลิเคชันผลิตภัณฑ์ของ Oracle และองค์กรบุคคลที่สามมืออาชีพจำเป็นต้องช่วยให้ผู้ใช้เข้าใจกฎซอฟต์แวร์"
ดังนั้นฉันจะแก้ไขแอพพลิเคชั่นซอฟต์แวร์ของ Oracle ได้อย่างไร Mark Hurd ประธานาธิบดี Oracle กล่าวเมื่อสัปดาห์ที่แล้วว่าในตอนต้นของแอปพลิเคชันองค์กรสถาบันบุคคลที่สามควรถูกกำหนดให้เป็นผู้สนับสนุนบริการเพื่อให้ บริษัท สามารถรับการซ่อมแซมแพทช์ฟรีและการสนับสนุนอื่น ๆ ในอนาคตแทนที่จะซื้อสิทธิ์ในทรัพย์สินทางปัญญาของผลิตภัณฑ์ นอกจากนี้องค์กรควรใช้ที่ปรึกษาอย่างมีประสิทธิภาพเพื่อสนับสนุนขั้นตอนแรกในการควบคุมต้นทุนเมื่อเข้าใจว่าซอฟต์แวร์ที่องค์กรใช้และข้อตกลงควรรวมอะไร อย่าปล่อยให้ซัพพลายเออร์ซอฟต์แวร์และซื้อซอฟต์แวร์อย่างสุ่มสี่สุ่มห้าตามกระบวนการคาดการณ์และการคาดเดาของคุณ
</div>
</div>
</body>
</html>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้และคำอธิบายมีรายละเอียดมาก ฉันหวังว่าคุณจะชอบมัน