I was a little excited when I posted a blog for the first time. I am now in Tianjin. I hope to work in the front-end industry in the future and I will not be able to study for a long time. In order to record my learning process and gains, I am of course a consolidation. The things I write may not be as tall as the big bull, but they are just some basic content. Of course, I will also collect some good articles that I think are good (actually, I can understand them most...). I believe that I can write something high-end in the future. come on!
I talk a little bit nonsense, talk about serious matters. A few days ago, I watched a teaching video of Tanzhou Education. The teacher used JQuery to achieve the effect of a magnifying glass (the teacher said that it was too slow, and he was jumping around and watching it). Since I haven't learned JQuery well, but the basic code is still understandable, I want to practice with the js I am currently learning, and finally successfully achieved this effect.
Idea: First let the move block and the bimg block hide. When the mouse moves to the box, the move block and the bimg block are displayed, and the current position of the mouse is obtained. Then, after calculation, the appropriate value for the move block and the bimg block is given to achieve the magnifying glass effect (the calculation of the position of the move block and the bimg block is detailed later)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Magnifying Glass</title> <link href="css/bigimg.css" rel="stylesheet" /> <script src="js/bigimg.js"></script></head><body onload="bigimg()"> <div id="box"> <img src="images/simg.jpg"> <div id="move"></div> <div id="bimg"> <img id="b_bimg"> src="images/bimg.jpg"> </div> </div></body></html>
CSS style:
*{ margin:0px; padding:0px;}#box{ width:430px; height:430px; margin:100px; margin-left:17%; position:relative;// Use relative positioning here so that other elements can rely on this element to position}#move{ background-image:url(../images/move.png); width:220px; height:220px; position:absolute; left:0px; top:0px; display:none;//Let it hide first and use js to display it}#bimg{ width:430px; height:430px; overflow:hidden; position:absolute; top:0px; left:450px; display:none;//Let it hide first and use js to display it}#bimg img{ width:800px; height:800px; position:absolute; top:0px; left:0px;}Javascript:
function bigimg(){ var bbox = document.getElementById("box"); var bmove = document.getElementById("move"); var bbimg = document.getElementById("bimg"); var b_bimg = document.getElementById("b_bimg"); bbox.onmouseover = function(){//Move the mouse to box to display large pictures and select boxes bbimg.style.display = "block"; bmove.style.display="block"; } bbox.onmouseout = function(){//Mousemove does not display large pictures and check boxes when the box is moved away from the mouse bbimg.style.display = "none"; bmove.style.display="none"; } bbox.onmousemove = function(e){//Get the mouse position var x = e.clientX;//The position of the mouse relative to the viewport var y = e.clientY; var t = bbox.offsetTop;//The position of the box relative to the viewport var l = bbox.offsetLeft; var _left = x - l - bmove.offsetWidth/2;//Calculate the position of the move var _top = y - t -bmove.offsetHeight/2; if(_top<=0)//Slide to the top of the box_top = 0; else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//Slide to the bottom of the box_top = bbox.offsetHeight-bmove.offsetHeight ; if(_left<=0)//Slide to the leftmost of the box_left=0; else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//Slide to the rightmost of the box_left=bbox.offsetWidth-bmove.offsetWidth ; bmove.style.top = _top +"px";//Set the position of move bmove.style.left = _left + "px"; var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//Calculate the movement ratio var h = _top/(bbox.offsetHeight-bmove.offsetHeight); var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//Calculate the position of the large image var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w; b_bimg.style.top = -b_bimg_top + "px";//Set the location information of the large image b_bimg.style.left = -b_bimg_left + "px"; } }Reproduction image:
1. Calculation of move block
Black arrow:
var x = e.clientX;//The position of the mouse relative to the viewport var y = e.clientY;
Red arrow:
var t = bbox.offsetTop;//The position of box relative to the viewport var l = bbox.offsetLeft;
Orange arrows:
var _left = x - l - bmove.offsetWidth/2;//calculate the position of move var _top = y - t -bmove.offsetHeight/2;
2. Calculation of bimg block
Use the scale of the move block within the movable range to set the position of the large image
Move range of move block:
bbox.offsetWidth-bmove.offsetWidth
The current coordinates of the move block account for the movable range:
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//Calculate the movement ratio var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
Bimg's range of movement:
b_bimg.offsetHeight-bbimg.offsetHeight
Bimg's location:
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//Calculate the position of the large image var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
The above simple example of using js to achieve the effect of a magnifying glass is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.