Home > Developer > Web Develop
The first blog, but also a little excited, I am now in Tianjin University, hope to engage in the front end of this industry, study time is not long, write blog in order to record their learning process and harvest, of course, is also a consolidation. May write things not as big as Daniel, just some basic content, of course, I will also collect some I think good, good article (in fact, the most important thing is I can read .... ）。 I believe I can write something tall on my own. Come on!
There's a little bit of crap, that's a lot to say. A few days ago saw a Tanzhou education teaching video, wherein the teacher is using jquery to achieve the effect of magnifying glass (the teacher is talking about is too slow, all kinds of nonsense, jumping to see). Since I have not studied jquery well, but those basic code can still be understood, so I want to take now learning JS practice a hand, and finally succeeded in achieving this effect.
Idea: First let move block and bimg block hide, when the mouse moves to box, make move block and bimg block display, get the mouse current position, The Magnifier effect is then computed to the appropriate values for the move block and the bimg block (the calculation of the position of the move block and the bimg block is described in more detail later)
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Magnifying glass</title> <Linkhref= "Css/bigimg.css"rel= "stylesheet" /> <Scriptsrc= "Js/bigimg.js"></Script></Head><Bodyonload= "bigimg ()"> <DivID= "box"> <imgsrc= "Images/simg.jpg"alt="#"> <DivID= "Move"></Div> <DivID= "Bimg"> <imgID= "B_bimg"src= "Images/bimg.jpg"alt="#"> </Div> </Div></Body></HTML>
CSS style:
*{ margin:0px; padding:0px;} #box { width:430px; height:430px; margin:100px; margin-left:17%; position:relative;//here uses relative positioning, so that other elements can rely on this element to locate} #move { background-image:url (. /images/move.png); width:220px; height:220px; Position:absolute; left:0px; top:0px; display:none;//let him hide first, use JS to make it display} #bimg { width:430px; height:430px; Overflow:hidden; Position:absolute; top:0px; left:450px; display:none;//first let him hide, with JS make it display} #bimg img{ width:800px; height:800px; Position:absolute; top:0px; left:0px;}Javascript:
functionbigimg () {varBbox = document.getElementById ("box"); varBmove = document.getElementById ("Move"); varbbimg = document.getElementById ("bimg"); varb_bimg = document.getElementById ("b_bimg"); Bbox.onmouseover=function(){//move the mouse over the box to display the large picture and marqueeBbimg.style.display = "Block"; Bmove.style.display= "Block"; } bbox.onmouseout=function(){//Mouse off box does not display large pictures and marqueeBbimg.style.display = "None"; Bmove.style.display= "None"; } bbox.onmousemove=function(e) {//Get mouse position varx = E.clientx;//the position of the mouse relative to the viewport vary =E.clienty; vart = bbox.offsettop;//The position of box relative to the viewport varL =Bbox.offsetleft; var_left = X-l-bmove.offsetwidth/2;//calculates the position of the movevar_top = Y-t-BMOVE.OFFSETHEIGHT/2;if(_top<=0)//slide to the top of box_top = 0; Else if(_top>=bbox.offsetheight-bmove.offsetheight)//slide to the bottom of box_top = bbox.offsetheight-Bmove.offsetheight; if(_left<=0)//slide to the far left of box_left=0; Else if(_left>=bbox.offsetwidth-bmove.offsetwidth)//slide to the far right of box_left=bbox.offsetwidth-Bmove.offsetwidth; Bmove.style.top= _top + "px";//set the position of the moveBmove.style.left = _left + "px"; varW = _left/(bbox.offsetwidth-bmove.offsetwidth);//Calculate the proportion of movementvarh = _top/(bbox.offsetheight-bmove.offsetheight);varB_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight) *h;//calculate the position of a large map varB_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth) *W; B_bimg.style.top=-b_bimg_top + "px";//set location information for large graphsB_bimg.style.left =-b_bimg_left + "px"; } }
：
1, the calculation of the move block
Black Arrow:
var x = E.clientx; // the position of the mouse relative to the viewport var y = e.clienty;
Red Arrows:
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;//calculates the position of the move var _top = Y-t-bmove.offsetheight/2;
2, the calculation of bimg block
Use the move block to set the position of a large map in a movable range
Moving range of the move block:
Bbox.offsetwidth-bmove.offsetwidth
The move block's current coordinates are proportional to the movable range:
var w = _left/(bbox.offsetwidth-bmove.offsetwidth);//calculate the moving ratio var h = _top/( Bbox.offsetheight-bmove.offsetheight);
Bimg 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 a large map var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth) *w;
Restricting the move block moving range is simple, in the introduction of the calculation of the move block to be involved in, it is not much to say. The effect of this simple magnifying glass is realized.
May 22, 2016 21:33
Using JS to realize the effect of magnifying glass
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
