製做樹形菜單

時間 2019-11-20

標籤製做菜單简体版

原文原文鏈接

一、樹形菜單javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>樹形菜單</title>
    <style type="text/css">
     .childMenu{ display:none; list-style:none;}
    </style>
    <script type="text/javascript">
     function show (id) {
   var ul = document.getElementById(id);
   
   if (ul.style.display == "block") {
    ul.style.display = "none"; 
   } else {
    ul.style.display = "block";
   } 
  }
    </script>
</head>
<body>
 <P><a href="javascript:show('art');">文學藝術</a></P>
     <ul class="childMenu" id="art">
         <li>先鋒寫做</li>
            <li>小說散文</li>
            <li>詩風詞韻</li>
        </ul>
    <p><a href="javascript:show('photo');">貼圖專區</a></p>
     <ul class="childMenu" id="photo">
         <li>真我風采</li>
            <li>視頻貼圖</li>
            <li>行行攝攝</li>
        </ul>
    <p><a href="javascript:show('house');">房產論壇</a></p>
     <ul class="childMenu" id="house">
         <li>樓市話題</li>
            <li>我要買房</li>
            <li>租房心語</li>
        </ul>
    <p></p>
</body>
</html>

執行結果：css

二、對聯廣告html

樣例：java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>隨鼠標滾動的廣告圖片</title>
    <style type="text/css">
     #adv{ position:absolute; left:50px; top:30px; z-index:2;}
    </style>
    <script type="text/javascript">
     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"; 
  }
    </script>
</head>
<body>
 <div id="adv"><img src="images/錢塘湖春行.jpg"/></div>
 <div id="testDiv" style="background-color:#F00; position:absolute; left:300px; top:50px; width:80px; height:200px;">內部樣式的div</div>
    <input type="button" value="測試內部樣式座標位置" onclick="test('testDiv')"/>
    <input type="button" value="測試內部樣式座標位置2" onclick="test('adv')"/>
</body>
</html>

三、獲取鼠標滾動距離瀏覽器

樣例：測試

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>隨鼠標滾動的廣告圖片</title>
    <style type="text/css">
     #adv{ position:absolute; left:50px; top:30px; z-index:2;}
  #main{height:2000px; background-color:#0FF;}
    </style>
    <script type="text/javascript">
     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;
    </script>
</head>
<body>
 <div id="adv"><img src="images/錢塘湖春行.jpg"/></div>
 <div id="testDiv" style="background-color:#F00; position:absolute; left:300px; top:50px; width:80px; height:200px;">內部樣式的div</div>
    <input type="button" value="測試內部樣式座標位置" onclick="test('testDiv')"/>
    <input type="button" value="測試內部樣式座標位置2" onclick="test('adv')"/>
    <div id="main"></div>
</body>
</html>

四、對聯廣告ui

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>隨鼠標滾動的廣告圖片</title>
    <style type="text/css">
     #adv{ position:absolute; left:50px; top:30px; z-index:2;}
  #main{height:2000px; background-color:#0FF;}
    </style>
    <script type="text/javascript">
  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;
    </script>
</head>
<body>
 <div id="adv"><img src="images/錢塘湖春行.jpg"/></div>
    <div id="main"></div>
</body>
</html>

五、總結spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。