Article From:https://www.cnblogs.com/wenweitai/p/9059863.html

Simple magnifying mirror

 

Analysis of the effect of magnifying mirror:

First, the effect of tabs

When the mouse is moved into a small chart list, when a picture is taken, the effect of the small picture border and the corresponding big picture appear in the big box.

 

 

Two. Effect of magnifying mirror

When the mouse moves into the big picture, a magnifying glass appears in the mouse position, the mouse is in the center of the magnifying glass, and the large box is displayed on the right side.

 

Three. Scope effect

1、The scope of the magnifying mirror is in the large box

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

 

Four. Picture ratio

 

HTML 

<!-- Big picture-->
<div id="box">
  <!--A large picture displayed by default-->
  <img src="imgs/1-large.jpg" class="middle" width="400" height="400">
  <!-- Magnifier-->
  <div id="filter"></div>
</div>
<!-- Detail diagram-->
<div id="max">
  <img src="imgs/1-large.jpg" id="maxImg">
</div>
<!-- List of small graphs-->
<div>
  <img src="imgs/1-small.jpg" class="small" data-url="imgs/1-large.jpg">
  <img src="imgs/2-small.jpg" class="small" data-url="imgs/2-large.jpg">
  <img src="imgs/3-small.jpg" class="small" data-url="imgs/3-large.jpg">
  <img src="imgs/4-small.jpg" class="small" data-url="imgs/4-large.jpg">
  <img src="imgs/5-small.jpg" class="small" data-url="imgs/5-large.jpg">
</div>

 

 CSS

.small {
    margin: 0 10px;
    border: 1px solid #fff;
}
.small:hover {
    border-color: #000;
}
/*Magnifying mirror positioning, initial hiding * /#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 setting position and absolute location, initial hiding * /#max{position: absolute; left:430px; top:0; overflow: hidden;Width:400px; height: 400px;}#maxImg{width:800px; height: 800px; position: absolute; display: none;}

js

//Get all the small graphsVar oSmall = document.querySelectorAll (".Small");/ / get a large box of picturesVar omiddle = document.querySeleCtor (".Middle");/ / get the detail diagramVar omaxImg = document.getElementById ("maxImg");/ / gain magnifying mirrorVar oFilter = docuMent.getElementById ("filter");/ / get large boxVar oBox = document.getElementById ("box");/ / tab effect/ / / first, add to each small graphMouse eventfor(var i=0;i<oSmall.length;i++){
//When moving into the current small graphOSmall[i].onmouseover = function () {/ / obtain the custom attributes of the current small graphVar SRC = this.getAttribute ("Data-url ");/ / get the SRC assigned to the big picture and detail map.Omiddle.src = SRC;OmaxImg.src = SRC;}}/ / / magnifying mirror effect/ / whenWhen the mouse moves into the big box, the magnifying glass and the detail map are displayed.OBox.onmouseover = function () {OFilter.style.display = "block";OmaxImg.style.disPlay = "block";This.onmousemove = function (E) {Var e = e||event;/ / mouse positionVar L = e.clientX - oBox.offsetLeft - oFilter.offsetWidth/2;Var t = e.clientY - oBox.offsetTop - oFilter.offsetHeight/2;/ / /The judging conditions of magnifying glass in the box (three eyes 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);The method of //if judgment/*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;] * * /Position of / / assignment magnifierOFilter.Style.left = l+'px';OFilter.style.top = t+'px';Position of / / assignment detail graphOmaxImg.style.left = -2*l+'px';OmaxImG.style.top = -2*t+'px';}}/ / after the mouse is removed from the big box, the magnifying glass and the detail map are hidden.OBox.onmouseout = function (E) {OFilter.style.diSplay = "None";OmaxImg.style.display = "None";}

 

 

 

 

Similar Posts: