هذا هو السبب
<!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 ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
* { الهامش:0؛ الحشو: 0؛ }
الجسم { الهامش: 20px 0 400px 20px؛ الخط: 12 بكسل اريال؛ }
h1 { حجم الخط: 14 بكسل؛ }
ol,ul { الهامش:20px; ارتفاع الخط: 160%؛ }
أول لي { اللون: #f00؛ }
.a1 { العرض: 300 بكسل؛ الارتفاع: 190 بكسل؛ الحدود: 1 بكسل الصلبة #f00؛ تجاوز السعة: تلقائي؛ }
.a2 { العرض: 600 بكسل؛ الارتفاع: 350 بكسل؛ الهامش: 100 بكسل 0 100 بكسل 80 بكسل؛ الحدود: 1 بكسل صلب #369؛ الخلفية:#eee url( );
}
.دوماسكرول_بار {
الموقف:مطلق؛
أعلى:0؛
حق:0؛
مؤشر z:9؛
العرض: 14 بكسل؛
الارتفاع: 100%؛
المؤشر:افتراضي؛
-moz-user-select:none;
-khtml-user-select:none;
تحديد المستخدم: لا شيء؛
تكرار الخلفية:تكرار-ص؛
موضع الخلفية:-42px 0;
تعويم: يسار؛
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
الموقف:مطلق؛
اليسار:0؛
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
العرض: 100%؛
الارتفاع: 14 بكسل؛
اللون: #ففف؛
محاذاة النص:مركز؛
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a { top:0; }
.dumascroll_arrow_down,.dumascroll_arrow_down_a { Bottom:0; }
.dumascroll_handle,.dumascroll_handle_a { width:100%; تكرار الخلفية:تكرار-ص؛ }
.dumascroll_arrow_up { موقف الخلفية:0 0؛ }
.dumascroll_arrow_up_a { موقف الخلفية: -14px 0؛ }
.dumascroll_handle { موقف الخلفية: -28px 0؛ }
.dumascroll_handle_a { موقف الخلفية: -56px 0؛ }
.dumascroll_arrow_down { موقف الخلفية: -70px 0؛ }
.dumascroll_arrow_down_a { موقف الخلفية: -84px 0؛ }
</نمط>
<النص البرمجي>
فار دوما = {
$:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
الحصول على الإزاحة: الوظيفة (س) {
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
العودة {الأعلى: ر، الارتفاع: ح }؛
},
ربط: وظيفة (س، eType، fn) {
if(o.addEventListener) { o.addEventListener(eType,fn,false); }
else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
توقف الحدث: وظيفة (ه) {
ه = ه || window.event;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
},
setCookie:function(c_name,value,expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() +expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
},
الحصول على ملف تعريف الارتباط: الوظيفة (c_name) {
إذا (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
إذا (c_start! = -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";",c_start);
if(c_end == -1) { c_end = document.cookie.length; }
return unescape(document.cookie.substring(c_start,c_end));
}
}
يعود ""؛
}
};
duma.BeautifyScrollBar = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {
this.arrowUpInterval;
this.arrowDownInterval;
this.barMouseDownInterval;
this.relY;
this.id = obj;
this.obj = duma.$(this.id);
this.setObjCss(); // قم بإنشاء موقع ويب لملفات CSS باستخدام لغة CSS
this.obj.innerHTML = '<div id="' + obj + 'Area" class="dumascroll_area">' + this.obj.innerHTML + '</div><div id="' + obj + 'Bar" class="dumascroll_bar"><div class="dumascroll_arrow_up"></div><div class="dumascroll_handle"></div><div class="dumascroll_arrow_down"></div></div>';
this.area = duma.$(obj + "Area");
this.bar = duma.$(obj + "Bar");
this.barPos;
this.arrowUp = this.bar.getElementsByTagName("div")[0];
this.arrowUpCss = ArrowUpCss;
this.arrowUpActiveCss = ArrowUpActiveCss;
this.handle = this.bar.getElementsByTagName("div")[1];
this.handleCss = HandleCss;
this.handleActiveCss = HandleActiveCss;
this.arrowDown = this.bar.getElementsByTagName("div")[2];
this.arrowDownCss = ArrowDownCss;
this.arrowDownActiveCss = ArrowDownActiveCss;
this.handleMinHeight = 15;
this.arrowUpHeight = parseInt(duma.getStyle(this.arrowUp).height);
this.arrowDownHeight = parseInt(duma.getStyle(this.arrowDown).height);
this.areaScrollHeight = this.area.scrollHeight;
this.handleHeight = parseInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight));
}
duma.BeautifyScrollBar.prototype = {
setObjCss:وظيفة() {
duma.getStyle(this.obj).position == "ثابت"؟ this.obj.style.position = "نسبي" : duma.getStyle(this.obj).backgroundColor == "شفاف"؟ this.obj.style.backgroundColor = "#fff" : null; // تحديد الموقع الجغرافي للموضع، تحديد الموقع النسبي؛
},
sethandle:function() { // قم بتكوين المقبض مرة أخرى
this.handle.style.top = this.arrowUpHeight + "px";
إذا (this.handleHeight > this.handleMinHeight) {
this.handleHeight < this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight؟ this.handle.style.height = this.handleHeight + "px" : this.handle.style.display = "none";
}
else { this.handleHeight = this.handleMinHeight; this.handle.style.height = this.handleMinHeight + "px"; }
},
setBarPos:function() { // قم بتكوين ملف تعريف الارتباط
this.barPos = this.area.scrollTop + "";
duma.setCookie(this.id + "CookieName",this.barPos,1);
},
getBarPos: وظيفة () {
this.barPos = duma.getCookie(this.id + "CookieName");
إذا (this.barPos!=null && this.barPos!="") {
this.area.scrollTop = this.barPos;
this.areaScroll();
}
},
ClearArrowUpInterval:function() { ClearInterval(this.arrowUpInterval); },
ClearArrowDownInterval:function() { ClearInterval(this.arrowDownInterval); },
ClearBarMouseDownInterval:function() { ClearInterval(this.barMouseDownInterval); },
منطقة التمرير: وظيفة () {
this.handle.style.display != "لا شيء" ؟ this.handle.style.top = this.area.scrollTop/(this.area.scrollHeight - this.area.offsetHeight) * (this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight) + هذا. ArrowUpHeight + "px" : null;
},
Areakeydown:function(e) { //المفتاح الرئيسي للأسفل
فار ذلك = هذا؛
document.onkeydown = وظيفة (الحدث) {
فار ه = حدث || نافذة.حدث,
ek = e.keyCode || ه.التي؛
إذا (ek == 40) { that.area.scrollTop += 25 }
وإلا إذا (ek == 38) { that.area.scrollTop -= 25 }
if(that.area.scrollTop > 0 && that.area.scrollTop < that.area.scrollHeight - that.area.offsetHeight){ duma.stopEvent(e); }
that.setBarPos();
}
},
مقبض الحركة: الوظيفة (ه) {
فار ه = ه || window.event;
this.area.scrollTop = (e.clientY - this.relY - this.arrowUpHeight)/(this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight)*(this.area.scrollHeight - this.area .offsetHeight);
this.setBarPos();
},
HandleMouseDown:وظيفة(ه) {
var that = this,e = e || window.event;
that.relY = e.clientY - that.handle.offsetTop;
that.handle.setCapture ؟ that.handle.setCapture() : null;
that.handle.className = that.handleActiveCss;
document.onmousemove = function(event) { that.handleMove(event); };
document.onmouseup = function() {
that.handle.className = that.handleCss;
that.handle.releaseCapture؟ that.handle.releaseCapture() : null;
document.onmousemove = null;
};
},
شريط التمرير: وظيفة (ه) {
فار ه = ه || window.event,eDir; // قم بتحديد موقع e.wheelDelta e.detail分别兼容IE、W3C، قم بتحديد موقع الويب الخاص بك
if(e.wheelDelta) { eDir = e.wheelDelta/120; }
else if(e.detail) { eDir = -e.detail/3; }
دير> 0؟ this.area.scrollTop -= 80 : this.area.scrollTop += 80; // 80 لونًا من ألوان النوافذ التي تستخدمها
if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight){ duma.stopEvent(e); }
this.setBarPos();
},
شريط داون: وظيفة (ه) {
فار ه = ه || حدث النافذة، الذي = هذا،
eY = e.clientY،
mStep = this.bar.offsetHeight،
documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop،
hOffset = duma.getOffset(this.handle)،
bOffset = duma.getOffset(this.bar);
if(documentScrollTop + eY < hOffset.top) { this.barMouseDownInterval = setInterval(function(e){
that.area.scrollTop -= that.area.offsetHeight;
if(that.area.scrollTop <= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval( ); }
that.setBarPos();
},80); }
else if(documentScrollTop + eY > hOffset.top + hOffset.height) { this.barMouseDownInterval = setInterval(function(){
that.area.scrollTop += that.area.offsetHeight;
if(that.area.scrollTop >= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight - hOffset.height)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); }
that.setBarPos();
},80); }
duma.stopEvent(e);
},
السهم إلى الأعلى: الوظيفة (هـ) {
فار ذلك = هذا؛
this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10);
this.arrowUp.className = this.arrowUpActiveCss;
duma.stopEvent(e);
},
ArrowUpMouseUp:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
ArrowUpMouseOut:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
السهمDownMouseDown:وظيفة(ه) {
فار ذلك = هذا؛
this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; that.setBarPos(); },10);
this.arrowDown.className = this.arrowDownActiveCss;
duma.stopEvent(e);
},
ArrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
ArrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
تشغيل: وظيفة () {
فار ذلك = هذا؛
this.sethandle();
this.areaScroll();
this.getBarPos();
this.area.onscroll = function(){that.areaScroll()};
this.area.onmouseover = this.bar.onmouseover = function(event){that.areakeydown(event)};
this.area.onmouseout = this.bar.onmouseout = function(){document.onkeydown = null};
this.handle.onmousedown = function(event){that.handleMouseDown(event)};
this.bar.onmousedown = function(event){that.barDown(event)};
this.bar.onmouseup = function(){that.clearBarMouseDownInterval()};
this.bar.onmouseout = function(){that.clearBarMouseDownInterval()};
this.arrowUp.onmousedown = function(event){that.arrowUpMouseDown(event)};
this.arrowUp.onmouseup = function(){that.arrowUpMouseUp()};
this.arrowUp.onmouseout = function(){that.arrowUpMouseOut()};
this.arrowDown.onmousedown = function(event){that.arrowDownMouseDown(event)};
this.arrowDown.onmouseup = function(){that.arrowDownMouseUp()};
this.arrowDown.onmouseout = function(){that.arrowDownMouseOut()};
duma.bind(this.obj,"mousewheel",function(event){that.barScroll(event)});
duma.bind(this.obj,"DOMMouseScroll",function(event){that.barScroll(event)});
}
}
duma.BeautifyScrollBar.init = function() {
فار o = document.getElementsByTagName("div"),
أولين = س. الطول،
dumascrollClass = /bdumascrollb/,
أوآر = []،
oArrLen = oArr.length;
for(var i=0; i<oLen; i++) {
إذا (dumascrollClass.test(o[i].className)) {
oArr.push("dumaScrollAreaId_" + i);
oArrLen = oArr.length;
o[i].id = oArr[oArrLen - 1];
}
}
for(var j=0; j<oArrLen; j++) {
new duma.BeautifyScrollBar(oArr[j]،"dumascroll_arrow_up"، "dumascroll_arrow_up_a"، "dumascroll_handle"، "dumascroll_handle_a"، "dumascroll_arrow_down"، "dumascroll_arrow_down_a").run();
}
}
duma.bind(window,"load",duma.BeautifyScrollBar.init);
</script>
</الرأس>
<الجسم>
<div class = "a dumascroll b" style = "width:300px؛ الارتفاع: 190px؛ الحشو: 5px؛ الحدود: 1px Solid #f00؛ ارتفاع الخط: 400٪؛ تجاوز السعة: مخفي؛">
لا داعي للقلق بشأن هذا الأمر<br /> لا داعي للقلق بشأن الأمر<br /> لا داعي للقلق بشأن الأمر<br / > أنا بخير كل ما عليك هو أن تفعل ذلك<br /> هل أنت متأكد من أنك ستفعل ذلك؟ هذا هو الحال، 真هذا هو الحال<br />هل أنت متأكد من أن هذا هو الحال بالنسبة لك؟真不幸<br /> لا داعي للقلق بشأن هذا الأمر<br /> لا داعي للقلق بشأن الأمر<br /> لا داعي للقلق بشأن الأمر<br / > أنا بخير لا يوجد سبب آخر<br />هل هناك أي مشكلة في هذا الأمر؟<br />
</div>
<div class = "a dumfaf" style = "width:400px؛ الارتفاع: 100px؛ الهامش: 20px؛ الحدود: 2px inset #eee؛ overflow:auto؛">
لا داعي للقلق بشأن الفصل الدراسي أو الفصل الدراسي أو الفصل الدراسي الجديد!<br />
لا داعي للقلق بشأن هذا الأمر، فالفصل الدراسي هو الأفضل بالنسبة لك!<br />هل أنت متأكد من ذلك؟ الفصل الدراسي الأول هو الفصل الدراسي الأول هل هذا صحيح؟<br />هل أنت متأكد من أن هذا هو ما تفعله؟<br /> أفضل ما في الأمر هو أن كل ما عليك هو أن تفعل ذلك <br />هل لديك فصل دراسي أو فصل دراسي أو فصل دراسي أو فصل دراسي؟ هل أنت بخير؟<br /> هل لديك أي أسئلة؟ , هل ترغب في ذلك؟ />هل لديك أي أسئلة أو أسئلة؟ الفصل الدراسي الأول هو الفصل الدراسي الأول، هل أنت بخير؟<br /> هل أنت في حاجة إلى فصل دراسي جديد؟< ر />
</div>
<div class = "a dumascroll" style = "width:780px؛ الارتفاع: 350px؛ الهامش: 20px؛ الحدود: 1px Solid #369؛ الخلفية: #eee url( http://bbs.blueidea.com/thread-2936181- 1-3.html " target="">اكتب المحتوى</a></li>
</ol>
<h2>المعلومات المتوفرة لدينا:</h2>
<ul>
<li>انقر على "الصفحة الرئيسية" لتتمكن من استخدام نظام التشغيل windows</li>
<li>التعرف على طبيعة الجسم</li>
<li>المحتوى الموجود في منطقة النص</li>
<li>يتسبب في حدوث خطأ في div، مما قد يؤدي إلى خلل في نظام div، ويتسبب في حدوث خطأ في div将大幅修改)</li>
<li>التعرف على المزيد من المعلومات
</ul>
<p>يرجى التواصل مع bug并提出宝贵建议,相信下一版本将做的更好,谢谢(QQ:149561420,gTalk: [email protected] ) </ص>
</الجسم>
</html>
تم تصميمه بواسطة 3.0 (دوما "يتبع" ، وهو ما يجعل الأمر أكثر صعوبة)
معلومات المنتج :