Archive for 7月 2008

« Previous Entries

js笔记：点击轮换

31st 7月 2008, 01:31 下午

html部分：

  1. <body>
  2.     <div id="wrapper">
  3.         <div id="left" class="c"><div></div></div>
  4.         <div id="center" class="c"></div>
  5.         <div id="right" class="c"></div>
  6.     <div id="dd" class="c"><div><div style="width:100%;height:400px;background:#fff;"></div></div></div>
  7.     </div>
  8. </body>

css部分：

  1. *{padding:0;margin:0;}
  2. body{width:1003px;overflow-x:hidden;background:#fff;margin:0 auto;}
  3. #wrapper{width:1003px;overflow:hidden;height:800px;position:relative;}
  4. #left{background:#ccc;}
  5. #center{background:#f60;}
  6. #right{background:#333;}
  7. #dd{background:#000;left:0;}
  8. .c{position:absolute;width:1003px;left:-1003px;top:0;height:600px;cursor:pointer;}

jsvascript部分：

  1. <script type="text/javascript">
  2.     function move(){
  3.         var divTag = document.getElementById("wrapper").getElementsByTagName("div");//取得需要轮播的DIV
  4.         var divWidth = 1003;//定义轮播宽度
  5.         //遍历需要轮播的DIV
  6.         for(var i = 0;i < divTag.length;i++){
  7.             //只有class=c的DIV开始轮播
  8.             if(divTag[i].className == "c"){
  9.                 var bb;
  10.                 var cc;
  11.                 //点击开始
  12.                 divTag[i].onclick = function(event){
  13.                     if(!event){
  14.                         event = window.event;
  15.                     }
  16.                     var el = event.target || event.srcElement;
  17.                     //如果当前点击的元素不是需要轮播的DIV，则寻找它的父节点，直到找到需要轮播的元素
  18.                     while(el.className != "c"){
  19.                         el = el.parentNode;
  20.                         }
  21.                     var firstDiv = el.parentNode.firstChild;
  22.                     //查找轮播元素的父级节点的第一个子节点
  23.                     if(firstDiv.nodeType == 3){
  24.                         firstDiv = firstDiv.nextSibling;
  25.                     }
  26.                     //如果当前点击的不是第一个子节点，开始轮播
  27.                     if(firstDiv != el){
  28.                         //查找当前节点的上一个相邻节点
  29.                         var preTag = el.previousSibling;
  30.                         if(preTag.nodeType == 3){
  31.                             preTag = preTag.previousSibling;
  32.                         }
  33.                         var n = el.offsetLeft;//取得左边距的值
  34.                         var k = preTag.offsetLeft;//取得相邻节点的左边距的值
  35.                         //当前元素和相邻元素的left值每20毫秒减小100像素
  36.                         var bb = setInterval(
  37.                             function(){
  38.                                 if(n < divWidth){
  39.                                     el.style.left = n + "px";
  40.                                     preTag.style.left = k + "px";
  41.                                     n = n + 100;
  42.                                     k = k + 100;
  43.                                     el.setAttribute("class","c");
  44.                                     preTag.setAttribute("class","c");
  45.                                 }else{
  46.                                     el.style.left = divWidth + "px";
  47.                                     preTag.style.left = 0 + "px";
  48.                                     window.clearInterval(bb);
  49.                                 }
  50.                             },20
  51.                         );
  52.                     }
  53.                     //如果当前点击元素是第一个子节点，则复原成初始状态
  54.                     else{
  55.                         var child = document.getElementById("wrapper").childNodes;
  56.                         var last = document.getElementById("wrapper").lastChild;
  57.                         if(last.nodeType == 3){
  58.                             last = last.previousSibling;
  59.                         }
  60.                         var t = last.offsetLeft;
  61.                         var y = el.offsetLeft;
  62.                         for(var m = 0;m < child.length;m++){
  63.                             if(child[m].nodeType != 3 && child[m] != last && child[m] != el){
  64.                                 child[m].style.left = -divWidth + "px";
  65.                             }
  66.                         }
  67.                         cc = setInterval(
  68.                             function(){
  69.                                 if(t > 0){
  70.                                     last.style.left = t + "px";
  71.                                     el.style.left = y + "px";
  72.                                     t = t - 100;
  73.                                     y = y - 100;
  74.                                 }
  75.                                 else{
  76.                                     last.style.left = 0 + "px";
  77.                                     el.style.left = -divWidth + "px";
  78.                                     window.clearInterval(cc);
  79.                                 }
  80.                             },20
  81.                         )
  82.                     }
  83.                 }
  84.             }
  85.         }
  86.     }
  87.     window.onload = move;
  88.     </script>

查看效果

分类： js笔记  |  评论

js笔记：动态创建HTML内容[改进版]

31st 7月 2008, 11:20 上午

点击当前菜单时隐藏其他子菜单

  1. <script type="text/javascript">
  2.         function insertAfter(newElement,targetElement){
  3.             var parent = targetElement.parentNode;
  4.             if(parent.lastChild == targetElement){
  5.                 parent.appendChild(newElement);
  6.             }else{
  7.                 parent.insertBefore(newElement,targetElement.nextSibling);
  8.             }
  9.         }
  10.         function create(){
  11.             var tagList = document.getElementsByTagName("li");
  12.             var menuList = new Array("First","Seconde","Third");
  13.             for(var i = 0;i < tagList.length;i++){
  14.                 tagList[i].getElementsByTagName("p")[0].onclick = function(event){
  15.                     if(!event){
  16.                         event = window.event;
  17.                     }
  18.                     var el = event.target || event.srcElement;
  19.                     var newTag = document.createElement("dl");
  20.                     var childNav = document.getElementById("nav").getElementsByTagName("dl");
  21.                     el.setAttribute("class","open");
  22.                     if(el.getAttribute("class") == "open" && el.nextSibling == null){
  23.                         for(var n = 0;n < childNav.length;n++){
  24.                             childNav[n].parentNode.firstChild.removeAttribute("class");
  25.                             childNav[n].parentNode.removeChild(childNav[n]);
  26.                         }
  27.                         insertAfter(newTag,el);
  28.                         for(var k = 0;k < menuList.length;k++){
  29.                             var newTagDd = document.createElement("dd");
  30.                             newTag.appendChild(newTagDd);
  31.                             var menuText = menuList[k];
  32.                             var newText = document.createTextNode(menuText);
  33.                             newTagDd.appendChild(newText);
  34.                         }
  35.                     }
  36.                     else{
  37.                         el.parentNode.removeChild(el.nextSibling);
  38.                         el.removeAttribute("class");
  39.                     }
  40.                 }
  41.             }
  42.         }
  43.         window.onload = function(){
  44.             create();
  45.         }
  46.     </script>

查看演示

分类： js笔记  |  评论

js笔记：动态创建HTML内容

30th 7月 2008, 11:44 上午

继续学习JS中，动态创建HTML，点击菜单时，动态创建子菜单，在点击的对象后创建子菜单节点dl，并在该节点中创建子节点dd，并将数组中的元素创建到dd中.
html部分

  1. <body>
  2.     <ul>
  3.         <li><p>The First</p></li>
  4.         <li><p>The Seconde</p></li>
  5.         <li><p>The Third</p></li>
  6.     </ul>
  7.     <div id="test"></div>
  8.     <div id="test1"></div>
  9. </body>

css部分

  1. *{margin:0;padding:0;}
  2. body{font:12px Arial;}
  3. ul{list-style:none;}
  4. li{float:left;width:100px;text-align:center;}
  5. li p {cursor:pointer;}

javascript部分

  1. <script type="text/javascript">
  2.         function insertAfter(newElement,targetElement){
  3.             var parent = targetElement.parentNode;
  4.             if(parent.lastChild == targetElement){
  5.                 parent.appendChild(newElement);
  6.             }else{
  7.                 parent.insertBefore(newElement,targetElement.nextSibling);
  8.             }
  9.         }
  10.         function create(){
  11.             var tagList = document.getElementsByTagName("li");
  12.             var menuList = new Array("First","Seconde","Third");
  13.             for(var i = 0;i < tagList.length;i++){
  14.                 tagList[i].getElementsByTagName("p")[0].onclick = function(event){
  15.                     if(!event){
  16.                         event = window.event;
  17.                     }
  18.                     var el = event.target || event.srcElement;
  19.                     var newTag = document.createElement("dl");
  20.                     if(el.getAttribute("class") != "open"){
  21.                         insertAfter(newTag,el);
  22.                         for(var k = 0;k < menuList.length;k++){
  23.                             var newTagDd = document.createElement("dd");
  24.                             newTag.appendChild(newTagDd);
  25.                             var menuText = menuList[k];
  26.                             var newText = document.createTextNode(menuText);
  27.                             newTagDd.appendChild(newText);
  28.                         }
  29.                         el.setAttribute("class","open");
  30.                     }else{
  31.                         el.parentNode.removeChild(el.nextSibling);
  32.                         el.removeAttribute("class");
  33.                     }
  34.                 }
  35.             }
  36.         }
  37.         window.onload = function(){
  38.             create();
  39.         }
  40.     </script>

查看演示

分类： js笔记  |  1 条评论
« Previous Entries