首先我们先要导入几张图片（我已导入完毕）：
；
好，我们先写一个
<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){ ?//判断为019 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
用js把图片做的富有动态感，并对以后需要用着的属性进行封装
原文地址：https://www.cnblogs.com/dzlx/p/8111275.html