实现鼠标跟随的放大镜效果

最新推荐文章于 2022-06-08 16:26:39 发布

luo15256533579

最新推荐文章于 2022-06-08 16:26:39 发布

阅读量1.6k

点赞数

分类专栏：实现鼠标跟随的放大镜效果文章标签：实现鼠标跟随的放大镜效果

本文链接：https://blog.csdn.net/luo15256533579/article/details/78678153

版权

本文介绍如何利用JavaScript技术实现一个鼠标跟随的放大镜效果，通过代码展示具体的实现过程，帮助读者理解动态效果的创建方法。

摘要由CSDN通过智能技术生成

效果图如下：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 300px;
            height: 400px;
            margin: 100px;
            overflow: hidden;
            position: relative;
            border: 1px solid red;
        }
        img{
            width: 300px;
        }
        .pp{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid black;
            box-shadow: -1px 0 2px 0 gray inset;
            position: absolute;
            left: 100px;