• 用js把图片做的富有动态感,并对以后需要用着的属性进行封装


    首先我们先要导入几张图片(我已导入完毕):
    如图

    好,我们先写一个

    <div ></div>,

    定义一个

    class="contair", 

    在这<div>中再定义一个<div></div>,定义一个id="hhs"(随便定义的),然后在下面定义五个图片

    1 <img src="n1.jpg"> 
    2 <img src="n2.jpg">``<img src="n3.jpg"> 
    3 <img src="n4.jpg">``<img src="n5.jpg">; 

    我们再在样式表中写上一些需要用的,如下代码:

     1 <style type="text/css"> 
     2  .contair *{ 
     3  display: block; //变为块级元素 
     4 padding: 3px 0px; 
     5  } 
     6  .contair{ 
     7  margin: 0px auto; 
     8  width: 300px; 
     9  } 
    10  .sf{ 
    11  transition:all 0.5s; //动画 
    12 }

    我们写一个 1 function $(oId){ 2 return document.getElementById(oId);//这个就是个方法, 方法名字叫$ 参数为oId. 这个是元素oId.传入这个oId, 会帮我们拿到html代码元素里相应的id的对象 };  

    再写一个

    window.onload=function(){//onload 事件会在页面或图像加载完成后立即发生。
     repeatElement($("hhs"))//后面会提到
     1 现在我们再写后面主体部分,先定义一个
     2 2.    `function repeatElement(exel //定义一个参数){
     3 3.            var obj = nextSibling(exel,"img");//nextSibling兄弟元素
     4 4.            while(exel!=null){  //循环
     5 5.            addClass(obj,"sf");  //后面会提到,addClass为添加节点
     6 6.            obj.onmouseover = function(){   //光标移到图片上
     7 7.                this.style.padding = "10px 0px" //this表示上一层的obj部分
     8 8.            }
     9 9.            obj.onmouseout = function(){    //光标移除图片
    10 10.                this.style.padding = "10px 0px"
    11 11.            }
    12 12.            obj.nextSibling(obj,"img"); //循环下一次图片
    13 13.            }
    14 14.    }`;
    15 15.    现在写添加节点addClass:
    16 16.    `function addClass(obj,cn){
    17 17.    var lName=obj.className;//className属性设置或返回元素的 class 属性
    18 18.    if(lName.length ==0){  //判断为0
    19 19.        obj.className = cn;  
    20 20.    }else{
    21 21.        obj.className = (" "+cn);
    22 22.    }
    23 23.    }`;
    24 24.    现在写兄弟节点nextSibling:
    25 25.    `function nextSibling(obj,sname){
    26 26.        var exe=lobj.nextSibling ;//先获取它
    27 27.        for(; exel!=null;exel = exel.nextSibling){
    28 28.            var cname = exel.nodeName.toLocaleLowerCase();//转换为小写
    29 29.            if(cname == sname){
    30 30.                return exel;
    31 31.            }
    32 32.        }
    33 33.        return null;        
    34 34.    }`

    我们可以对nextSibling和addClass进行封装,以便以后使用,封装有三种方式

    第一种dom.:

     1 `var dom = new Object(); 
     2  function $(oId){ 
     3  return document.getElementById(oId); 
     4  }
     5 
     6 dom.addClass = function(obj, cn){ 
     7  var lName = obj.className; 
     8  if(lName.length==0){ 
     9  obj.className = cn; 
    10  }else{ 
    11  obj.className =(” “+cn); 
    12  } 
    13  }
    14 
    15 dom.nextSibling = function(obj,sname){ 
    16  var exel = obj.nextSibling; 
    17  for(;exel!=null;exel = exel.nextSibling){ 
    18  var cName = exel.nodeName.toLocaleLowerCase(); 
    19  if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
    20  return exel; 
    21  } 
    22  } 
    23  return null; 
    24  }`

    第二种dom[" "]=

     1 `var dom = new Object(); 
     2  function $(oId){ 
     3  return document.getElementById(oId); 
     4  } 
     5  dom[“addClass”] = function(obj, cn){ 
     6  var lName = obj.className; 
     7  if(lName.length==0){ 
     8  obj.className = cn; 
     9  }else{ 
    10  obj.className =(” “+cn); 
    11  } 
    12  }
    13 
    14 dom[“nextSibling”] = function(obj,sname){ 
    15  var exel = obj.nextSibling; 
    16  for(;exel!=null;exel = exel.nextSibling){ 
    17  var cName = exel.nodeName.toLocaleLowerCase(); 
    18  if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
    19  return exel; 
    20  } 
    21  } 
    22  return null; 
    23  } 

    第三种var dom = {...}:

     1 function $(oId){ 
     2  return document.getElementById(oId); 
     3  } 
     4  var dom = { 
     5  addClass: function(obj, cn){ 
     6  var lName = obj.className; 
     7  if(lName.length==0){ 
     8  obj.className = cn; 
     9  }else{ 
    10  obj.className =(” “+cn); 
    11  } 
    12  }, 
    13  nextSibling: function(obj,sname){ 
    14  var exel = obj.nextSibling; 
    15  for(;exel!=null;exel = exel.nextSibling){ 
    16  var cName = exel.nodeName.toLocaleLowerCase(); 
    17  if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
    18  return exel; 
    19  } 
    20  } 
    21  return null; 
    22  }, 
    23  `

     效果演示:

    http://localhost:63342/demo/js/ttt1.html

  • 相关阅读:
    django wsgi nginx 配置
    supervisor error: <class 'socket.error'>, [Errno 110]
    gunicorn 启动无日志
    获取windows 网卡GUID和ip信息
    亚马逊EC2根硬盘空间扩容
    pypcap 安装
    mysql 1709: Index column size too large. The maximum column size is 767 bytes.
    mysql死锁检查
    D3.js画思维导图(转)
    用D3.js画树状图
  • 原文地址:https://www.cnblogs.com/dzlx/p/8111275.html
Copyright © 2020-2023  润新知