Image magnifier

Scenario

If you want to look the product carefully on Tmall or JingDong, you will move your mouse point(or tap on smartphone) over the images on the product detail page, and then a larger and clearer image will appear and just show the part of image where your mouse is pointing at in detail. This is the image magnifier on web, a smart way to show the detail part of the product. You may find it helpful when you are going to build up a website for shopping next time.

Implementation

<div class="small">
</div>
<div class="big">
</div>
<style>
    .small {
        float: left;
        height: 200px;
        width: 300px;
        background: url("a.jpg");
        background-size: cover;
    }

    .big {
        display: none;
        position: relative;
        height: 200px;
        width: 300px;
        background: url("a.jpg");
        background-size: 900px 600px;
        background-repeat: no-repeat;
    }
</style>
<script>
    function setup() {
        var small = document.querySelector(".small");
        var big = document.querySelector(".big");
        small.addEventListener("mousemove", function(event) {
            console.log(event);
            var x = event.offsetX * 3 - 150;
            var y = event.offsetY * 3 - 100;
            if (x < 0) {
                x = 0;
            } else if (x > 600) {
                x = 600;
            }
            if (y < 0) {
                y = 0;
            } else if (y > 400) {
                y = 400;
            }
            big.style.backgroundPosition = "-" + x + "px -" + y + "px";
            big.style.display = "block";
        });
        small.addEventListener("mouseout", function(event) {
            big.style.display = "none";
        });
    }
    setup();
</script>

Result

When you move your mouse over the image, you will see that another image showing up to exactly display the region with your mouse as the center, but at a larger scale. And when you move the mouse out, the detailed image will hide. It works as a handy magnifier, when you want to inspect, it show up and display the content larger, and when you move out it will disappear.

Explanation