jquery实现手风琴（横排）

最新推荐文章于 2022-12-10 21:48:27 发布

温柔女魔头

最新推荐文章于 2022-12-10 21:48:27 发布

阅读量327

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_19880197/article/details/86679665

版权

这篇博客详细介绍了如何利用HTML、CSS和jQuery来实现一个创新的横排手风琴效果，通过HTML构建基本结构，CSS进行样式设计，jQuery实现交互功能。

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

HTML

<div id="box">
    <ul>
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
    </ul>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}
ul li{
    list-style: none;
}
div{
    width: 1000px;
    border: 1px solid red;
    height: 350px;
    margin: 150px auto;
    overflow: hidden;
}
div ul li{
    float: left;
    width: 200px;
    height: 350px;
}

jquery

 <script src="jQuery/jquery-1.1

最低0.47元/天解锁文章

温柔女魔头

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现手风琴（横排）

HTML&lt;div id="box"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="images/1.jpg" alt=""&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/2.jpg" alt=&quot
复制链接

扫一扫

专栏目录