كود المؤثرات الخاصة لصفحة الويب: استخدم الطبقات لمحاكاة النوافذ الصغيرة المتحركة

<!-- موقع الويب http://www.downcodes.com --> <!-- bbs http://www.downcodes.com/bbs- -> <style rel=stylesheet type=text/css> BODY { BORDER-BOTTOM: 0px; الحدود اليسرى: 0 بكسل؛ الحدود اليمنى: 0 بكسل؛ الحدود العلوية: 0 بكسل؛ الهامش: 0 بكسل؛ اللون: Buttontext } #menu { الخلفية: Buttonface؛ الحدود السفلية: واجهة الزر 1 بكسل صلبة؛ الحدود اليسرى: واجهة الزر 1 بكسل صلبة؛ الحدود اليمنى: Buttonface 1px صلب؛ BORDER-TOP: Buttonface 1px صلب؛ المؤشر: افتراضي؛ اليسار: 0 بكسل؛ الموقف: مطلق؛ الأعلى: 0px } #menu .menu { الخلفية: Buttonface؛ BORDER-BOTTOM: زر التمييز 2 بكسل البداية؛ BORDER-LEFT: تحديد الزر بمقدار 2 بكسل في البداية؛ الحدود اليمنى: تحديد الزر بمقدار 2 بكسل في البداية؛ BORDER-TOP: تسليط الضوء على زر 2px البداية؛ الموضع: مطلق } #menu TD { FONT: القائمة؛ الارتفاع: 20 بكسل } #menu .root { BORDER-BOTTOM: Buttonface 1px Solid; الحدود اليسرى: واجهة الزر 1 بكسل صلبة؛ الحدود اليمنى: Buttonface 1px صلب؛ BORDER-TOP: Buttonface 1px صلب؛ الهامش: 6 بكسل؛ الحشو السفلي: 1 بكسل؛ الحشو الأيسر: 7 بكسل؛ الحشو لليمين: 7 بكسل؛ PADDING-TOP: 1px } #menu .icon { TEXT-ALIGN: center } #menu .disabled { COLOR: Buttonshadow } #menu .more { FONT-FAMILY: webdings؛ محاذاة النص: صحيح؛ العرض: 20 بكسل } #menu #handle { BORDER-BOTTOM: Buttonshadow 1px Solid; BORDER-LEFT: Buttonhighlight 1px صلب؛ الحدود اليمنى: Buttonshadow 1px صلب؛ BORDER-TOP: زر تمييز 1 بكسل صلب؛ المؤشر: تحرك؛ الهامش: 0 بكسل؛ الحشو-السفلي: 0 بكسل؛ الحشو الأيسر: 0px؛ الحشو لليمين: 0 بكسل؛ PADDING-TOP: 0px } #outerDiv { BORDER-BOTTOM: أبيض 2px داخلي؛ الحدود اليسرى: أبيض 2 بكسل داخلي؛ الحدود اليمنى: إدراج أبيض بحجم 2 بكسل؛ BORDER-TOP: أبيض 2px داخلي؛ الارتفاع: 90%؛ الفائض: تلقائي؛ الموقف: مطلق؛ العرض: 100%؛ Z-INDEX: -1 } </style> <SCRIPT> var activeMenu = null; var activeSub = null; فار تيمبل؛ فار ر؛ var HideWindowedControls = true; var ie5 = (document.getElementsByTagName != null); وظيفة MenuItemHighlight(el) { el.style.background = "highlight"; el.style.color = "highlighttext"; } function MenuItemNormal(el) { el.style.background = ""; el.style.color = ""; } function riseButton(el) { el.style.borderTop ="1 Solid Buttonhighlight"; el.style.borderLeft ="1 زر مميز"; el.style.borderBottom ="1 زر ظل صلب"; el.style.borderRight ="1 زر ظل صلب"; el.style.padding ="1"; el.style.paddingLeft = "7"; el.style.paddingRight = "7"; } function NormalButton(el) { el.style.border = "1 Buttonface صلب"; el.style.padding ="1"; el.style.paddingLeft = "7"; el.style.paddingRight = "7"; } function pressedButton(el) { el.style.borderTop ="1 Solid Buttonshadow"; el.style.paddingTop = "2"; el.style.borderLeft ="1 زر ظل صلب"; el.style.paddingLeft = "8"; el.style.borderBottom ="1 زر مميز"; el.style.paddingBottom= "0"; el.style.borderRight = "تسليط الضوء على زر واحد ثابت"; el.style.paddingRight = "6"; } وظيفة cleanUpMenuBar() { for (i=0; i <menu.rows.length; i++) { for (j=0; j <menu.rows(i).cells.length; j++) { if (menu.rows) (i).cells(j).className == "root") { NormalButton(menu.rows(i).cells(j)); } } } showWindowedObjects(true); } function getMenuItem(el) { temp = el; بينما ((temp!=null) && (temp.tagName!=TABLE)) && (temp.id!=menubar) && (temp.id!=menu) && (temp.id!=handle ")) { if ((temp.tagName=="TR") || (temp.className=="root")) el = temp; temp = temp.parentElement; } إرجاع إل؛ } دالة getSub(el) { temp = el; while ((temp!=null) && (temp.className != "sub")) { if (temp.tagName=="TABLE") el = temp; temp = temp.parentElement; } إرجاع إل؛ } function MenuClick() { if (event.srcElement == null) return; var el=getMenuItem(event.srcElement); if ((el.className != "disabled") && (el.id != "menubar")){ if (el.className == "root") { if (activeMenu) { riseButton(el); showWindowedObjects(true); } else pressedButton(el); toggleMenu(el); } else if (el.href) { cleanUpMenuBar(); إذا (activeMenu) toggleMenu(activeMenu.parentElement); if (el.target) window.open(el.href, el.target); else if (document.all.tags("BASE").item(0) != null) window.open(el.href, document.all.tags("BASE").item(0).target); else window.location = el.href; } } window.event.cancelBubble = true; } function Restore() { if (activeMenu) { toggleMenu(activeMenu.parentElement); CleanUpMenuBar(); } } document.onclick=Restore; function MenuOver() { if ((event.fromElement == null) || (event.toElement == null) || (event.fromElement == events.toElement)) return; var fromEl = getMenuItem(event.fromElement); var toEl = getMenuItem(event.toElement); إذا (fromEl == toEl) العودة؛ if ((toEl.className != "disabled") && (toEl.id != "menubar")){ if (toEl.className == "root") { if (activeMenu) { if (toEl.menu != activeMenu ) { cleanUpMenuBar(); pressedButton(toEl); toggleMenu(toEl); } } else { riseButton(toEl); } } else { if ((fromEl != toEl) && (toEl.tagName != "TABLE")){ cleanup(toEl.parentElement.parentElement, false); MenuItemHighlight(toEl); toEl.parentElement.parentElement.activeItem = toEl; if (toEl.href) window.status = toEl.href; if (toEl.className == "sub") showSubMenu(toEl,true); } } } } function MenuOut() { if ((event.fromElement == null) || (event.toElement == null) || (event.fromElement == events.toElement)) return; var fromEl = getMenuItem(event.fromElement); var toEl = getMenuItem(event.toElement); إذا (fromEl == toEl) العودة؛ if (fromEl.className == "root"){ if (activeMenu) { if (fromEl.menu != activeMenu) NormalButton(fromEl); } else NormalButton(fromEl); } else { if ((fromEl.className != "disabled") && (fromEl.id != "menubar")){ if ((fromEl.className == "sub") && (getSub(toEl) == fromEl.className. subMenu) ||(fromEl.subMenu == toEl.parentElement.parentElement)) return; else if ((fromEl.className == "sub")){ cleanup(fromEl.subMenu, true); MenuItemNormal(fromEl); } else if ((fromEl != toEl) && (fromEl.tagName != "TABLE")) MenuItemNormal(fromEl); window.status = ""; } } } function toggleMenu(el) { if (el.menu == null) el.menu = getChildren(el); if (el.menu == activeMenu) { if (activeSub) MenuItemNormal(activeSub.parentElement.parentElement); تنظيف(el.menu,true); activeMenu = null; activeSub = null; // showWindowedObjects(true); } else { if (activeMenu) { cleanup(activeMenu,true); HideMenu(activeMenu); } activeMenu = el.menu; var tPos = topPos(el.menu) + Menu.offsetHeight; إذا ((document.body.offsetHeight - tPos) >= el.menu.offsetHeight) { el.menu.style.pixelTop = (ie5) ? el.offsetHeight + 1 : Menu.offsetHeight - el.offsetTop - 2؛ دير = 2؛ } else { el.menu.style.pixelTop = (ie5) ? el.offsetTop - el.menu.offsetHeight - 1 : el.offsetTop - el.menu.offsetHeight + 2; دير = 8؛ } el.menu.style.pixelLeft = (ie5) ? el.offsetLeft - 2 : el.offsetLeft; show(el.menu, dir); showWindowedObjects(false); } } function showSubMenu(el,show) { var dir = 2; درجة الحرارة = ش؛ list = el.children.tags("TD"); el = list[list.length-1]; if (el.menu == null) el.menu = getChildren(el); temp.subMenu = el.menu; if ((el.menu != activeMenu) && (show)) { activeSub = el.menu; var lPos = leftPos(el.menu); إذا ((document.body.offsetWidth - lPos) >= el.menu.offsetWidth) { el.menu.style.left = (ie5) ? el.parentNode.offsetWidth : el.offsetParent.offsetWidth; دير = 6؛ } else { el.menu.style.left = - el.menu.offsetWidth + 3; دير = 4؛ } فار tPos = (ie5)؟ topPos(el.menu) + el.offsetTop : topPos(el.menu) + el.offsetParent.offsetTop;// + el.menu.offsetTop; إذا ((document.body.offsetHeight - tPos)>= el.menu.offsetHeight) el.menu.style.top = (ie5) ? el.offsetTop - 4 : el.offsetParent.offsetTop - 2؛ آخر el.menu.style.top = (ie5)؟ el.offsetTop + el.offsetHeight - el.menu.offsetHeight : el.offsetParent.offsetTop + el.offsetParent.offsetHeight - el.menu.offsetHeight + 2; showSub(el.menu, dir); } else { show(el.menu ,dir); activeSub = null; } } وظيفة topPos(el) { var temp = el; فار ص = 0; while (temp.id!="menu") { temp = temp.offsetParent; y += temp.offsetTop; } إرجاع ذ؛ } function leftPos(el) { var temp = el; فار س = 0; while (temp.id!="menu") { temp = temp.offsetParent; x += temp.offsetLeft; } return x + el.offsetParent.offsetWidth; } function show(el, dir) { if (typeof(fade) == "function") Fade(el, true); else if (typeof(swipe) == "function") { tempElSwipe = el; tempDirSwipe = dir; el.style.visibility = "visible"; el.style.visibility = "مخفي"; window.setTimeout("tempSwipe()", 0); // اسحب (el، dir)؛ } else el.style.visibility = "visible"; } var tempElSwipe, tempDirSwipe; وظيفة tempSwipe() { swipe(tempElSwipe, tempDirSwipe); } وظيفة showSub(el ,dir) { show(el, dir); // اسحب (el، dir)؛ // تتلاشى (إل، صحيح)؛ // el.style.visibility = "visible"; } function cleanup(menu,hide) { if (menu.activeItem) { // إذا كنت هنا من قبل if ((menu.activeItem.className == "sub") && (menu.activeItem.subMenu)){ / / يحتوي العنصر النشط على قائمة فرعية للتنظيف(menu.activeItem.subMenu, true); // تنظيف الغواصات أيضًا } MenuItemNormal(menu.activeItem); } إذا (إخفاء) { إخفاء القائمة (القائمة)؛ } } وظيفة إخفاءMenu(el) { if (typeof(fade) == "function") { Fade(el, false); // window.setTimeout(fadeTimer); } else if (typeof(swipe) == "function") { HideSwipe(el); } else el.style.visibility = "hidden"; } function getChildren(el) { var tList = el.children.tags("TABLE"); إرجاع tList[0]; } var DragObject = null; var DragObjectPos = "top"; فار تكساس؛ فار تاي؛ window.onload=fixSize; window.onresize=fixSize; functionfixSize() { if (dragObjectPos == "top") { ExternalDiv.style.top = Menu.offsetHeight; ExternalDiv.style.height = document.body.clientHeight - Menu.offsetHeight; } else if( DragObjectPos == "bottom") { ExternalDiv.style.top = 0; ExternalDiv.style.height = document.body.clientHeight - Menu.offsetHeight; Menu.style.top = document.body.clientHeight - Menu.offsetHeight; } else { ExternalDiv.style.top = 0; ExternalDiv.style.height=document.body.clientHeight; } } function document.onmousedown() { if(window.event.srcElement.id == "handle") { DragObject = document.all[window.event.srcElement.getAttribute("for"]); يعيد()؛ // إخفاء القوائم أثناء التحرك ty = (window.event.clientY - DragObject.style.pixelTop); window.event.returnValue = false; window.event.cancelBubble = true; } else { DragObject = null; } } function document.onmouseup() { if(dragObject) { DragObject = null; } } function document.onmousemove() { if(dragObject) { if(window.event.clientX >= 0) { if((window.event.clientY - ty) <= 15) { DragObject.style.border = "0 زر صلب"؛ DragObject.style.width = "100%"; DragObject.style.top = 0; DragObject.style.left = 0; DragObjectPos = "top"; FixSize(); } else if ((window.event.clientY - ty) >= document.body.clientHeight - Menu.offsetHeight - 15) { DragObject.style.border = "0 Solid Buttonface"; DragObject.style.width = "100%"; DragObject.style.top = document.body.clientHeight - Menu.offsetHeight; DragObject.style.left = 0; DragObjectPos = "bottom"؛ FixSize(); } else { DragObject.style.width = "10px"; DragObject.style.left = window.event.clientX; DragObject.style.top = window.event.clientY - ty; DragObject.style.border = "2px بداية بيضاء"; DragObjectPos = "float"; FixSize(); } } else { DragObject.style.border = ""; DragObject.style.left = "0"; DragObject.style.top = "0"; } window.event.returnValue = false; window.event.cancelBubble = true; } } function showWindowedObjects(show) { if (hideWindowedControls) { var windowedObjectTags = new Array("SELECT", "IFRAME", "OBJECT", "APPLET"،"EMBED"); var windowedObjects = new Array(); فار ي=0; for (var i=0; i<windowedObjectTags.length; i++) { var tmpTags = document.all.tags(windowedObjectTags[i]); if (tmpTags.length > 0) { for (var k=0; k<tmpTags.length; k++) { windowedObjects[j++] = tmpTags[k]; } } } for (var i=0; i<windowedObjects.length; i++) { if (!show) windowedObjects[i].visBackup = (windowedObjects[i].style.visibility == null) ? "مرئي" : windowedObjects[i].style.visibility; windowedObjects[i].style.visibility = (إظهار) ؟ windowedObjects[i].visBackup : "hidden"; } } } </SCRIPT> <TABLE cellSpacing=1 id=menu onclick=menuClick() onmouseout=menuOut() onmouseover=menuOver() onselectstart="return false"> <TBODY> <TR id=menubar> <TD class= نمط معطل = "PADDING-LEFT: 0px؛ PADDING-RIGHT: 1px"> <DIV class = معرف معطل = نمط المقبض = "HEIGHT: 100%؛ LEFT: 3px؛ WIDTH: 3px" title = "حركني!" for="menu"></DIV></TD> <TD class=root>الصفحة الرئيسية <TABLE cellSpacing=0 class=menu style="VISIBILITY: Hidden"> <TBODY> <TR href="javascript:alert('可以改成一个链接!')"> <TD></TD> <TD noWrap>LINK</TD> <TD></TD> </TR> <TR class=sub> <TD></TD> <TD noWrap>LINK</TD> <TD> <TABLE cellSpacing=0 class=menu style="VISIBILITY: Hidden"> <TBODY> <TR href="javascript:alert('可以改成一个链接')"> <TD noWrap style="HEIGHT: 20px">LINK</TD> </TR> </TBODY> </TABLE> </TD> </TR> <TR class=disabled> <TD colSpan=3> <HR > </TD> </TR> <TR href="javascript:alert('可以改成一个链接')"> <TD></TD> <TD>الرابط</TD> <TD></TD> </TR> <TR title = "هذا سهل حقًا"> <TD></TD> <TD>LINK</TD> <TD></TD> </TR> </TBODY> </TABLE> < /TD> <TD class=root>مساعدة <TABLE cellSpacing=0 class=menu style="VISIBILITY: Hidden"> <TBODY> <TR href="javascript:alert('www.downcodes.com')"> <TD </TD> <TD>حول</TD> <TD></TD></TR></TBODY></TABLE></TD> <TD class=disabled width="100%"> </ TD></TR></TBODY></TABLE> <DIV id=outerDiv>