【JavaScript】原生JS实现放大镜

Lxq~

于 2018-12-24 15:04:45 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/qq_42872073/article/details/85233628

版权

我们经常会在一些电商网站看到类似于放大镜的效果（对鼠标在的位置进行放大观察），可以用原生JS来实现。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS版放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        .block{
            width: 350px;
            height: 533px;
        }
        .centerimg{
            position: relative;
            width: 100%;
            height: 449px;
        }
        .smallimg{
            width: 300px;
            height: 64px;
            margin: 20px 25px;
        }
        .center{
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
        .small{
            width: 50px;
            height: 100%;
            margin: 0 3px;
            float: left;
            border: 2px solid transparent;
        }
        .small img{
            width: 100%;