[转]带拖影的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]