Example of JavaScript implementing the effect of a magnifying glass-JS Tutorial-php.cn

Example of JavaScript implementing the effect of a magnifying glass

黄舟

Release： 2017-11-24 09:40:00

Original

1632 people have browsed it

I believe you are not too unfamiliar with the magnifying 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 of using JavaScript to 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)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <link href="css/bigimg.css" rel="stylesheet" />
  <script src="js/bigimg.js"></script>
</head>
<body onload="bigimg()">
  <p id="box">
    <img src="images/simg.jpg" alt="#">
    <p id="move"></p>
    <p id="bimg">
      <img id="b_bimg" src="images/bimg.jpg" alt="#">
    </p>
  </p>
</body>
</html>

Copy after login

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;
}

Copy after login

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";
  }
    
}

Copy after login

Rendering:

1. Calculation of move block

##Black arrow:

var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;

Copy after login

Red arrow:

var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;

Copy after login

Orange arrow:

var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;

Copy after login

2. Calculation of bimg block

Use the proportion of the move block within the movable range to set the position of the large image

The moving range of the move block:

bbox.offsetWidth-bmove.offsetWidth

Copy after login

The ratio of the current coordinates of the move block to the movable range:

var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

Copy after login

The moving range of bimg:

b_bimg.offsetHeight-bbimg.offsetHeight

Copy after login

The position of bimg:

var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;

Copy after login

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!