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

萌小丹

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

阅读量589

点赞数 1

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

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

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

版权

这篇博客介绍如何通过JavaScript和jQuery实现图片的局部放大查看功能。主要步骤包括：准备大小两张图片，设置CSS布局，引入jQuery，实现点击和鼠标移动事件来控制大图的显示与移动，以及限制大图的移动范围。

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

通过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

最低0.47元/天解锁文章