


js untuk mencapai keserasian yang baik bagi kemahiran effect_javascript navigasi laman web rasmi Microsoft
Contoh dalam artikel ini menerangkan pelaksanaan js kesan menu lungsur turun navigasi tapak web rasmi Microsoft dengan keserasian yang baik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah menu navigasi laman web rasmi Microsoft, yang serasi dengan menu lungsur turun dan mempunyai kesan navigasi laman web rasmi Microsoft Tiada kesan animasi di bawah IE6, kesan IE6 juga ditambah, menjadikannya serasi dengan IE6. Laman web rasmi Microsoft kini digunakan, yang saya rasa sangat bagus.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-microsoft-web-nav-menu-codes/
Kod khusus adalah seperti berikut:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>微软官网导航菜单</title> <style type="text/css"> body{margin:0px;text-align:left;padding:0px;font:12px/140% Arial,Verdana,"微软雅黑";background:#d1d1d1;} ul{margin:0px;padding:0px;list-style-type:none;float:left;} a:focus {outline:0;} .nav{width:920px;height:28px;background:#f4f4f4;margin:20px auto;border-radius:5px;} .nav li{width:auto;line-height:20px;float:left;position:relative;} .nav li.msMnu_Item a{border:1px solid #f4f4f4;color:#4f4f4f;display:inline-block;padding:3px 10px;position:relative;text-decoration:none;font-size:14px;} .nav li.msMnu_Item a:hover{border:1px solid #999;background:#e4ecf4;} .nav li.msMnu_hove a{border:1px solid #999;border-bottom:1px solid #fff;background:#fff;color:#4f4f4f;display:inline-block;padding:3px 10px;position:relative;text-decoration:none;font-size:14px;z-index:1000;} .list{overflow:hidden;position:absolute;height:0px;top:27px;left:0;border-radius:0 8px 8px 8px;} .list div{background:#fff;overflow:hidden;padding:12px 0 12px 0;border:1px solid #999;float:left;} .list ul{padding:0px 10px;} .list li{margin:0px;padding:0px;width:170px;} .list li h3{margin:0px;padding:0px;font-size:12px;color:#4f4f4f;border-bottom:1px solid #e3e3e3;line-height:20px;width:100%;float:left;} .list li ul{width:170px;margin:0px;padding:5px 0;} .list li ul li.lis a{width:170px;height:22px;color:#0060a6;font-size:12px;line-height:20px;text-decoration:none;margin:0px;padding:0px;text-indent:3px;border:none;} .list li ul li.lis a:hover{color:#fff;background:#0060a6;} </style> <script type="text/javascript"> function Class(oParent, sClass){ var aElem = oParent.getElementsByTagName('*'); var aClass = []; var i = 0; for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]); return aClass; }; function css(obj, attr, value){ if(arguments.length == 2){ var style = obj.style, currentStyle = obj.currentStyle; if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr]; for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName]; }else if(arguments.length == 3){ switch(attr){ case "width": case "height": case "paddingTop": case "paddingRight": case "paddingBottom": case "paddingLeft": case "top": case "right": case "bottom": case "left": case "marginTop": case "marginRigth": case "marginBottom": case "marginLeft": obj.style[attr] = value + "px"; break; case "opacity": obj.style.filter = "alpha(opacity=" + value + ")"; obj.style.opacity = value / 100; break; default: obj.style[attr] = value } } }; function extend(destination, source){ for (var propName in source) destination[propName] = source[propName]; return destination }; function doMove(obj, json, fnEnd){ clearInterval(obj.timer); obj.iSpeed = 0; fnEnd = extend({ type: "buffer", callback: function() {} }, fnEnd); obj.timer = setInterval(function(){ var iCur = 0, iStop = true; for(var propName in json){ iCur = parseFloat(css(obj, propName)); propName == 'opacity' && (iCur = Math.round(iCur * 100)); switch(fnEnd.type){ case 'buffer': obj.iSpeed = (json[propName] - iCur) / 3; obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed); json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed)); break; case 'elasticity': obj.iSpeed += (json[propName] - iCur) / 3; obj.iSpeed *= 0.75; Math.abs(json[propName] - iCur) <= 1 && Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed)); break; case 'accelerate': obj.iSpeed = obj.iSpeed + 3; iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed)); break; } } if(iStop){ clearInterval(obj.timer); obj.timer = null; obj.iSpeed = 0; fnEnd.callback(); } },30); }; </script> <script type="text/javascript"> window.onload = function(){ var aMenu = Class(document, 'menu'); var aList = Class(document, 'list'); var i = iNow = zIndex = 0; for(i=0;i<aMenu.length;i++){ aMenu[i].index = i; aMenu[i].onclick = function(e){ var oEvent = e || event; var aDiv = this.parentNode.getElementsByTagName('div'); var aMenuList = Class(this.parentNode,'menuList'); var iWidth = aMenuList.length * aMenuList[0].offsetWidth + 3; //还原上一个动作 flexible(); if(aDiv[0].style.height==aDiv[1].offsetHeight+'px'){ flexible(); }else{ //当前动作 this.parentNode.className = 'msMnu_hove'; aDiv[0].style.zIndex = zIndex++; if(aMenuList.length>1)aDiv[0].style.width = iWidth + 'px'; doMove(aDiv[0], {height:aDiv[1].offsetHeight}); } //记住上一个 iNow = this.index; oEvent.cancelBubble = true; }; } document.onclick = function(){flexible();}; function flexible(){ aList[iNow].parentNode.className = 'msMnu_Item'; aList[iNow].style.zIndex = 0; doMove(aList[iNow], {height:0}); } }; </script> </head> <body> <div class="nav"> <ul> <li class="msMnu_Item"> <a href="javascript:;" class="menu">Windows</a> <div class="list"> <div> <ul class="menuList"> <li> <h3>Windows</h3> <ul> <li class="lis"><a href="javascript:;">Windows 7</a></li> <li class="lis"><a href="javascript:;">Windows Vista</a></li> <li class="lis"><a href="javascript:;">Windows XP</a></li> <li class="lis"><a href="javascript:;">Windows 企业版</a></li> <li class="lis"><a href="javascript:;">Windows Phone</a></li> <li class="lis"><a href="javascript:;">Internet Explorer 8</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">Office</a> <div class="list"> <div> <ul class="menuList"> <li> <h3>Office 产品</h3> <ul> <li class="lis"><a href="javascript:;">Office 标准版</a></li> <li class="lis"><a href="javascript:;">Office 家庭和学生版</a></li> <li class="lis"><a href="javascript:;">Office 中小企业版</a></li> <li class="lis"><a href="javascript:;">Office 专业版</a></li> <li class="lis"><a href="javascript:;">Office 专业增强版</a></li> <li class="lis"><a href="javascript:;">Office 企业版</a></li> </ul> <h3>活动与促销</h3> <ul> <li class="lis"><a href="javascript:;">Office 近期活动与促销</a></li> </ul> </li> </ul> <ul class="menuList" style="border-left:1px solid #e3e3e3;"> <li> <h3>Office 资源</h3> <ul> <li class="lis"><a href="javascript:;">Office 购买主页</a></li> <li class="lis"><a href="javascript:;">Office 试用版免费下载</a></li> <li class="lis"><a href="javascript:;">Office for Mac 2011</a></li> <li class="lis"><a href="javascript:;">Office Web Apps</a></li> <li class="lis"><a href="javascript:;">Office 更新和程序下载</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">所有产品</a> <div class="list"> <div> <ul class="menuList"> <li> <h3>服务器</h3> <ul> <li class="lis"><a href="javascript:;">所有服务器产品</a></li> <li class="lis"><a href="javascript:;">Lync Server</a></li> <li class="lis"><a href="javascript:;">Windows Server</a></li> <li class="lis"><a href="javascript:;">Windows Small Business Server</a></li> <li class="lis"><a href="javascript:;">Windows Home Server</a></li> <li class="lis"><a href="javascript:;">Windows HPC Server</a></li> <li class="lis"><a href="javascript:;">SQL Server</a></li> </ul> </li> </ul> <ul class="menuList" style="border-left:1px solid #e3e3e3;"> <li> <h3>商业应用</h3> <ul> <li class="lis"><a href="javascript:;">UC 统一沟通</a></li> <li class="lis"><a href="javascript:;">云计算</a></li> <li class="lis"><a href="javascript:;">商业软件平台</a></li> <li class="lis"><a href="javascript:;">企业生产力基础架构</a></li> </ul> <h3>开发工具</h3> <ul> <li class="lis"><a href="javascript:;">Visual Studio 开发工具</a></li> <li class="lis"><a href="javascript:;">MSDN 开发人员网站</a></li> </ul> <h3>设计与个人体验</h3> <ul> <li class="lis"><a href="javascript:;">Expression</a></li> <li class="lis"><a href="javascript:;">Silverlight</a></li> </ul> </li> </ul> <ul class="menuList" style="border-left:#e3e3e3;"> <li> <h3>个人生活与娱乐产品</h3> <ul> <li class="lis"><a href="javascript:;">DirectX (英)</a></li> <li class="lis"><a href="javascript:;">微软拼音输入法</a></li> <li class="lis"><a href="javascript:;">Skype</a></li> </ul> <h3>硬件</h3> <ul> <li class="lis"><a href="javascript:;">微软硬件首页</a></li> <li class="lis"><a href="javascript:;">鼠标</a></li> <li class="lis"><a href="javascript:;">键盘</a></li> </ul> <h3>Windows Phone</h3> <ul> <li class="lis"><a href="javascript:;">Windows Phone 首页</a></li> <li class="lis"><a href="javascript:;">应用与下载</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">下载</a> <div class="list"> <div> <ul class="menuList"> <li> <h3>下载中心</h3> <ul> <li class="lis"><a href="javascript:;">微软中国下载中心</a></li> <li class="lis"><a href="javascript:;">Windows 下载</a></li> <li class="lis"><a href="javascript:;">Office 下载</a></li> <li class="lis"><a href="javascript:;">Server 下载</a></li> <li class="lis"><a href="javascript:;">Office Marketplace 下载</a></li> </ul> </li> </ul> <ul class="menuList" style="border-left:1px solid #e3e3e3;"> <li> <h3>最新下载</h3> <ul> <li class="lis"><a href="javascript:;">Internet Explorer 8</a></li> <li class="lis"><a href="javascript:;">Internet Explorer 9</a></li> <li class="lis"><a href="javascript:;">Office 2010 试用版</a></li> <li class="lis"><a href="javascript:;">Silverlight</a></li> <li class="lis"><a href="javascript:;">Windows 7 Service Pack 1</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">安全与更新</a> <div class="list"> <div> <ul class="menuList"> <li> <h3>安全与更新</h3> <ul> <li class="lis"><a href="javascript:;">安全中心首页</a></li> <li class="lis"><a href="javascript:;">Microsoft Update</a></li> <li class="lis"><a href="javascript:;">Office Update</a></li> <li class="lis"><a href="javascript:;">微软安全软件</a></li> <li class="lis"><a href="javascript:;">恶意软件删除工具</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">培训与支持</a> <div class="list"> <div> <ul class="menuList"> <li> <h3>产品支持</h3> <ul> <li class="lis"><a href="javascript:;">帮助与支持首页</a></li> <li class="lis"><a href="javascript:;">Windows 帮助</a></li> <li class="lis"><a href="javascript:;">Office 帮助</a></li> <li class="lis"><a href="javascript:;">TechNet 支持</a></li> <li class="lis"><a href="javascript:;">MSDN 支持</a></li> </ul> </li> </ul> <ul class="menuList" style="border-left:1px solid #e3e3e3;"> <li> <h3>活动</h3> <ul> <li class="lis"><a href="javascript:;">微软活动中心</a></li> <li class="lis"><a href="javascript:;">培训</a></li> <li class="lis"><a href="javascript:;">微软 IT 课堂</a></li> <li class="lis"><a href="javascript:;">微软在线培训及认证</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">立即购买</a> <div class="list"> <div> <ul class="menuList"> <li> <h3>立即购买</h3> <ul> <li class="lis"><a href="javascript:;">微软产品选购平台首页</a></li> <li class="lis"><a href="javascript:;">个人用户选购平台</a></li> <li class="lis"><a href="javascript:;">企业用户选购平台</a></li> <li class="lis"><a href="javascript:;">特别优惠</a></li> <li class="lis"><a href="javascript:;">批量许可授权</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">解决方案</a> <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;"> <div> <ul class="menuList"> <li> <h3>合作伙伴解决方案</h3> <ul> <li class="lis"><a href="javascript:;">查找合作伙伴解决方案</a></li> </ul> <h3>企业和组织</h3> <ul> <li class="lis"><a href="javascript:;">Microsoft Dynamics ERP & CRM</a></li> <li class="lis"><a href="javascript:;">大型企业信息化专区</a></li> <li class="lis"><a href="javascript:;">教育信息化专区</a></li> <li class="lis"><a href="javascript:;">微软中小企业在线体验中心</a></li> <li class="lis"><a href="javascript:;">微软正版授权中心</a></li> </ul> </li> </ul> <ul class="menuList" style="border-left:1px solid #e3e3e3;"> <li> <h3>开发人员和 IT 专业人士</h3> <ul> <li class="lis"><a href="javascript:;">MSDN</a></li> <li class="lis"><a href="javascript:;">TechNet</a></li> <li class="lis"><a href="javascript:;">IT 专业社区</a></li> </ul> <h3>中国案例中心</h3> <ul> <li class="lis"><a href="javascript:;">微软中国案例中心</a></li> </ul> <h3>微软技巧与帮助</h3> <ul> <li class="lis"><a href="javascript:;">微软家庭馆</a></li> <li class="lis"><a href="javascript:;">微软工作馆</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">合作伙伴</a> <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;"> <div> <ul class="menuList"> <li> <h3>合作伙伴</h3> <ul> <li class="lis"><a href="javascript:;">微软合作伙伴网络</a></li> <li class="lis"><a href="javascript:;">查找微软合作伙伴</a></li> <li class="lis"><a href="javascript:;">微软合作伙伴网络权益概览</a></li> <li class="lis"><a href="javascript:;">加入微软合作伙伴网络(MPN)</a></li> <li class="lis"><a href="javascript:;">订阅微软行动宝盒(MAPs)</a></li> </ul> </li> </ul> </div> </div> </li> <li class="msMnu_Item"> <a href="javascript:;" class="menu">关于微软</a> <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;"> <div> <ul class="menuList"> <li> <h3>关于微软</h3> <ul> <li class="lis"><a href="javascript:;">关于微软</a></li> <li class="lis"><a href="javascript:;">微软新闻</a></li> <li class="lis"><a href="javascript:;">微软在线视频中心</a></li> <li class="lis"><a href="javascript:;">投资者关系 (英)</a></li> <li class="lis"><a href="javascript:;">招贤纳士</a></li> </ul> </li> </ul> </div> </div> </li> </ul> </div> </body> </html>
Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara membuat menu lungsur turun jadual WPS: Selepas memilih sel di mana anda ingin menetapkan menu lungsur, klik "Data", "Kesahan" dalam urutan, dan kemudian buat tetapan yang sepadan dalam kotak dialog pop timbul untuk menurunkan menu kami. Sebagai perisian pejabat yang berkuasa, WPS mempunyai keupayaan untuk mengedit dokumen, jadual data statistik, dll., yang memberikan banyak kemudahan untuk ramai orang yang perlu berurusan dengan teks, data, dll. Untuk menggunakan perisian WPS dengan mahir untuk memberikan kami banyak kemudahan, kami perlu menguasai pelbagai operasi perisian WPS yang sangat asas Dalam artikel ini, editor akan berkongsi dengan anda cara menggunakan perisian WPS. operasi menu bawah dalam jadual WPS yang muncul. Selepas membuka borang WPS, mula-mula pilih

Cara menggunakan JS dan Baidu Map untuk melaksanakan fungsi pan peta Baidu Map ialah platform perkhidmatan peta yang digunakan secara meluas, yang sering digunakan untuk memaparkan maklumat geografi, kedudukan dan fungsi lain dalam pembangunan web. Artikel ini akan memperkenalkan cara menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi pan peta dan memberikan contoh kod khusus. 1. Persediaan Sebelum menggunakan API Peta Baidu, anda perlu memohon akaun pembangun pada Platform Terbuka Peta Baidu (http://lbsyun.baidu.com/) dan mencipta aplikasi. Penciptaan selesai

Alat penting untuk analisis saham: Pelajari langkah-langkah untuk melukis carta lilin dalam PHP dan JS, contoh kod khusus diperlukan Dengan perkembangan pesat Internet dan teknologi, perdagangan saham telah menjadi salah satu cara penting bagi banyak pelabur. Analisis saham adalah bahagian penting dalam membuat keputusan pelabur, dan carta lilin digunakan secara meluas dalam analisis teknikal. Mempelajari cara melukis carta lilin menggunakan PHP dan JS akan memberikan pelabur maklumat yang lebih intuitif untuk membantu mereka membuat keputusan yang lebih baik. Carta candlestick ialah carta teknikal yang memaparkan harga saham dalam bentuk candlestick. Ia menunjukkan harga saham

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Cara menggunakan PHP dan JS untuk mencipta carta lilin saham Carta lilin saham ialah grafik analisis teknikal biasa dalam pasaran saham Ia membantu pelabur memahami saham dengan lebih intuitif dengan melukis data seperti harga pembukaan, harga penutup, harga tertinggi. dan harga terendah turun naik harga saham. Artikel ini akan mengajar anda cara membuat carta lilin saham menggunakan PHP dan JS, dengan contoh kod khusus. 1. Persediaan Sebelum memulakan, kita perlu menyediakan persekitaran berikut: 1. Pelayan yang menjalankan PHP 2. Pelayar yang menyokong HTML5 dan Kanvas 3

Dengan perkembangan pesat kewangan Internet, pelaburan saham telah menjadi pilihan semakin ramai orang. Dalam perdagangan saham, carta lilin adalah kaedah analisis teknikal yang biasa digunakan Ia boleh menunjukkan trend perubahan harga saham dan membantu pelabur membuat keputusan yang lebih tepat. Artikel ini akan memperkenalkan kemahiran pembangunan PHP dan JS, membawa pembaca memahami cara melukis carta lilin saham dan menyediakan contoh kod khusus. 1. Memahami Carta Lilin Saham Sebelum memperkenalkan cara melukis carta lilin saham, kita perlu memahami dahulu apa itu carta lilin. Carta candlestick telah dibangunkan oleh orang Jepun

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi peta haba peta Pengenalan: Dengan perkembangan pesat Internet dan peranti mudah alih, peta telah menjadi senario aplikasi biasa. Sebagai kaedah paparan visual, peta haba boleh membantu kami memahami pengedaran data dengan lebih intuitif. Artikel ini akan memperkenalkan cara menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi peta haba peta dan memberikan contoh kod khusus. Kerja penyediaan: Sebelum memulakan, anda perlu menyediakan item berikut: akaun pembangun Baidu, buat aplikasi dan dapatkan AP yang sepadan

Untuk melaksanakan kesan menu lungsur dalam Program Mini WeChat, contoh kod khusus diperlukan Dengan populariti Internet mudah alih, Program Mini WeChat telah menjadi bahagian penting dalam pembangunan Internet, dan semakin ramai orang telah mula memberi perhatian kepada dan. gunakan Program Mini WeChat. Pembangunan program mini WeChat adalah lebih mudah dan pantas daripada pembangunan APP tradisional, tetapi ia juga memerlukan penguasaan kemahiran pembangunan tertentu. Dalam pembangunan program mini WeChat, menu lungsur ialah komponen UI biasa, yang mencapai pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan kesan menu lungsur dalam applet WeChat dan menyediakan praktikal
