Simple magnifier for native JavaScript instances

native Simple Magnifier of JavaScript instances

Magnifier Effect Analysis:

One, Tab effect

Mouse move into a small chart list of one of the pictures, small picture border effect, large box appears corresponding large map

Second, Magnifier effect

Mouse move into a large image, the mouse position appears magnifier, the mouse in the center of the magnifying glass, large box to the right of the large detail map

Third, scope effect

1. Magnifying glass activity range in large box

2. When the mouse leaves the big box, the magnifying glass and the detail diagram disappear

Iv. Proportion of pictures

Enlarged frame: Large box: detail picture = 1:2:4

HTML Structure

<!--Big Picture -<DivID= "box"> 　　 <!--the large picture displayed by default - 　　 <imgsrc= "Imgs/1-large.jpg"class= "Middle"width= "The "Height= "The "> 　　 <!--magnifying Glass - 　　 <DivID= "Filter"></Div></Div><!--Detail Chart -<DivID= "Max"> 　　 <imgsrc= "Imgs/1-large.jpg"ID= "Maximg"></Div><!--Small Chart List -<Div> 　　 <imgsrc= "Imgs/1-small.jpg"class= "small"Data-url= "Imgs/1-large.jpg"> 　　 <imgsrc= "Imgs/2-small.jpg"class= "small"Data-url= "Imgs/2-large.jpg"> 　　 <imgsrc= "Imgs/3-small.jpg"class= "small"Data-url= "Imgs/3-large.jpg"> 　　 <imgsrc= "Imgs/4-small.jpg"class= "small"Data-url= "Imgs/4-large.jpg"> 　　 <imgsrc= "Imgs/5-small.jpg"class= "small"Data-url= "Imgs/5-large.jpg"></Div>

CSS Styles

. Small {    margin:0 10px;    border:1px solid #fff;}. Small:hover {    border-color: #000;} /* Magnifier positioning, initial hide */#filter {    width:200px;    height:200px;    Position:absolute;    Background: #000;    opacity:0.5;    left:0;    top:0;    Display:none;} /* Large box Add relative positioning */#box {position:relative;width:400px}/* Detail map set position and absolute positioning, initial hide */#max {Position:absolute;left:430px;top:0;o verflow:hidden;width:400px;height:400px;} #maxImg {width:800px;height:800px;position:absolute; display:none;}

Js

//Get all the small graphs var osmall = Document.queryselectorall (". small");//Get large box of pictures var omiddle = Document.queryselector (". Middle ");//Get details graph var omaximg = document.getElementById (" maximg ");//Get magnifier var ofilter = document.getElementById (" Filter ");//Get large box var OBox = document.getElementById (" box ");//tab effects//Add mouse events to each small chart firstfor (Var i=0;i<osmall.length;i++) {//when moving into the current thumbnail osmall[i].onmouseover = function () {//Gets the custom property of the current small graph var src = this.g 　　　　Etattribute ("Data-url");　　The obtained SRC assignment is given to the large graph and detail graph omiddle.src = src;　　OMAXIMG.SRC = src; }}//Magnifier effect//When the mouse moves into the large box, the magnifying glass and the detail graph show obox.onmouseover = function () {OFilter.style.display = "block"; OmaxImg.style.display =　　"Block"; This.onmousemove = function (e) {var e = e| | event;//mouse position var L = E.clientx-obox.offsetleft-ofilter.offsetwidth/2;var T = e.clienty-obox.offsettop-ofilter.offse theight/2;//magnifying glass in the box judging condition (trinocular judgment) L = l>obox.offsetwidth-ofilter.offsetwidth?obox.offsetwidth-ofilter.offsetwidth :(l<0?0:l); t = t>obox.offsetheight-ofilter.offsetheight?obox.offsetheight-ofilter.offsetheight: (t<0?0:t );//if method of Judging/*if (l>obox.offsetwidth-ofilter.offsetwidth) {L = obox.offsetwidth-ofilter.offsetwidth}if (t> Obox.offsetheight-ofilter.offsetheight) {t = obox.offsetheight-ofilter.offsetheight}if (l<0) {L = 0;} if (t<0) {t = 0;} *///the position of the assigned magnifying glass OFilter.style.leFT = l + ' px '; oFilter.style.top = t+ ' px ';//Assignment detail plot position omaxImg.style.left = -2*l+ ' px '; omaxImg.style.top = -2*t+ ' px ';}} After the mouse moves out of the large box, the magnifying glass, the detail graph hides obox.onmouseout = function (e) {oFilter.style.display = "none"; OmaxImg.style.display = "None";}

Simple magnifier for native JavaScript instances