Metro练习(1)

最新推荐文章于 2025-04-26 07:48:35 发布

dfgd8989

最新推荐文章于 2025-04-26 07:48:35 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zyh-bg/archive/2012/08/08/2629126.html

版权

本文探讨了Windows 8中使用的Metro界面设计趋势，并通过JavaScript实现了一个基本的颜色变化效果，展示了当鼠标悬停在元素上时背景色的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

听老师经常提起Metro，是一种趋势吧，不是很明白，但是win8的界面好像是用其做的,但是稍稍练习了下颜色模块，还可以，鼠标放上去了会变色的，这应该是最基本的一步吧~~

Metro

 1 <script type="text/javascript">
 2     function changeColor(dom){
 3         dom.style.backgroundColor="#99CCFF";
 4     }
 5     function backColor(dom){
 6         dom.style.backgroundColor="#00CCFF";
 7     }
 8 </script>
 9 <style type="text/css">
10     .message{
11         width:400px;
12         height:100px;
13         border:1px dashed #000;
14         margin:1px auto;
15         background-color:#00CCFF;        
16     }
17 </style>
18 </head>
19 
20 <body>
21     <div class = "message" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">one
22     </div>
23     <div class = "message" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">two
24     </div>
25     <div class = "message" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">three
26     </div>
27     <div class = "message" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">four
28     </div>
29     <div class = "message" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">five
30     </div>
31     <div class = "message" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">six
32     </div>
33 </body>
34 </html>