介绍 在这篇文章中,我将向您展示的增强版本的Windows 8菜单的网站。在我的上一篇文章中,我演示了基本的菜单,但现在我们将看到更多类似的菜单。我们不会再做Windows 8菜单分析但我会列举一些关键点。让我们开始。 V2 关键改进, 以下改进了这个版本的菜单: 快捷键结合的菜单。现在除了屏幕开始按钮“启动键”和“Ctrl键”也可以用来访问菜单。改进的背景效果改进的瓷砖改进菜单打开效果改进菜单关闭其他一些小的修复效果 HTML为菜单 & lt; divid =“bg”祝辞& lt; / div>& lt; divclass =“菜单”比;& lt; divclass =“主要”在项目1 & lt; / div>& lt; divclass =“主要”在项目2 & lt; / div>& lt; divclass =“主要”在项目3 & lt; / div>& lt; divclass =“主要”在第四项& lt; / div>& lt; divclass =“主要”在第五项& lt; / div>& lt; divclass =“主要”在项目6 & lt; / div>& lt; divclass =“主要”在项目7 & lt; / div>& lt; divclass =“主要”在项目8 & lt; / div>& lt; divclass =“主要”在项目9 & lt; / div>& lt; divclass =“主要”在10项& lt; / div>& lt; divclass =“主要”在项目11 & lt; / div>& lt; divclass =“主要”在项目12 & lt; / div>& lt; divclass =“主要”在项目13 & lt; / div>& lt; divclass =“主要”在14项& lt; / div>& lt; divclass =“主要”在项目15 & lt; / div>& lt; divclass =“主要”在项目16 & lt; / div>& lt; / div>& lt; divid =“桌子”祝辞& lt; / div>& lt; divid = "开始"祝辞& lt; / div> 1号线代表的背景菜单。 2号线代表了瓷砖的集合。 Div类=“主要”表示一个瓷砖。 Div的id =“桌子”表示“桌面”应用程序只 Div的id =“开始”屏幕上的start按钮。 CSS的菜单 隐藏,复制Code
.menu{position:fixed;left:10px;top:10px;display:inline-block;width:100%; height:100%;}#desk{position:fixed;display:none;left:0px;top:0px; background-color:#4a5b4c;width:100%;height:100%;}.main{width:24%; height:24%;background-color:orange;transition:all 0.5s;display: inline-block;margin:2px;}#bg{position:fixed;left:0px;top:0px; width:100%;height:100%;background-mage:url ("http://www.softwarecrew.com/wp-content/uploads/2011/08/windows_8_wallpaper_large.png"); }#start{position:fixed;bottom:5px;left:5px;height:50px;width:50px; background-mage:url("http://img.mywindows8.org/images3/Windows-8-start-button.jpg"); background-size: contain;}
在CSS中,固定的宽度和高度值转换成百分比和添加样式信息为桌面(桌子)。 jQuey为菜单 jQuery的主要改变。 使用动画功能是完全移除由于滑动的滞后效应。滑动效果是完全移除。宽松类型从“线性”改为“easeOutQuint”添加额外的代码之间切换桌面和菜单。隐藏,收缩,Code1副本。$(文档)时函数(){ 2. $ (" .main ") .mousedown(函数(){ 3.(美元). css(“-webkit-transform”,“规模(0.93,0.93)”); 4. }); 5. 6. $ (" .main ") .mouseup(函数(){ 7. (美元). css(“-webkit-transform”,“规模(1,1)”); 8. }); 9. var vis = false; 10. $(" #开始").click(函数(){ 11. 如果(vis = = = false) 12. { 13. $(" #台”).fadeOut (200); 14. $ (" # bg ") .fadeIn (500); 15. $ (" .menu "),告诉(“规模”,{ 16. 方向:“都”, 17. 产地:“中产阶级”,“中心”, 18. 百分比:100, 19. 放松:“easeOutQuint” 20.},500); 21. vis = true; 22. } 23. 其他{ 24. $ (" # bg ") .fadeOut (500); 25. $(“.menu”)。hide(“规模”,{方向:“都”,产地:“中产阶级”,“中心”,百分比:50},300); 26. vis = false; 27. $(" #台”).fadeIn (200); 28. } 29. }); 30.美元(文档).keydown(函数(e) { 31. 如果(e。这= = 17 | | e。= = 91) { 32. $(" #开始”).trigger(“点击”); 33. } 34. }); 35. }); 从1 - 8行,代码不变。 第九行声明和定义了一个变量“活力”(可见的)注意菜单的可见性。它将设置为true时,菜单是开放的,它将是错误的,如果菜单关闭。最初,它设置为false,因为菜单是关闭的。 10号线是绑定与屏幕上的“开始”按钮的单击事件。 11号线是检查是否菜单是可见的。如果它是开放的,那么代码行号12 - 22执行。如果菜单是不可见的,那么将执行代码行号24 - 28。 13号线隐藏桌面菜单可以打开。 行号14将菜单背景。 行号15 - 20将瓷砖集合在菜单上缩放效果。瓷砖将在两个方向上。原点是他们开始扩展。百分比是多少。宽松是一个动画速度指定函数。500是一个时间以毫秒为单位的时间就在做这个动画。 行号24消失的菜单背景。 行25号隐藏菜单的所有瓷砖与缩放效果。方向是,换句话说比例应该从双方发生。起源是结束扩展的地方。百分比是多少。这实际上线收缩瓷砖而不是扩展自百分比设置为50。它减少了瓷砖从100%到50%,然后隐藏菜单。 行号27使桌面活动。 行号30结合keydown事件该文档。每当用户按下一个键时，就触发此事件。 第31行检查按下的键是Windows键还是控制键。如果是，那么第32行将触发屏幕上的Start按钮上的click事件。 输出 现场输出 总结 我希望您喜欢这篇文章。不过，我还有很多东西要展示，所以请继续关注我的下一篇文章。如果有任何疑问，请在评论区提问。感谢你的阅读。不要忘记分享和喜欢这篇文章中的源代码，它归档在:CodeProject, jQuery 
本文转载于：http://www.diyabc.com/frontweb/news12131.html