تصف هذه المقالة طريقة تنفيذ صفحة ويب مخصصة بالكامل انقر بزر الماوس الأيمن مع الدلائل متعددة المستويات في JS. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
هذه ميزة فأر ويب جيدة جدًا. يمكن لهذا الرمز التحكم في قائمة النقر بزر الماوس الأيمن للماوس في صفحة الويب ، ويتم إنشاؤها بالكامل وفقًا لرغباتك. يمكن عرضه في مستويات متعددة من الكتالوجات.
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> JS صفحة ويب مخصصة قائمة التنقل متعددة المستويات </title>
<type type = "text/css">
HTML ، الجسم {الارتفاع: 100 ٪ ؛ تجاوز: مخفي ؛}
الجسم ، div ، ul ، li {margin: 0 ؛ padding: 0 ؛}
الجسم {font: 12px/1.5/5fae/8f6f/96c5/9ed1 ؛}
ul {style-style-type: none ؛}
#rightmenu {الموضع: Absolute ؛ Top: -9999px ؛ Left: -9999px ؛}
#rightmenu ul {float: left ؛ الحدود: 1px الصلبة #979797 ؛ الخلفية: #f1f1f1 url (الصور/line.png) 24px 0 تكرار y ؛ padding: 2px ؛ box-shadow: 2px 2px 2px rgba (0،0،0 ، .6) ؛}
#rightmenu ul li {float: left ؛ clear: كلاهما ؛ الارتفاع: 24px ؛ المؤشر: مؤشر ؛ خط الارتفاع: 24px ؛ مساحة البيضاء: nowrap ؛ padding: 0 30px ؛}
#rightmenu ul li.sub {خلفية تكرار: عدم التكرار ؛ الخلفية الوضع: اليمين 9px ؛ صورة الخلفية: url (الصور/السهم. png) ؛}
#rightmenu ul li.active {background-color: #f1f3f6 ؛ border-radius: 3px ؛ الحدود: 1px solid #aecff7 ؛ الارتفاع: 22px ؛ خط الارتفاع: 22px ؛ خلفية الموضع: يمين -8px ؛ الحشو: 0 29px ؛}
#rightmenu ul ul {display: none ؛ الموضع: مطلق ؛}
</style>
<script type = "text/javaScript">
var getoffset = {
أعلى: وظيفة (obj) {
return obj.offsettop + (obj.offsetParent؟ enduces.callee (obj.offsetParent): 0)
} ،
اليسار: وظيفة (obj) {
return obj.offsetleft + (obj.offsetParent؟ enduces.callee (obj.offsetParent): 0)
}
} ؛
window.onload = function ()
{
var omenu = document.getElementById ("rightmenu") ؛
var aul = omenu.getElementsByTagname ("ul") ؛
var ali = omenu.getElementsByTagname ("li") ؛
var showtimer = hidetimer = null ؛
var i = 0 ؛
var maxwidth = maxheight = 0 ؛
var adoc = [document.documentElement.OffSetWidth ، document.documentElement.offSetheight] ؛
Omenu.Style.Display = "none" ؛
لـ (i = 0 ؛ i <ali.length ؛ i ++)
{
// أضف سهمًا إلى LI يحتوي على القائمة الفرعية
علي
// التحرك في
علي [i] .onmouseover = function ()
{
var othis = هذا ؛
var oul = othis.getElementSbyTagname ("ul") ؛
// حرك الماوس إلى الأسلوب
othis.className += "Active" ؛
// عرض القائمة الفرعية
إذا (oul [0])
{
ClearTimeout (Hidetimer) ؛
showtimer = setTimeout (function ()
{
لـ (i = 0 ؛ i <othis.parentnode.children.length ؛ i ++)
{
othis.parentnode.children [i] .getElementsByTagName ("ul") [0] &&&
(othis.parentnode.children [i] .getElementsByTagName ("ul") [0] .style.display = "none") ؛
}
oul [0] .style.display = "block" ؛
oul [0] .style.top = othis.offsettop + "px" ؛
oul [0] .style.left = othis.offsetWidth + "px" ؛
setWidth (oul [0]) ؛
// الحد الأقصى للنطاق العرض
maxwidth = adoc [0] - oul [0] .OffSetWidth ؛
maxheight = adoc [1] - oul [0] .OffSetheight ؛
// منع الفائض
maxwidth <getOffset.left (oul [0]) && (oul [0] .style.left = -oul [0] .clientwidth + "px") ؛
maxheight <getOffset.top (oul [0]) && (oul [0] .style.top = -oul [0] .clientheight + othis.offsettop + othis.clientheight + "px")
} ، 300) ؛
}
} ؛
// الماوس خارج
علي [i] .onmouseout = function ()
{
var othis = هذا ؛
var oul = othis.getElementSbyTagname ("ul") ؛
// الماوس خارج النمط
othis.className = othis.classname.replace (// s؟ Active/، "") ؛
ClearTimeout (ShowTimer) ؛
hidetimer = setTimeOut (function ()
{
لـ (i = 0 ؛ i <othis.parentnode.children.length ؛ i ++)
{
othis.parentnode.children [i] .getElementsByTagName ("ul") [0] &&&
(othis.parentnode.children [i] .getElementsByTagName ("ul") [0] .style.display = "none") ؛
}
} ، 300) ؛
} ؛
}
// تخصيص قائمة النقر بزر الماوس الأيمن
document.oncontextMenu = وظيفة (حدث)
{
var event = event || window.event ؛
Omenu.Style.Display = "block" ؛
omenu.style.top = event.clienty + "px" ؛
omenu.style.left = event.clientx + "px" ؛
setWidth (Aul [0]) ؛
// الحد الأقصى للنطاق العرض
maxwidth = adoc [0] - omenu.offsetwidth ؛
maxheight = adoc [1] - omenu.offsetheight ؛
// منع الفائض في القائمة
Omenu.OffSettop> maxheight && (omenu.style.top = maxheight + "px") ؛
Omenu.OffSetLeft> maxwidth && (omenu.style.left = maxwidth + "px") ؛
العودة كاذبة
} ؛
// انقر لإخفاء القائمة
document.onclick = function ()
{
Omenu.Style.Display = "لا شيء"
} ؛
// يرجى العرض الأكبر في LI وتعيينه لجميع LIS على نفس المستوى
وظيفة setWidth (OBJ)
{
maxwidth = 0 ؛
لـ (i = 0 ؛ i <obj.children.length ؛ i ++)
{
var oli = obj.children [i] ؛
var iwidth = oli.clientwidth - parseint (oli.currentstyle؟ oli.currentstyle ["paddingleft"]: getComputedStyle (oli ، null) ["paddingleft"]) * 2
إذا (iwidth> maxwidth) maxwidth = iwidth ؛
}
لـ (i = 0 ؛ i <obj.children.length ؛ i ++) obj.children [i] .style.width = maxwidth+"px" ؛
}
} ؛
</script>
</head>
<body>
<Center> انقر بزر الماوس الأيمن ، يرجى النقر بزر الماوس الأيمن على الصفحة لعرض التأثير. </center>
<div id = "rightmenu">
<ul>
<li> <strong> تعلم JavaScript </strong> </li>
<li>
wulin.com
<ul>
<li> تحليل مبادئ المؤثرات الخاصة صفحة الويب </li>
<li> الرد على إجراءات المستخدم </li>
<li> تأثير مربع المطالبة </li>
<li> يحركه الحدث </li>
<li> عملية سمة العنصر </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> قم بتغيير لون الخلفية لصفحة الويب </li>
<li> نقل معلمة الوظيفة </li>
<li> كتابة وظائف إعادة استخدام عالية </li>
<li> 126 تأثير اختيار صندوق البريد </li>
<li> العمليات الحلقية والمرور </li>
</ul>
</li>
<li>
الدرس 3
<ul>
<li>
تكوين JavaScript
<ul>
<li> ecmascript </li>
<li> دوم </li>
<li> بوم </li>
<li> مصادر توافق JavaScript </li>
</ul>
</li>
<li> الموقع ومزايا وعيوب JavaScript </li>
<li> المتغيرات ، الأنواع ، typeof ، تحويل نوع البيانات ، نطاق متغير </li>
<li>
إنهاء
<ul>
<li> ما هو الإغلاق </li>
<li> تطبيق بسيط </li>
<li> إغلاق العيوب </li>
</ul>
</li>
<li> عامل التشغيل </li>
<li> التحكم في تدفق البرنامج </li>
<li>
استخدام الموقتات
<ul>
<li> setInterval </li>
<li> setTimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.