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

首先我们先要导入几张图片（我已导入完毕）：
；

好，我们先写一个

<div ></div>,

定义一个

class="contair", 

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

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

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

<style type="text/css"> 
 .contair *{ 
 display: block; //变为块级元素 
padding: 3px 0px; 
 } 
 .contair{ 
 margin: 0px auto; 
 width: 300px; 
 } 
 .sf{ 
 transition:all 0.5s; //动画 
}； 

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

再写一个

window.onload=function(){//onload 事件会在页面或图像加载完成后立即发生。
 repeatElement($("hhs"))//后面会提到

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

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

第一种dom.：

`var dom = new Object(); 
 function $(oId){ 
 return document.getElementById(oId); 
 }

dom.addClass = function(obj, cn){ 
 var lName = obj.className; 
 if(lName.length==0){ 
 obj.className = cn; 
 }else{ 
 obj.className =(” “+cn); 
 } 
 }

dom.nextSibling = function(obj,sname){ 
 var exel = obj.nextSibling; 
 for(;exel!=null;exel = exel.nextSibling){ 
 var cName = exel.nodeName.toLocaleLowerCase(); 
 if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
 return exel; 
 } 
 } 
 return null; 
 }`

第二种dom[" "]= ：

`var dom = new Object(); 
 function $(oId){ 
 return document.getElementById(oId); 
 } 
 dom[“addClass”] = function(obj, cn){ 
 var lName = obj.className; 
 if(lName.length==0){ 
 obj.className = cn; 
 }else{ 
 obj.className =(” “+cn); 
 } 
 }

dom[“nextSibling”] = function(obj,sname){ 
 var exel = obj.nextSibling; 
 for(;exel!=null;exel = exel.nextSibling){ 
 var cName = exel.nodeName.toLocaleLowerCase(); 
 if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
 return exel; 
 } 
 } 
 return null; 
 } 

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

function $(oId){ 
 return document.getElementById(oId); 
 } 
 var dom = { 
 addClass: function(obj, cn){ 
 var lName = obj.className; 
 if(lName.length==0){ 
 obj.className = cn; 
 }else{ 
 obj.className =(” “+cn); 
 } 
 }, 
 nextSibling: function(obj,sname){ 
 var exel = obj.nextSibling; 
 for(;exel!=null;exel = exel.nextSibling){ 
 var cName = exel.nodeName.toLocaleLowerCase(); 
 if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
 return exel; 
 } 
 } 
 return null; 
 }, 
 `

 效果演示：

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