制作树形菜单

2019独角兽企业重金招聘Python工程师标准>>>

1、树形菜单

    
    
    
     .childMenu{ display:none; list-style:none;}
    
    
     function show (id) {
   var ul = document.getElementById(id);
   
   if (ul.style.display == "block") {
    ul.style.display = "none"; 
   } else {
    ul.style.display = "block";
   } 
  }
    


 
文学艺术
     
         
先锋写作
            
小说散文
            
诗风词韵
        
    
贴图专区
     
         
真我风采
            
视频贴图
            
行行摄摄
        
    
房产论坛
     
         
楼市话题
            
我要买房
            
租房心语
        
    

执行结果：

2、对联广告

样例：

    
    
    
     #adv{ position:absolute; left:50px; top:30px; z-index:2;}
    
    
     function test (id) {
   var divObj = document.getElementById(id);
   var left,top;
   
   if (divObj.currentStyle) {
    // IE浏览器
    left = divObj.currentStyle.left;
    top = divObj.currentStyle.top;
   } else {
    left = document.defaultView.getComputedStyle(divObj,null).left;
    top = document.defaultView.getComputedStyle(divObj,null).top;
   }
   
   //alert("left=" + divObj.style.left + ";top=" + divObj.style.top);
   alert("left=" + left + ";top=" + top);
   
   divObj.style.left = parseInt(left) + 20 + "px";
   divObj.style.top = parseInt(top) + 20 + "px"; 
  }
    


 

 内部样式的div

         

 3、获取鼠标滚动距离

 样例：

    
    
    
     #adv{ position:absolute; left:50px; top:30px; z-index:2;}
  #main{height:2000px; background-color:#0FF;}
    
    
     function test (id) {
   var divObj = document.getElementById(id);
   var left,top;
   
   if (divObj.currentStyle) {
    // IE浏览器
    left = divObj.currentStyle.left;
    top = divObj.currentStyle.top;
   } else {
    left = document.defaultView.getComputedStyle(divObj,null).left;
    top = document.defaultView.getComputedStyle(divObj,null).top;
   }
   
   //alert("left=" + divObj.style.left + ";top=" + divObj.style.top);
   alert("left=" + left + ";top=" + top);
   
   divObj.style.left = parseInt(left) + 20 + "px";
   divObj.style.top = parseInt(top) + 20 + "px"; 
  }
  
  function getScroll () {
   // 获取文档根元素html
   //var obj = document.documentElement;
   var obj = document.body;
   alert("scrollTop=" + obj.scrollTop + ";scrollLeft=" + obj.scrollLeft);
  }
  window.onscroll = getScroll;
    


 

 内部样式的div

              

4、对联广告

    
    
    
     #adv{ position:absolute; left:50px; top:30px; z-index:2;}
  #main{height:2000px; background-color:#0FF;}
    
    
  var advObj;
  var left;
  // 全局变量不能定义为top，为什么？
  var top2;

 // 获取初始化位置 
     function init () {
   advObj = document.getElementById("adv");
   //var left,top;
   
   if (advObj.currentStyle) {
    // IE浏览器
    left = advObj.currentStyle.left;
    top2 = advObj.currentStyle.top;
   } else {
    top2 = document.defaultView.getComputedStyle(advObj,null).top;
    left = document.defaultView.getComputedStyle(advObj,null).left;
   }
   
   left = parseInt(left);
   top2 = parseInt(top2);
  }
  
// 获取滚动条位置
  function getScroll () {
   // 获取文档根元素html
   //var obj = document.documentElement;
   var obj = document.body;
   //alert("scrollTop=" + obj.scrollTop + ";scrollLeft=" + obj.scrollLeft);
   var scrollTop = obj.scrollTop;
   var scrollLeft = obj.scrollLeft;
   scrollTop = parseInt(scrollTop);
   scrollLeft = parseInt(scrollLeft);
   
   adv.style.left = left + scrollLeft + "px";
   adv.style.top = top2 + scrollTop + "px";
  }
  
  window.onload = init;
  window.onscroll = getScroll;