[转]带拖影的JS菜单

kmo

浏览: 17160 次
性别:
来自: 珠海

最近访客更多访客>>

BigBird2012

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

html javascript

<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[index] && as[index].isRunning(_this)){
			as[index].stop(false);
		}
        D.css(_this, "background-color", "#66a7e1");
    }).on("mouseout", function(){
        as[index] = new S.Anim(this, {"backgroundColor":"#f8f9fd"}, 0.5, "easeOut", function(){});
		as[index].run();
    });
})(KISSY);
</script>
</body></html>

问题：这个页面的代码结构很混乱我尝试把js和css放到head中但是效果就不无法显示了这是为什么呢？

分享到：