Know that little picture of the mouse has a magnifying glass function how to do? Put the picture!

This is the home page.
My mouse moves to this picture to become a magnifying glass.
Then I click the right button and it gets bigger.
Here's the way it is. Then the upper right corner can be closed. The big picture is also getting smaller.
It's so normal!
It's so classy!

How handsome the magnifying glass.
I can't write it with a rough code.
That's my way of thinking.
The rotten idea of the Earth has lost its teeth.
How to give me a more elegant idea code!

Reply content:

This is the home page.
My mouse moves to this picture to become a magnifying glass.
Then I click the right button and it gets bigger.
Here's the way it is. Then the upper right corner can be closed. The big picture is also getting smaller.
It's so normal!
It's so classy!

How handsome the magnifying glass.
I can't write it with a rough code.
That's my way of thinking.
The rotten idea of the Earth has lost its teeth.
How to give me a more elegant idea code!

Click on the image to enlarge the effect can be achieved using jquery plug-ins, my jquery is just beginning to learn, if the following answer is wrong, I hope the main or the next answer to the main correction!
A relatively simple one is: Imgbox This plug-in is very small, only 6kb, and the parameter setting is simple, I like it very much.
This plugin I landed on its official website, found that the site is no longer exist, so in Baidu search for some examples:

Imgbox Dome Page

A handful of code in the HTML section explains:

One of the main things to note is that the code is followed by the href enlarged image, followed src by the shrinking picture.

The main parameters of this example are the following code: using the jquery plugin, which is mainly in the header of the page.

The most important of these is
speedInThe time interval, in milliseconds, at which the animation is small
speedOutThe time interval, in milliseconds, at which the animation becomes smaller
alignmentThe position at which the animation becomes larger

More similar good plugins:
FancyBox
Lighterbox

Write a larger picture of the container, CSS settings position:fixed, full screen size, Display:none
Mid-zoom img, upper right corner x

Js

function openPreview(url){    document.getElementbyId('fullscreen-img').src = url;    document.getElementbyId('fullscreen-container').style.display = "block";}function closePreview(){    document.getElementbyId('fullscreen-container').style.display = "none";}

As for the mouse Magnifier effect, you can add cursor:zoom-in to the CSS on the small map, the mouse will be turned into a magnifying glass

The full-screen container and the large image of the CSS is probably: (Size specific self-determined)

.fullscreen-container{    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 10;}.fullscreen-img{    position: absolute;    width: 1200px;    height: 600px;    top: 50%;    left: 50%;    margin-left: -600px;    margin-top: -300px;}

