JS作业练习--利用jQuery，实现图片放大查看

VIP文章萌小丹

已于 2022-07-09 00:12:51 修改

阅读量533

点赞数 1

分类专栏： JS 练习作业文章标签： javascript 学习前端

于 2022-07-08 15:12:22 首次发布

本文链接：https://blog.csdn.net/lmd_hdx/article/details/125678493

版权

通过js语言，实现图片局部放大查看

实现思路及具体做法：

1.准备两张相同图片，一张大，一张小。

2.将两张图片分别放置在两个div标签内，通过css语言实现基础的布局。

页面布局如下：

<div class="small">
    <div class="box"></div>
    <img src="./img/smallpic.jpg" alt="图片无法加载">
</div> 
<div class="big">
    <img src="./img/bigpic.jpeg" alt="图片无法加载">
</div>

css代码如下：

    <style>
        div {
            width: 300px;
            height: 300px;
            border: 2px solid;
            position: relative;
            overflow: hidden;
            float: left;
        }

        .box {
            width: 112.5px;
            height: 112.5px;
            background: rgba(176, 97, 160, 0.2);
            border: 0;
            position: absolute;
            left: 0