使用jQuery实现放大图效果

原创

于 2021-08-04 13:24:43 发布 · 584 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

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

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

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;
        }

        .tupian {
            width: 200px;
            hei

最低0.47元/天解锁文章