首先我们先要导入几张图片(我已导入完毕):
;
好,我们先写一个
<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 `
效果演示: