创意的圆角图片手风琴代码.rar

<h3><i class="iconfont icon-bianji"></i> 使用方法：</h3> <h4>1、head引入css文件</h4> <pre class="brush:html"> &lt;link rel="stylesheet" href="css/style.css"/&gt; </pre> <h4>2、head引入js文件</h4> <pre class="brush:html"> &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; </pre> <h4>3、body引入部分</h4> <pre class="brush:html"> &lt;div class="dowebok"&gt; &lt;div class="options"&gt; &lt;div class="option active" style="--optionBackground:url(../images/1.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-walking"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="option" style="--optionBackground:url(../images/2.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-snowflake"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="option" style="--optionBackground:url(../images/3.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-tree"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="option" style="--optionBackground:url(../images/4.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-tint"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="option" style="--optionBackground:url(../images/5.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-sun"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="dowebok"&gt; &lt;div class="options"&gt; &lt;div class="option active" style="--optionBackground:url(../images/1.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-walking"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="option" style="--optionBackground:url(../images/2.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-snowflake"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="option" style="--optionBackground:url(../images/3.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-tree"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="option" style="--optionBackground:url(../images/4.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-tint"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="option" style="--optionBackground:url(../images/5.jpg);"&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;div class="label"&gt; &lt;div class="icon"&gt; &lt;i class="fas fa-sun"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="info"&gt; &lt;div class="main"&gt;这是标题&lt;/div&gt; &lt;div class="sub"&gt;这是一段描述&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script &gt; $(".option").click(function () { $(".option").removeClass("active"); $(this).addClass("active"); }); &lt;/script&gt;/div&gt; &lt;script &gt; $(".option").click(function () { $(".option").removeClass("active"); $(this).addClass("active"); }); &lt;/script&gt; </pre>