放大镜实现（JavaScript面向对象编程）

最新推荐文章于 2022-10-19 15:38:09 发布

HAZEL644

最新推荐文章于 2022-10-19 15:38:09 发布

阅读量926

点赞数 3

分类专栏：前端文章标签： JavaScript HTML 放大镜

本文链接：https://blog.csdn.net/HAZER644/article/details/81135200

版权

本文介绍了如何使用JavaScript、HTML和CSS技术实现一个简单的网页放大镜功能。通过注释详细解释了代码的工作原理。

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

放大镜实现

代码有借鉴，侵删

解释移步代码注释

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="public.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="mag.js"></script>
</head>
<script>
    $(function(){
        /*
         show  //正常状态的框
         bigshow   // 放大的框的盒子
         smallshow  //缩小版的框
         mask   //放大的区域（黑色遮罩）
         bigitem  //放大的框
         */
        var obj = new mag('.show', '.bigshow','.smallshow','.mask','.bigitem');
        obj.init();
    });
</script>
<style>
   
</style>
<body>
    <div class="amplify-container">
        <div class="bg">
            <div class="bg_left">
                <div class="show">
                        <!-- show  //正常状态的框 -->
                    <img src="img/img1.png" alt="">
                    <!-- mask   //放大的区域（黑色遮罩） -->
                    <div class="mask"></div>
                </div>
                <!-- smallshow  //缩小版的框 -->
                <div class="smallshow">
                    <p class="prev prevnone"></p>
                    <div class="middle_box">
                        <ul class="middle">
                            <li><img src="img/img1.png" alt=""></li>
                            <li><img src="img/img2.png" alt=""></li>
                            <li><img src="img/img3.png" alt=""></li>
                            <li><img src="img/img4.png" alt=""></li>
                            <li><img src="img/img5.png" alt=""></li>
                            <li><img src="img/img

最低0.47元/天解锁文章

HAZEL644

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
放大镜实现（JavaScript面向对象编程）

放大镜实现代码有借鉴，侵删解释移步代码注释HTML&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel
复制链接

扫一扫

专栏目录