« Previous Entries

JS笔记：构造函数，类，类属性，类方法

23rd 九月 2008, 02:48 下午
  1. <script type="text/javascript">
  2.         function Circle(radius){
  3.             this.r = radius;
  4.         }
  5.         Circle.PI = 3.1415926;
  6.         Circle.prototype.area = function(){
  7.             return Circle.PI * this.r * this.r;
  8.         }
  9.         Circle.max = function(a,b){
  10.             if(a.r > b.r) return a;
  11.             else return b;
  12.         }
  13.        
  14.         var c = new Circle(1.0);
  15.         c.r = 2.2;
  16.         var d = new Circle(1.2);
  17.         alert(Circle.max(c,d).r);
  18.     </script>
分类目录： js笔记  |  1 条评论

几个常用的方法

18th 九月 2008, 06:29 下午
  1. //通过指定class和指定标签的对象
  2. function getClass(tag,cssName){
  3.     if(!document.getElementsByTagName(tag)) return;
  4.     var tags = document.getElementsByTagName(tag);
  5.     var cssName;
  6.     var arr = [];
  7.     for(var i = 0;i < tags.length;i++){
  8.         if(tags[i].className == cssName){
  9.             arr.push(tags[i]);
  10.             return arr;
  11.         }
  12.     }
  13. }
  14. //获得指定id的对象
  15. function getId(idName){
  16.     return document.getElementById(idName);
  17. }
  18. //为指定对象添加指定的class
  19. function addCss(element,cssName){ 
  20.     var element,cssName;
  21.     if (!element.className || element.className == cssName){ 
  22.         element.className = cssName;
  23.     } 
  24.     else{ 
  25.         element.className = element.className + " " + cssName;
  26.     } 
  27. }
  28. //移除指定对象的指定class
  29. function removeCss(element,cssName){ 
  30.     var element,cssName;
  31.     var oldCss = element.className;
  32.     var cssList = oldCss.split(" ");
  33.     for(var i = 0;i < cssList.length;i++){ 
  34.         if (cssList[i] == cssName) { 
  35.             cssList[i] = "";
  36.             break;
  37.         } 
  38.     } 
  39.     element.className = cssList.join(" ");
  40. }
分类目录： js笔记  |  2 条评论

js笔记：点击轮换

31st 七月 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笔记  |  Comment
« Previous Entries