هذا هو الكود المصدري للمكون الإضافي JS Scrolling الذي كتبته خلال العام الصيني الجديد. أنا لست راضيا عن نتائج النتائج. عدت لتوحيد وتعلم 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 {cursor: pointer ؛ العرض: 10px ؛ الموقف: مطلق ؛ اليمين: 0 ؛ أعلى: 0 ؛ مرشح: ألفا (عتامة = 50) ؛ -الموز سعة: 0.5 ؛ khtml opacity: 0.5 ؛ العتامة: 0.5 ؛ }
.lf_scrollfocus {filter: alpha (التعتيم = 100) ؛ -Moz-opacity: 1 ؛ -Khtml opacity: 1 ؛ العتامة: 1 ؛ }
.lfs_top ، .lfs_center ، .lfs_bottom {background: url ('scrollbar.gif') ؛ العرض: 10px ؛ الارتفاع: 10 بكسل ؛ }
.lfs_top {background-position: 1px 0px ؛ }
.lfs_center {background-position: center 0 ؛ الارتفاع: 100px ؛ }
.lfs_bottom {background -position: -22px 0 ؛ }
/*المطورين تكوين*/
.rolldiv {الارتفاع: 100 ٪ ؛ العرض: 100 ٪ ؛ الفائض: مخفي. الموقف: قريب }
جافا سكريبت
نسخة الكود كما يلي:
/*
* يتم تعريف هذا البرنامج المساعد على شريط التمرير لصفحة الويب المحاكاة ، يرجى إدخاله بعد الربط لأحداث DOM
*
* إصدار التعليق: 1.0.0
* المؤلف: Linkfly
* سينا: ركز على نصف قرن لك | 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 = {
السيارات: صحيح ،
الارتفاع: 'Auto' ،
العرض: 'Auto'
} ؛
var linkflyscroll = function (DOM ، Options) {
/// <summary>
.
/// 1.1 - LinkFlysCroll (DOM) - إنشاء كائن شريط التمرير على DOM المحدد
/// 1.2 - LinkFlyScroll (DOM ، Options) - قم بإنشاء كائنات شريط التمرير ، وتوفير سلسلة من المعلمات التي تسمح لك بتخصيص نموذج العمل لتكوين الكائن.
/// </summary>
/// <param name = "dom" type = "string or element">
/// تمرير في كائن JS DOM ، أو معرف كائن سلسلة النوع
/// </param>
/// <param name = "Options" type = "json">
/// تخصيص نموذج العمل لهذا الكائن ، مع الخيارات التالية:
/// [اختياري] تلقائي (منطقي): عندما لا يصل المحتوى إلى ارتفاع الحاوية ، هل سيتم إخفاء شريط التمرير تلقائيًا؟ الافتراضي صحيح (نعم)
/// [اختياري] الارتفاع (int أو السلسلة): الوحدة الافتراضية هي px ، والتي يمكن أن تكون int و string. إذا كانت القيمة تلقائية ، يتم استخدام ارتفاع CSS افتراضيًا.
/// [اختياري] العرض (int أو السلسلة): الوحدة الافتراضية هي px ، والتي يمكن أن تكون int و string. إذا كانت القيمة تلقائية ، يتم استخدام عرض CSS افتراضيًا.
/// </param>
/// <إرجاع 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 (true) ؛
scrollobj.className = 'Rolldiv' ؛
scrollobj.appendchild (cloneobj) ؛
// استبدل الكائن الحالي على الصفحة
dom.parentnode.replacechild (Scrollobj ، dom) ؛
إرجاع New LinkFlyScroll.prototype.init (ScrollObj ، الخيارات؟ الخيارات: {}) ؛
} ؛
linkflyscroll.prototype.init = function (DOM ، الخيارات) {
/// <summary>
/// 1: هذا الكائن هو الكائن الحقيقي. الطريقة الخاصة للعمل هي أنه قد تكون هناك مكالمات ثابتة ومكالمات تم إنشاؤها من LinkFlyScroll
/// 1.1 - init (DOM ، Options) - إنشاء كائن شريط التمرير على DOM المحدد
/// </summary>
/// <param name = "dom" type = "element">
/// كائن DOM
/// </param>
/// <param name = "Options" type = "json">
/// تخصيص نموذج العمل لهذا الكائن ، مع الخيارات التالية:
/// [اختياري] تلقائي (منطقي): عندما لا يصل المحتوى إلى ارتفاع الحاوية ، هل سيتم إخفاء شريط التمرير تلقائيًا؟ الافتراضي صحيح (نعم)
/// [اختياري] الارتفاع (int أو السلسلة): الوحدة الافتراضية هي px ، والتي يمكن أن تكون int و string. إذا كانت القيمة تلقائية ، يتم استخدام ارتفاع CSS افتراضيًا.
/// [اختياري] العرض (int أو السلسلة): الوحدة الافتراضية هي px ، والتي يمكن أن تكون int و string. إذا كانت القيمة تلقائية ، يتم استخدام عرض CSS افتراضيًا.
/// </param>
/// <إرجاع type = "linkflyscroll"/>
/*
* يحتوي هذا الكائن على الخصائص التالية:
* isdrag: هل يتم سحب شريط التمرير
* STARTTOP: (عمل) شريط التمرير ابدأ في التمرير
* endtop: (عمل) Scroll Bar End Scroll Scroll
* Toplimit: وضع الحد الأعلى من شريط التمرير
* BottomLimit: موضع الحد في أسفل شريط التمرير
* السياق: المحتوى دوم
* Scrollradix: تمرير الأصل
* الهدف: حاوية دوم
*/
// التيار هذا الكائن ، من أجل منع هذا المؤشر من التغيير بشكل متكرر في البيئة (على سبيل المثال ، عند أحداث الربط) ، احفظ الكائن الحالي.
var currscroll = هذا ؛
// domelement
if (dom.nodeType) {
// حفظ الحاوية والمحتوى دوم
currscroll.target = dom ؛
currscroll.context = dom.firstchild ؛
// دمج معلمات التكوين
currscroll.options = tool.extend (التكوين ، الخيارات) ؛
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 ، الدالة (e) {
// inter mouse wheel event ، 3px leasing unit
إذا (E.Wheel> 0) {// تمرير عجلة التمرير للأعلى
var currtop = currscroll.endtop -= 3 ؛
currscroll.scrollevent.call (currscroll ، currtop) ؛
} آخر {// تمرير عجلة التمرير لأسفل
var currtop = currscroll.endtop += 3 ؛
currscroll.scrollevent.call (currscroll ، currtop) ؛
}
}) ؛
// يتم تحديد النص المحظور عند سحب TODO
// انقر فوق الحدث أسفل الماوس وتحتاج إلى تحديد ما إذا كان النقر اليسرى. حاليًا ، سوف يدرك النقر بزر الماوس الأيمن أيضًا التمرير.
tool.addevent (currscroll.scroll ، 'mousedown' ، function (e) {
mousedown.call (currscroll ، e) ؛
}) ؛
// إضافة أحداث لتنفيذ المراقبة على الجسم لتجربة مستخدم أفضل
tool.addevent (document.body ، 'mousemove' ، function (e) {
if (currscroll.isdrag) {
// احصل على موضع الماوس الحالي
var position = 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 في مطبعة شريط التمرير
/// </summary>
/// <param name = "e" type = "event">
/// كائن الحدث
/// </param>
/// <إرجاع type = "linkflyscroll"/>
currscroll.isdrag = صحيح ؛
// احصل على موضع الماوس الحالي
currscroll.startTop = tool.getMousepos (e) .y ؛
tool.addclass (currscroll.scrollul ، 'lf_scrollfocus') ؛
العودة كاذبة
} ؛
var mouseup = function () {
/// <summary>
/// 1: حدث إصدار الماوس
/// 1.1 - Mouseup () - Mouseup () - حدث إصدار شريط التمرير في شريط التمرير
/// </summary>
/// <إرجاع type = "linkflyscroll"/>
currscroll.isdrag = false ؛
currscroll.endtop = currscroll.scroll.style.top؟ Parseint (currscroll.scrollul.style.top): 0 ؛
tool.removeclass (currscroll.scrollUl ، 'lf_scrollfocus') ؛
العودة كاذبة
} ؛
currscroll.scrollevent = دالة (currtop) {
/// <summary>
/// 1: حدث التمرير (CORE) ، ما عليك سوى تمرير الإحداثيات التي يجب تمريرها (Scroll Bar Top)
/// 1.1 - تمثيل (Currtop) - حدث التمرير الأساسي
/// </summary>
/// <param name = "curtop" type = "int">
/// القيمة العلوية لأعلى شريط التمرير هي من الطبقة السابقة للحاوية
/// </param>
/// <إرجاع type = "void"/>
if (currtop <= currscroll.toplimit || currtop <0) {// limit top
currtop = currscroll.toplimit ؛
} آخر إذا (currtop> = currscroll.bottomlimit) {// الحد الأدنى
currtop = currscroll.bottomLimit ؛
}
// Scrollbar Effset Effect
currscroll.scroll.style.top = currtop + 'px' ؛
var temptop = parseint (currscroll.context.style.top؟ currscroll.context.style.top: 0) ؛
// رمز التصحيح
// document.getElementById ('postionInfo'). innerhtml = 'currtop:' + currtop + 'cardinality cardinality:' + currscroll.scrollradix + 'bottomlimit:' + currscroll.bottomlimit + 'endtop: curtop + "Offsettop:" + currscroll.scroll.offsettop + "compute:" + (currtop * currscroll.scrollradix * -1) + 'px' ؛
// رمز النص
// التمرير للمحتوى: يأخذ Cardinality Cardinity Top* Cardinality رقمًا سالبًا
currscroll.context.style.top = currtop * currscroll.scrollradix * -1 + 'px' ؛
} ؛
إرجاع currscroll ؛
} ؛
} ؛
linkflyscroll.prototype.init.prototype.Change = function () {
/// <summary>
/// 1: تغيير وظيفة محتوى شريط التمرير
/// 1.1 - تغيير () - تمثل هذه الوظيفة البيانات التي تعمل على تحديث كائن شريط التمرير هذا. في بعض الحالات ، تتغير بيانات المحتوى باستمرار. يمكنك استدعاء هذه الوظيفة لتحديث البيانات إلى كائن شريط التمرير الحالي.
/// </summary>
/// <إرجاع type = "linkflyscroll"/>
/*
* يتم تهيئة الخصائص الواردة في LinkFlysCroll بشكل رئيسي أو إعادة تعريفها في هذه الوظيفة:
* isdrag: هل يتم سحب شريط التمرير
* STARTTOP: (عمل) شريط التمرير ابدأ في التمرير
* endtop: (عمل) Scroll Bar End Scroll Scroll
* Toplimit: وضع الحد الأعلى من شريط التمرير
* BottomLimit: موضع الحد في أسفل شريط التمرير
* السياق: المحتوى دوم
* Scrollradix: تمرير الأصل
* الهدف: حاوية دوم
*/
// إعادة تعيين أو قراءة سلسلة من البيانات
var currscroll = هذا ؛
currscroll.isdrag = خطأ ،
currscroll.starttop = 0 ،
currscroll.endtop = (currscroll.scrollul.style.top؟ parseint (currscroll.scroll.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.scroll.style.display = 'none' ؛
} آخر {
currscroll.scrollul.style.display = 'block' ؛
// عند عرض شريط التمرير ، قم بتصحيح بيانات الموضع القصوى
currscroll.bottomlimit -= currscroll.scroll.offsetheight ؛
}
// قم بتعيين Cardinality 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>
/// <إرجاع type = "linkflyscroll"/>
var currscroll = هذا ؛
if (typeof (value)! == 'number') {
إرجاع currscroll ؛
}
var curtop = (currscroll.bottomlimit - currscroll.toplimit) * value / 100 ؛
currscroll.scrollevent (currtop) ؛
currscroll.endtop = currtop ؛
إرجاع currscroll ؛
} ؛
/*
* أدوات
*/
أداة var = {
setClass: Function (Element ، ClassName) {
/// <summary>
/// 1: اضبط سمة الفصل لعقدة العنصر
/// 1.1 - SetClass (العنصر ، className) - قم بتعيين سمة الفئة لعقدة العنصر. إذا لم تكن هناك عقدة من هذا القبيل ، فقم بإنشاء العقدة وأرجع كائن العقدة المعدلة
/// </summary>
/// <param name = "element" type = "element or string">
/// قم بإنشاء العقدة عن طريق تمرير سلسلة ، وإلا قم بتعديل العقدة
/// </param>
/// <param name = "className" type = "string">
/// اسم الفصل
/// </param>
/// <إرجاع type = "element"/>
if (typeof element === 'string') {
element = document.createElement (element) ؛
}
element.className = className ؛
عنصر العودة ؛
} ،
hasclass: وظيفة (العنصر ، className) {
/// <summary>
/// 1: تحديد ما إذا كان العنصر لديه فئة
.
/// </summary>
/// <param name = "element" type = "element or string">
/// كائن العقدة
/// </param>
/// <param name = "className" type = "string">
/// اسم الفصل
/// </param>
/// <إرجاع type = "element"/>
if (! element || element.nodeType! == 1) // دعنا تمرير الاستثناء ، ولا يتم إجراء أي معالجة في الخارج
العودة صحيح.
var elementClassName = element.className ؛
if (elementClassName.length <1) {
العودة كاذبة
}
if (elementClassName == className || elementClassName.match (new regexp ("(^| // s)" + className + "(// s | $)))) {
العودة صحيح.
}
العودة كاذبة
} ،
AddClass: Function (Element ، ClassName) {
/// <summary>
/// 1: [إضافة] فئة للعنصر
/// 1.1 - AddClass (العنصر ، className) - إلحاق العنصر وإرجاع الفئة المعدلة
/// </summary>
/// <param name = "element" type = "element or string">
/// كائن العقدة
/// </param>
/// <param name = "className" type = "string">
/// اسم الفصل
/// </param>
/// <إرجاع type = "element"/>
if (! tool.hasclass (العنصر ، className)) {
if (element.classname.length <1) {
element.className = className ؛
} آخر {
element.className + = '' + className ؛
}
}
عنصر العودة ؛
} ،
removeclass: function (element ، className) {
/// <summary>
/// 1: إزالة الفئة للعنصر
/// 1.1 - AddClass (العنصر ، className) - قم بإزالة الفئة للعنصر وإرجاع الفئة المعدلة
/// </summary>
/// <param name = "element" type = "element or string">
/// كائن العقدة
/// </param>
/// <param name = "className" type = "string">
/// اسم الفصل
/// </param>
/// <إرجاع type = "element"/>
if (tool.hasclass (العنصر ، className)) {
var reg = new regexp ("(^| // s)" + className + "(// s | $)") ؛
element.className = element.classname.replace (reg ، '') ؛
}
عنصر العودة ؛
} ،
CSS: وظيفة (عنصر ، مفتاح) {
/// <summary>
/// 1: احصل على قيمة السمة المحددة بواسطة العنصر CSS
/// 1.1 - CSS (العنصر ، className) - احصل على قيمة السمة المحددة بواسطة العنصر CSS
/// </summary>
/// <param name = "element" type = "element or string">
/// كائن العقدة
/// </param>
/// <param name = "key" type = "string">
/// سمة CSS للحصول عليها
/// </param>
/// <إرجاع type = "string"/>
إرجاع element.currentStyle؟ element.currentStyle [key]: document.defaultView.getComputedStyle (element ، false) [key] ؛
} ،
addevent: function (element ، type ، fn) {
/// <summary>
/// 1: إلحاق الأحداث بالعناصر
/// 1.1 - CSS (العنصر ، النوع ، FN) - إلحاق الأحداث بالعنصر ، هذه النقطة إلى مصدر الحدث في الوظيفة
/// </summary>
/// <param name = "element" type = "element or string">
/// كائن العقدة
/// </param>
/// <param name = "type" type = "string">
/// اسم الحدث ، بدون أحرف على
/// </param>
/// <param name = "fn" type = "function">
/// كائن الحدث
/// </param>
/// <إرجاع type = "void"/>
if (element.attachevent) {
element ['e' + type + fn] = fn ؛
element [type + fn] = function () {element ['e' + type + fn] (window.event) ؛ }
element.attachevent ('on' + type ، element [type + fn]) ؛
} آخر إذا (element.adDeventListener) {
element.addeventListener (النوع ، fn ، false) ؛
}
} ،
// removeEvent: function (element ، type ، fn) {
// /// <summary>
// /// 1: حذف الأحداث للعناصر ، لم يتم استخدام هذه الوظيفة
// /// 1.1 - إزالة (العنصر ، النوع ، FN) - إزالة الحدث للعنصر
// /// </summary>
// /// <param name = "element" type = "element أو string">
// /// كائن العقدة
// /// </param>
// /// <param name = "type" type = "string">
// ///deleded اسم الحدث
// /// </param>
// /// <param name = "key" type = "string">
// /// اسم وظيفة الحدث المحذوف
// /// </param>
// /// <إرجاع type = "void"/>
// if (element.detachevent) {
// element.detachevent ('on' + type ، element [type + fn]) ؛
// element [type + fn] = null ؛
//} آخر إذا (element.removeeventListener) {
// element.removeeventListener (type ، fn ، false) ؛
//}
//} ،
AddScrollevent: Function (element ، fn) {
/// <summary>
/// 1: إلحاق حدث Scrolevent
/// 1.1 - AddScrollevent (العنصر ، FN) - إلحاق حدث Scrolevent إلى Element (حدث خاص ، حدث تمرير عجلة الماوس على العنصر)
/// </summary>
/// <param name = "element" type = "element or string">
/// element عقدة
/// </param>
/// <param name = "fn" type = "function">
/// طريقة الحدث
/// </param>
/// <إرجاع 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 ('dommescroll' ، 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) {
إرجاع نافذة.
}
func = getevent.caller ؛
بينما (func! = null) {
var arg0 = funC.Arguments [0] ؛
إذا (arg0) {
if ((arg0.constructor == event || arg0.constructor == mouseevent) || (typeof (arg0) == "object"
إرجاع Arg0 ؛
}
}
func = func.caller ؛
}
العودة لاغية.
} ،
getMousepos: وظيفة (ev) {
/// <summary>
/// 1: احصل على إحداثيات الماوس الحالية
/// 1.1 - getMousepos (EV) - احصل على إحداثيات الماوس الحالية ومعالجة التوافق وتنسيق الكائن الذي تم إرجاعه: {x: mouse x إحداثيات ، y: mouse y إحداثيات}
/// </summary>
/// <param name = "ev" type = "event">
/// كائن الحدث
/// </param>
/// <إرجاع 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">
/// كائن A لدمج ، والذي يتم استخدامه ككائن أساسي ، يكتب فوق سمة نفس اسم الكائن الجديد في الكائن الأساسي
/// </param>
/// <param name = "newObj" type = "Object">
////الكائن B ليتم دمجه
/// </param>
/// <إرجاع type = "كائن"/>
var tempobj = tool.clone (oldobj) ؛
لـ (VAR Key in NewObj) {
if (newobj.hasownproperty (key) &&! tempobj.hasownproperty (key)) {
tempobj [key] = newObj [key] ؛
}
}
إرجاع tempobj ؛
} ،
استنساخ: وظيفة (obj) {
/// <summary>
/// 1: استنساخ كائن
/// 1.1 - استنساخ (OBJ) - استنساخ كائن وأرجع الكائن الجديد المستنسخ. النموذج الأولي للكائن هو الكائن المستنسخ
/// </summary>
/// <param name = "obj" type = "object">
/// الكائن لاستنساخ
/// </param>
/// <إرجاع type = "كائن"/>
وظيفة clone () {}
clone.prototype = obj ؛
var newObj = new clone () ؛
لـ (VAR Key in NewObj) {
if (typeof newObj [key] == "Object") {
newObj [key] = tool.clone (newObj [key]) ؛
}
}
إرجاع NewObj ؛
} ،
ConvertValue: Function (value) {
/// <summary>
/// 1: تحويل القيمة إلى قيمة صالحة
/// 1.1 - ConvertValue (value) - قم بتحويل قيمة CSS التي تم تكوينها بواسطة JSON إلى قيمة صالحة ، يرجى التأكد من أن قيمة القيمة ليست "Auto"
/// </summary>
/// <param name = "value" type = "object">
/// القيمة المراد تحويلها
/// </param>
/// <إرجاع type = "كائن"/>
var reg =/^/d+$/g ؛
if (typeof (value) === 'number' || reg.test (value)) {
قيمة الإرجاع + 'px' ؛
} آخر
قيمة الإرجاع
}
} ؛
// سجل إلى النافذة
window.linkflyscroll = linkflyscroll ؛
// سجل في مساحة الاسم
if (! window.so) {
window.so = {} ؛
}
window.so.scroll = window.linkflyscroll ؛
}) (نافذة) ؛
مثال رمز
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<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 على الارتفاع الحالي للكائن
العرض: "Auto" // scrollbar combor width width width
} ؛
var scrollobj = so.scroll ('obj' ، config) ؛
// scrollobj.change () ؛ // عندما يتغير محتوى شريط التمرير ، يجب تحديث عرض شريط التمرير ، ثم يتم استدعاء هذه الطريقة
// scrollobj.roll (value) ؛ // ضع شريط التمرير إلى نقطة معينة ، والقيمة هي النسبة المئوية بالنسبة لكائن شريط التمرير
} ؛
</script>
</head>
<body>
<div id = "obj">
<viv>
في الوقت الحاضر ، يظهر "أسلوب الموضة" الجديد في مجال إدارة الشركات ، وبعض الشركات العملاقة "تنحدر" لأنفسهم وتتحول إلى أعمال أكثر ذكاءً وأكثر مرونة. من المفهوم أن برنامج Oracle يقوم بتحويل تكاليف الصيانة الرئيسية لعملائها بشكل متزايد للمستشارين وموردي الطرف الثالث.
وقال كريج غوارنت: "في الصين ، يتم تنفيذ 90 ٪ من أعمال أوراكل من خلال هؤلاء الشركاء. بالإضافة إلى ذلك ، لضمان إيرادات أوراكل ، قام الرئيس التنفيذي إليسون أيضًا بشراء جزيرة صغيرة في هاواي".
بصفته نائب الرئيس العالمي ، يدرك Guarente استراتيجيات Oracle. لدى Guarente 16 عامًا من الخبرة في العمل ولديه خبرة غنية في إدارة العقود وإدارة ترخيص البرمجيات ومراجعة البرمجيات. بعد مغادرته أوراكل في عام 2011 ، انضم إلى Palisade ، الذي يتمثل عمله الرئيسي في مساعدة عملاء Oracle على توفير التعاقد على البرمجيات والتدخل والترخيص "التحسين".
وقال غوارنت إن أعمال Palisade تتطور بسرعة كبيرة. بصفتها مؤسسة تابعة لجهة خارجية ، تساعد Palisade العملاء على الفوز بطلبات كبيرة لأنهم أقرب إلى السوق ويمكنهم فهم احتياجات المستخدم بشكل أكثر دقة.
بشكل عام ، تساعد الشركات الاستشارية العملاء في فرز احتياجاتهم الفعلية والقيمة التي يمكن أن يوفرها البرنامج نفسه. أعطى Guarente شرحًا مفصلاً من خلال العمليات العملية. على سبيل المثال ، "إذا كنت ترغب في إنشاء مركز بيانات جديد ، أو تشغيل خطة جديدة لاستعادة الكوارث ، أو إذا كنت ترغب في إدخال السحابة ، فستقوم شركة الطرف الثالث أولاً بتطوير خريطة تخطيط وتنفيذها أخيرًا لتحقيق الهدف النهائي للمستخدم. إذا تم نشر البرنامج في مواقع مختلفة ، فيمكن أن يكون كل شيء في بيئة مكونة من قبل أو يمكن أن يكون كل ما يميزه في البيئة في كل شيء. يمكن لمسؤولي قاعدة البيانات تشخيص مشاكل قاعدة البيانات من خلال تقارير مستودع التحميل التلقائي (AWR).
في السنوات الأخيرة ، مع ظهور موجة تدقيق البرمجيات ، تقوم العديد من الشركات بتثبيت أدوات إدارة أصول البرمجيات لتحديد البرامج التي يستخدمونها ، والمدة التي يمكن أن تستمر فيها ، وعدد الأشخاص في الشركة. لكن محلل الإدارة العليا Hegedus قال: "لا توجد أداة يمكن أن تفهم بدقة قواعد المؤسسات ، وخاصة تطبيقات منتجات Oracle ، وهناك حاجة إلى منظمات الطرف الثالث المهني لمساعدة المستخدمين على فهم قواعد البرمجيات."
فكيف يمكنني تصحيح تطبيقات برامج Oracle؟ قال رئيس أوراكل مارك هيرد الأسبوع الماضي إنه في بداية طلبات المؤسسات ، ينبغي تعريف مؤسسات الطرف الثالث على أنها مؤيدي الخدمة ، بحيث يمكن للشركات الحصول على إصلاحات مجانية للتصحيحات وغيرها من الدعم في المستقبل ، بدلاً من شراء حقوق الملكية الفكرية للمنتج. بالإضافة إلى ذلك ، يجب على المؤسسات استخدام الاستشاريين بشكل فعال لدعم الخطوة الأولى في التحكم في التكاليف عند فهم البرنامج الذي تستخدمه المؤسسة وما يجب أن تتضمنه الاتفاقية. لا تترك مورد البرنامج وشراء البرامج بشكل أعمى وفقًا لعملية تنبؤاتك وتخميناتك.
</div>
</div>
</body>
</html>
ما سبق هو المحتوى الكامل لهذه المقالة ، والتفسير مفصل للغاية. أتمنى أن تعجبك.