Use JS to make the picture a dynamic sense, and the future needs to use the attributes to encapsulate

First we need to import a few pictures (I have finished importing):
；

All right, let's write one first.

<></div>,

Define a

Define one <div> again in this <div></div> , define a id="hhs" (casually defined), then define five images below

1 <imgsrc= "N1.jpg"> 2 <imgsrc= "N2.jpg">``<imgsrc= "N3.jpg"> 3 <imgsrc= "N4.jpg">``<imgsrc= "N5.jpg">;

Let's write some of the following code in the stylesheet:

1 <styletype= "Text/css"> 2 . Contair *{ 3 Display:Block;//change to block-level element4 padding:3px 0px; 5  } 6 . Contair{ 7 margin:0px Auto; 8 width:300px; 9  } Ten . SF{  One transition:All 0.5s;//Animation A };

We write a 1 function $ (OID) { 2 return document.getElementById (OID);// This is a method, the method name is the $ parameter is OID. This is the element oid. Passing this OID will help us get the object of the corresponding ID in the HTML code element };

Write One more

The window.onload=function() {//onload event occurs immediately after the page or image has finished loading. Repeatelement ($ ("HHS"))// will be mentioned later

1 Now let's write the main part of the following, define a22. 'functionRepeatelement (Exel//define a parameter) {33.varobj = nextSibling (Exel, "img");//nextsibling Brothers Elements44. while(exel!=NULL){//Loops55. addclass (obj, "SF");//it will be mentioned later that AddClass is added to the node66. Obj.onmouseover =function(){//move the cursor over the picture77. This. style.padding = "10px 0px"//This represents the obj portion of the previous layer88. }99. Obj.onmouseout =function(){//cursor removal pictureTen10. This. style.padding = "10px 0px" One11. } AObj.nextsibling (obj, "img");//cycle the next picture -13. } -14. }`; the15. Now write add node AddClass: -16. 'functionaddclass (OBJ,CN) { -17.varLname=obj.classname;//ClassName Property Sets or returns the Class property of an element -18.if(Lname.length ==0) {//judged to be 0 +Obj.classname =cn;  -20.}Else{ +Obj.classname = ("" +cn); A22. } at23. }`; -24. Now write brother node nextsibling: -25. 'functionnextSibling (obj,sname) { -26.varexe=lobj.nextsibling;//Get it first -27. for(; exel!=NULL; Exel =exel.nextsibling) { -28.varCNAME = Exel.nodeName.toLocaleLowerCase ();//Convert to lowercase in29.if(CNAME = =sname) { -30.returnExel; to31. } +32. } -33.return NULL;  the34.} '

We can encapsulate nextsibling and addclass for later use, packaged in three different ways

The first kind of dom.:

1`varDom =NewObject ();2  function$ (oId) {3  returndocument.getElementById (oId);4  }5 6Dom.addclass =function(obj, cn) {7  varLName =Obj.classname;8  if(lname.length==0){ 9Obj.classname =cn;Ten}Else{  OneObj.classname = ("" +cn);  A  }  -  } -  theDom.nextsibling =function(obj,sname) { -  varExel =obj.nextsibling; -   for(; exel!=NULL; Exel =exel.nextsibling) {  -  varCName =exel.nodeName.toLocaleLowerCase (); +  if(exel.nodetype==node.element_node&&sname==cName) {  -  returnExel; +  }  A  }  at  return NULL;  -}`

The second kind of Dom[""]= :

1`varDom =NewObject ();2  function$ (oId) {3  returndocument.getElementById (oId);4  } 5dom["addclass"] =function(obj, cn) {6  varLName =Obj.classname;7  if(lname.length==0){ 8Obj.classname =cn;9}Else{ TenObj.classname = ("" +cn);  One  }  A  } -  -dom["nextSibling"] =function(obj,sname) { the  varExel =obj.nextsibling; -   for(; exel!=NULL; Exel =exel.nextsibling) {  -  varCName =exel.nodeName.toLocaleLowerCase (); -  if(exel.nodetype==node.element_node&&sname==cName) {  +  returnExel; -  }  +  }  A  return NULL;  at}

The third kind of var dom = {...} ：

1 function$ (oId) {2  returndocument.getElementById (oId);3  } 4  varDom = { 5AddClass:function(obj, cn) {6  varLName =Obj.classname;7  if(lname.length==0){ 8Obj.classname =cn;9}Else{ TenObj.classname = ("" +cn);  One  }  A  },  -NextSibling:function(obj,sname) { -  varExel =obj.nextsibling; the   for(; exel!=NULL; Exel =exel.nextsibling) {  -  varCName =exel.nodeName.toLocaleLowerCase (); -  if(exel.nodetype==node.element_node&&sname==cName) {  -  returnExel; +  }  -  }  +  return NULL;  A  },  at`

Effect Demo:

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

Use JS to make the picture a dynamic sense, and the future needs to use the attributes to encapsulate