I believe you are not too unfamiliar with themagnifying glass effect. In our development, JavaScript is often used to achieve the magnifying glass effect, especially in projects such as developer malls, which are commonly used. Magnifying glass effect, so today we will introduce to you a simple example ofusing JavaScriptto achieve the magnifying glass effect.
Idea:
Let the move block and bimg block be hidden first. When the mouse moves to the box, make the move block and bimg block appear and get the mouse. The current position is then calculated to give appropriate values to the move block and bimg block to achieve the magnifying glass effect (the calculation of the position of the move block and bimg block will be described in detail later)
css style:
*{ margin:0px; padding:0px; } #box{ width:430px; height:430px; margin:100px; margin-left:17%; position:relative;//这里使用相对定位,好让其他的元素能依靠这个元素定位 } #move{ background-image:url(../images/move.png); width:220px; height:220px; position:absolute; left:0px; top:0px; display:none;//先让他隐藏,用js使其显示 } #bimg{ width:430px; height:430px; overflow:hidden; position:absolute; top:0px; left:450px; display:none;//先让他隐藏,用js使其显示 } #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(){//鼠标移动到box上显示大图片和选框 bbimg.style.display = "block"; bmove.style.display="block"; } bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框 bbimg.style.display = "none"; bmove.style.display="none"; } bbox.onmousemove = function(e){//获取鼠标位置 var x = e.clientX;//鼠标相对于视口的位置 var y = e.clientY; var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft; var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2; if(_top<=0)//滑到box的最顶部 _top = 0; else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部 _top = bbox.offsetHeight-bmove.offsetHeight ; if(_left<=0)//滑到box的最左边 _left=0; else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边 _left=bbox.offsetWidth-bmove.offsetWidth ; bmove.style.top = _top +"px";//设置move的位置 bmove.style.left = _left + "px"; var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight); var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w; b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息 b_bimg.style.left = -b_bimg_left + "px"; } }
Rendering:
1. Calculation of move block
##Black arrow:
var x = e.clientX;//鼠标相对于视口的位置 var y = e.clientY;
var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft;
var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2;
bbox.offsetWidth-bmove.offsetWidth
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
b_bimg.offsetHeight-bbimg.offsetHeight
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
Summary:
I believe that through studying this article, everyone has a better understanding of the magnifying glass effect achieved by JavaScript. For those who do not understand the magnifying glass effect, Partner is a good choice and I hope it will be helpful to you in your work!Related recommendations:
How to use jQuery to achieve the magnifying glass effect
Canvas realizes the magnifying glass effect
Using css to realize the magnifying glass effect of pictures (picture)
The above is the detailed content of Example of JavaScript implementing the effect of a magnifying glass. For more information, please follow other related articles on the PHP Chinese website!