JS特效第101弹：创意的圆角图片手风琴代码

马coder

于 2024-01-22 11:30:00 发布

阅读量780

点赞数 18

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38343072/article/details/135375700

版权

本文介绍了如何使用jQuery和CSS3创建一个具有圆角效果的自适应手风琴样式，适用于不同屏幕尺寸，并展示了关键代码片段以实现图片切换和布局.

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

使用jQuery写的水平滑动的手风琴特效，css3属性图片布局，兼容处理各种自适应屏幕大小的圆角图片手风琴布局代码，先来看看效果：

一部分关键的代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>漂亮的手风琴效果演示</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

</head>

<body>


  <div class="options">
    <div class="option active" style="background:url(images/1.jpg);">
      <div class="shadow"></div>
      <div class="label">
        <div class="icon"> <i class="fas fa-walking"></i> </div>
        <div class="info">
          <div class="main">这是标题</div>
          <div class="sub">这是一段描述</div>
        </div>
      </div>
    </div>
    <div class="option" style="background:url(images/2.jpg);">
      <div class="shadow"></div>
      <div class="label">
        <div class="icon"> <i class="fas fa-snowflake"></i> </div>
        <div class="info">
          <div class="main">这是标题</div>
          <div class="sub">这是一段描述</div>
        </div>
      </div>
    </div>
    <div class="option" style="background:url(images/3.jpg);">
      <div class="shadow"></div>
      <div class="label">
        <div class="icon"> <i class="fas fa-tree"></i> </div>
        <div class="info">
          <div class="main">这是标题</div>
          <div class="sub">这是一段描述</div>
        </div>
      </div>
    </div>
    <div class="option" style="background:url(images/4.jpg);">
      <div class="shadow"></div>
      <div class="label">
        <div class="icon"> <i class="fas fa-tint"></i> </div>
        <div class="info">
          <div class="main">这是标题</div>
          <div class="sub">这是一段描述</div>
        </div>
      </div>
    </div>
    <div class="option" style="background:url(images/5.jpg);">
      <div class="shadow"></div>
      <div class="label">
        <div class="icon"> <i class="fas fa-sun"></i> </div>
        <div class="info">
          <div class="main">这是标题</div>
          <div class="sub">这是一段描述</div>
        </div>
      </div>
    </div>
  </div>


<script type="text/javascript">
$(".option").click(function () {
	$(".option").removeClass("active");
	$(this).addClass("active");
});
</script>

</body>
</html>

全部代码：创意的圆角图片手风琴代码