新航路师徒学院

 找回密码
 立即注册
搜索
查看: 444|回复: 0

【新航路】菜单点击效果js 源代码

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-31 12:26:13 | 显示全部楼层 |阅读模式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>菜单效果</title>
  6. <meta name="description" content="菜单效果" />
  7. <meta name="keywords" content="菜单效果" />
  8. <link rel="stylesheet" href="../css/index.css"/>
  9. <style>
  10. .k_zy_menu {width:229px;padding:11px 0 0 8px;}
  11. .k_zy_menu h2 {padding-left:17px;cursor:default;height:30px;line-height:30px;color:#0d7d8c;font-weight:normal;background:url(../images/k_jian.png) no-repeat 0 9px;}
  12. .k_zy_menu h2 a {color:#0d7d8c;}
  13. .k_zy_menu .k_jian {background:url(../images/k_jia.png) no-repeat 0 9px;}
  14. .k_zy_menu h3 {margin-left:21px;cursor:default;padding-left:20px;height:24px;line-height:24px;color:#0d7d8c;font-weight:normal;background:url(../images/k_jian.png) no-repeat 0 6px;}
  15. .k_zy_menu h3 a {color:#0d7d8c;}
  16. .k_zy_menu h3 a:hover,.k_zy_menu h3 a:hover {text-decoration:none;}
  17. .k_zy_menu .k_jia {background:url(../images/k_jia.png) no-repeat 0 6px;}
  18. .k_zy_menu p {padding-left:62px;}
  19. .k_zy_menu p span {display:block;width:163px;font-family:Arial;height:20px;line-height:20px;color:#0d7d8c;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
  20. .k_zy_menu p span a {color:#0d7d8c;font-family:Arial;}
  21. </style>
  22. </head>
  23. <body>
  24. <div class="k_zy_menu a_hover" id="k_zy_menu">
  25.         <h2>技术资源</h2>
  26.         <div>
  27.                 <h3><a href="ziyuan1.html">游戏</a></h3>
  28.                 <p>
  29.                         <span><a href="ziyuan1.html" title="Mobile Gaming & Graphics">Mobile Gaming & Graphics</a></span>
  30.                         <span><a href="ziyuan1.html" title="Augmented Reality (Vuforia)">Augmented Reality (Vuforia)</a></span>
  31.                         <span><a href="ziyuan1.html" title="Peer-to-Peer (AllJoyn)">Peer-to-Peer (AllJoyn)</a></span>
  32.                 </p>
  33.                 <h3><a href="ziyuan2.html">多媒体</a></h3>
  34.                 <p>
  35.                         <span><a href="#" title="Emaging">Emaging</a></span>
  36.                         <span><a href="#" title="Audio">Audio</a></span>
  37.                 </p>
  38.                 <h3><a href="ziyuan3.html">效能</a></h3>
  39.                 <p>
  40.                         <span><a href="#" title="Efficency">Efficency</a></span>
  41.                 </p>
  42.         </div>
  43. </div>
  44. <script>
  45. var _Q = {
  46.         css : function(obj,attr,value){
  47.                 if(!obj)return null;
  48.                 if(arguments.length===2){       
  49.                         if(typeof attr == 'string'){
  50.                                 if(attr == 'float'){
  51.                                         if(-[1,]){
  52.                                                 attr = 'cssFloat';
  53.                                         }else {
  54.                                                 attr = 'styleFloat';
  55.                                         }
  56.                                 }
  57.                                 if(obj.currentStyle){
  58.                                         return obj.currentStyle[attr];
  59.                                 }else {
  60.                                         return getComputedStyle(obj,false)[attr];
  61.                                 }
  62.                         }else {
  63.                                 for(var key in attr){
  64.                                         obj.style[key] = attr[key];
  65.                                         if(key=='float'){
  66.                                                 if(-[1,]){
  67.                                                         key = 'cssFloat';
  68.                                                         obj.style[key] = attr['float'];
  69.                                                 }else {
  70.                                                         key = 'styleFloat';
  71.                                                         obj.style[key] = attr['float'];
  72.                                                 }
  73.                                         }
  74.                                 }
  75.                         }
  76.                 }else if(arguments.length===3){
  77.                         if(attr == 'float'){
  78.                                 if(-[1,]){
  79.                                         attr = 'cssFloat';
  80.                                 }else {
  81.                                         attr = 'styleFloat';
  82.                                 }
  83.                         }
  84.                         obj.style[attr] = value;
  85.                 }
  86.         },
  87.         first : function(oParent){
  88.                 if(!oParent)return null;
  89.                 return oParent.firstElementChild || oParent.firstChild;
  90.         },
  91.         last : function(oParent){
  92.                 if(!oParent)return null;
  93.                 return oParent.lastElementChild || oParent.lastChild;
  94.         },
  95.         prev : function(obj){
  96.                 if(!obj)return null;
  97.                 return obj.previousElementSibling || obj.previousSibling;
  98.         },
  99.         next : function(obj){
  100.                 if(!obj)return null;
  101.                 return obj.nextElementSibling || obj.nextSibling;
  102.         },
  103.         addEvent : function(obj,type,fn){
  104.                 if(!obj)return null;
  105.                 if(obj.addEventListener){
  106.                         obj.addEventListener(type,function(event){
  107.                                 var rtn = fn.call(obj,event);
  108.                                 if(rtn==false){
  109.                                         event.cancelBubble = true;
  110.                                         event.preventDefault();
  111.                                 }
  112.                         },false)
  113.                 }else {
  114.                         obj.attachEvent('on'+type,function(){
  115.                                 var rtn = fn.call(obj,window.event);
  116.                                 if(rtn==false){
  117.                                         window.event.cancelBubble = true;
  118.                                         return false;
  119.                                 }
  120.                         })
  121.                 }
  122.         },
  123.        
  124. }
  125. var oMenu = document.getElementById('k_zy_menu');
  126. _Q.addEvent(oMenu,'click',function(event){
  127.         var oEvent = event || window.event;
  128.         var oTarget = oEvent.srcElement || oEvent.target;
  129.         if(oTarget.tagName.toLowerCase()=='h3'){
  130.                 if(_Q.css(_Q.next(oTarget),'display')=='block'){
  131.                         _Q.next(oTarget).style.display = 'none';
  132.                         oTarget.className = 'k_jia';
  133.                 }else {
  134.                         _Q.next(oTarget).style.display = 'block';
  135.                         oTarget.className = '';
  136.                 }
  137.         }
  138.         if(oTarget.tagName.toLowerCase()=='h2'){
  139.                 if(_Q.css(_Q.next(oTarget),'display')=='block'){
  140.                         _Q.next(oTarget).style.display = 'none';
  141.                         oTarget.className = 'k_jian';
  142.                 }else {
  143.                         _Q.next(oTarget).style.display = 'block';
  144.                         oTarget.className = '';
  145.                 }
  146.         }
  147. });
  148. </script>
  149. </body>
  150. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-9-20 06:50 , Processed in 0.139194 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表