首先我们先要导入几张图片（我已导入完毕）： ；
好，我们先写一个
<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){ 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;
},
`
效果演示：