kmo 发表于 2013-2-7 15:06:16

[转]带拖影的JS菜单

转自:http://www.oschina.net/code/snippet_114440_12182
<html>   <head>      <meta charset="utf-8">      <title>KISSY ColorBg</title>      <script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js">      </script>   </head><body>   <style>   ul,li { margin: 0;padding: 0; list-style: none;}   a { color: #0e3254; text-decoration: none;}   a:hover { color: #f3fdff;}   .menu { margin: 0 auto; width: 240px; background-color: #f8f9fd; font: 12px/1.5 '微软雅黑';}    .menu li a { display: block; padding: 10px;}   </style>   <ul class="menu" id="menu">       <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">全部任务</a></li>       <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">已完成</a></li>       <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">即将开始</a></li>       <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">还在规划中尚未确定</a></li>       <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">私人空间</a></li>       <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">垃圾回收站</a></li>       <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">全部任务</a></li>       <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">已完成</a></li>    <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">即将开始</a></li>    <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">还在规划中尚未确定</a></li>    <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">私人空间</a></li>    <li><a href="" target="_blank" style="background-color: rgb(248, 249, 253); ">垃圾回收站</a></li></ul><script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script><script>(function(S){    var D = S.DOM, E = S.Event, index = -1, as = [];    S.all("#menu a").on("mouseover", function(){var _this = this;index = S.indexOf(_this, S.all("#menu a"));if(as && as.isRunning(_this)){as.stop(false);}      D.css(_this, "background-color", "#66a7e1");    }).on("mouseout", function(){      as = new S.Anim(this, {"backgroundColor":"#f8f9fd"}, 0.5, "easeOut", function(){});as.run();    });})(KISSY);</script></body></html>


问题:这个页面的代码结构很混乱 我尝试把js和css放到head中 但是效果就不无法显示了 这是为什么呢?
页: [1]
查看完整版本: [转]带拖影的JS菜单