使用jQuery实现放大图效果

最新推荐文章于 2024-08-19 04:10:59 发布

ChrngFu

最新推荐文章于 2024-08-19 04:10:59 发布

阅读量524

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/ChrngFu/article/details/119379439

版权

本文介绍了如何使用jQuery创建一个简单的页面，并逐步讲解如何添加样式，最终通过引入jQuery库实现图片的动态放大效果。

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

一、首先我们需要把页面画出来

1，画出框架

<div class="box">
        <div class="tupian">
            <img
                src="https://img14.360buyimg.com/n0/jfs/t1/178469/14/4616/143349/60a26b86E45e2c962/1f93da665f0970f6.jpg">
            <div class="xuanzhong"></div>
        </div>
        <div class="fangda">
            <img
                src="https://img14.360buyimg.com/n0/jfs/t1/178469/14/4616/143349/60a26b86E45e2c962/1f93da665f0970f6.jpg">
        </div>
    </div>

2，添加样式

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 5px;