Native JS writing focus graph effect _javascript skills

Their own use of the original JS write a simple focus map, is the primary use of JS.

HTML section

<div class= "Focuspicture" > <section class= "Mphoto" id= "Mphoto" >  </section><!--major Large map--> <section class=" Ophoto "> <div class= "Imgwrap" > <section class= "on" >  </section> <section>  </section> <section>  </section> <section>
                 </section> <section>  </section> <secti On> &Lt;img src= "images/20161021/b_5809ba288384e.jpg"/> </section> <section>
           </section> </div> </section><!--Other small maps--> <section class= "Prevnext" > <div class= "prev" &G
              T <i></i> </div><!--Previous--> <div class= "Next" > <i&gt ;</i> </div><!--Next--> </section><!--page DOWN--> </div><!--coke Dot plot Area-->

js Section

Window.onload = function () {/* Focus map effects/var Mphoto = document.getElementById ("Mphoto");
 var imgwrap = document.getelementsbyclassname ("imgwrap") [0]; var wrapsize = 4; /* Picture container maximum display picture number */if (Imgwrap.getelementsbytagname ("section"). length>wrapsize) {imgwrap.innerhtml =
 imgwrap.innerhtml+imgwrap.innerhtml;
 var oimages = imgwrap.getelementsbytagname ("section"); for (var i = 0; i<oimages.length; i++) {oimages[i].onmouseover = function () {for (var j = 0; J<oimages.len Gth
   J + +) {removeclass (Oimages[j], "on");
   var imgsrc = this.getelementsbytagname ("img") [0].SRC;
   AddClass (This, "on");
  Mphoto.getelementsbytagname ("img") [0].SRC = IMGSRC;
 }/* Up and down page container * * var oprevnext = document.getelementsbyclassname ("Prevnext") [0];
 var Oprev = oprevnext.getelementsbyclassname ("prev") [0];
 var onext = Oprevnext.getelementsbyclassname ("Next") [0]; var oimageheight = oimages[0].getelementsbytagname ("img") [0].height| |
 0;
var opositiontop = imgwrap.offsettop; var imgindex = 0;
  if (oimages.length>wrapsize*2) {oPrev.style.display = "block";
 ONext.style.display = "block";
  /* Previous page/* Oprev.onclick=function () {imgindex-=1;
  if (imgindex<=0) {imgindex = 6;
  var otop = imgindex* (oimageheight+8);
  
  ImgWrap.style.top =-otop+ "px"; /* Get the index of the current picture * * for (var i = 0; i<oimages.length; i++) {var obol = Hasclass (Oimages[i], ' on ') | |
   False
    if (obol) {var index = Oindex (oimages[i],oimages);
    Index=index-1;
    if (imgindex==6) {index = 6;
    for (var j = 0; j<oimages.length; j + +) {/* Clear other picture on style * * Removeclass (Oimages[j], "on");
    } addclass (Oimages[index], "on");
    var imgsrc = oimages[index].getelementsbytagname ("img") [0].SRC;


    Mphoto.getelementsbytagname ("img") [0].SRC = IMGSRC;
   return false;
  }}/* Next page */Onext.onclick = function () {imgindex+=1;
  if (imgindex>=6) {imgindex = 0;
  var otop = imgindex* (oimageheight+8); ImgWrap.style.top =-otop+ "px"; /* Get the index of the current picture * * for (var i = 0; i<oimages.length; i++) {var obol = Hasclass (Oimages[i], ' on ') | |
   False
    if (obol) {var index = Oindex (oimages[i],oimages);
    index=index+1;
    if (imgindex==0) {index = 1;
    for (var j = 0; j<oimages.length; j + +) {/* Clear other picture on style * * Removeclass (Oimages[j], "on");
    } addclass (Oimages[index], "on");
    var imgsrc = oimages[index].getelementsbytagname ("img") [0].SRC;


    Mphoto.getelementsbytagname ("img") [0].SRC = IMGSRC;
   return false; Element,cname {/}} function Hasclass {//Check class for return!!
Element.className.match (New RegExp (' (\\s|^) ' +cname+ ' (\\s|$) ');
 function AddClass (element,cname) {//Add a class if (!hasclass (Element,cname)) {element.classname = ' +cname; } function Removeclass (element,cname) {//Remove a class if (Hasclass (Element,cname)) {element.classname = Element.classna
 Me.replace (New RegExp (' (\\s|^) ' +cname+ ' (\\s|$) '); } function Oindex (current, obj) {/* Get Index */for (var i = 0, length = obj.length i<length; i++) {if (obj[i] = = current) {return i;
 } 
 } 
}

CSS Section

. productinfo. focuspicture{width:698px;
 Float:left;
 position:relative;
border-right:1px solid #d9cdb4;
 }. ProductInfo. focuspicture mphoto{width:542px;


height:360px;
 }. ProductInfo. focuspicture Mphoto img{width:100%;
height:100%;
 }. ProductInfo. focuspicture ophoto{width:128px;
 height:352px;
 Position:absolute;
 right:14px;
 top:4px;


Overflow:hidden;
 }. ProductInfo. Ophoto div{width:128px;
 Position:absolute;
 left:0;
 top:0;
 -webkit-transition:top 2s ease-out;
 -moz-transition:top 2s ease-out; 
transition:top 2s ease-out;
 }. ProductInfo. Ophoto section{height:78px;
 MARGIN:8PX 0;
 position:relative;
Cursor:pointer;
 }. ProductInfo. Ophoto Section::before {content: "";
 Display:block;
 width:100%;
 height:100%;
 Background-color:rgba (255,255,255,.42);
 Position:absolute;
 left:0;
top:0;


}. ProductInfo. Ophoto section.on::before{Display:none;
 . ProductInfo. focuspicture. Ophoto img{width:100%; height:100%;
 }. ProductInfo. focuspicture prevnext{width:32px;
 height:32px;
 Position:absolute;
 Top: -4px;
right:62px;
 ProductInfo. Prevnext Div.prev, ProductInfo. Prevnext div.next{;
 height:32px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 Background-color: #fff;
 Position:absolute;
 left:0;
 -webkit-transition:all 25s;
 -moz-transition:all 25s;
 Transition:all 25s;
 Display:none;
Cursor:pointer;
 }. ProductInfo. prevnext div.prev{top:0;


box-shadow:0 -2px 4px Rgba (0,0,0,.24);
 }. ProductInfo. prevnext div.next{top:336px;
box-shadow:0 2px 4px Rgba (0,0,0,.24);


ProductInfo. Prevnext div.prev:hover{box-shadow:2px-2px 3px rgba (0,0,0,.24);


ProductInfo. Prevnext div.next:hover{Box-shadow: -2px 2px 3px Rgba (0,0,0,.24);
 . productinfo. Prevnext Div.prev i,. ProductInfo. Prevnext div.next; i{width:16px;
 height:16px;
 Position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 Margin:auto; CursOr:pointer; ProductInfo. Prevnext div.prev i{background:url (..
 /images/arrows-icon.png) 0-16px no-repeat;
 BACKGROUND-SIZE:48PX 32px;
bottom:2px; ProductInfo. Prevnext div.next i{background:url (..
 /images/arrows-icon.png) 0 0 no-repeat;
 BACKGROUND-SIZE:48PX 32px;
top:2px;
 ProductInfo. Prevnext div.prev:hover i,. ProductInfo. Prevnext div.next:hover i{-webkit-transform:scale (1.1);
 -moz-transform:scale (1.1);
Transform:scale (1.1); ProductInfo. Prevnext div.prev:hover i{background:url (..
 /images/arrows-icon.png) -16px-16px no-repeat;
BACKGROUND-SIZE:48PX 32px; ProductInfo. Prevnext div.next:hover i{background:url (..
 /images/arrows-icon.png) -16px 0px no-repeat;
BACKGROUND-SIZE:48PX 32px; ProductInfo. Prevnext div.prev:active i{background:url (..
 /images/arrows-icon.png) -32px-16px no-repeat;
BACKGROUND-SIZE:48PX 32px; ProductInfo. Prevnext div.next:active i{background:url (..
 /images/arrows-icon.png) -32px 0px no-repeat; BACKGROUND-SIZE:48PX 32px;

 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.