实现简易手风琴样式

简介: 蓝桥最新一期的楼赛是实现手风琴样式,这个我们可以考虑到几个解决方案,我们先来看题

实现简易的手风琴样式

蓝桥最新一期的楼赛是实现手风琴样式,这个我们可以考虑到几个解决方案,我们先来看题

题目要求

题目要求我们的鼠标滑动或点击到某个盒子上后图片会被拉长,离开鼠标或者点击其他盒子后图片回复原来的样子,以达到手风琴样式效果,最后效果图如下所示

image.png

代码结构

  1. html结构,官方给的html结构是这种通过两层嵌套的,并且以active和option来对样式进行控制
<div class="options">
        <div class="option active" style="--optionBackground:url(../images/pic1.jpeg);" id="item1">
            <div class="shadow"></div>
        </div>
    </div>
复制代码

实现方案

  1. 整体逻辑:我们可以通过JQ的addClass和removeClass来对包含盒子进行一个样式的添加和移除,所以我们需要预先设置好我们对两种图片的样式,然后通过hover来实现鼠标的悬浮和离开配合add和remove来添加样式。
  2. 冗余代码实现方法,因为我们的每一个盒子需要不同的id来控制每个盒子的悬浮事件,所以我们需要给四个盒子设置事件,所以这里就造成了极大的代码冗余,代码如下,我们需要四乘以现在的代码量来实现这个功能,所以我下面又提供了另一种写法
$("#item1").hover(function () {//鼠标进入和离开事件
  $("#item1").addClass("active")
}, function () {//离开就恢复初始样式
  $("#item1").removeClass("active")
})
复制代码
  1. 简易代码实现方法,为了减少代码冗余的问题,所以采取了这种方案,即当鼠标点击盒子后我们通过对option的子类进行class的查找,找到后移除,移除后再通过e来进行点击后增加class,从而进一步实现功能
$('.option').click(e=>{
  $('.options').find('.active').removeClass('active');
  $(e.target).addClass('active');
})
复制代码

总结

在开发中总会有这种代码冗余,这虽然是楼赛的一道web题,但是还是想一下如何减少冗余,使用轻便的代码来实现更好的功能,所以我们在做功能的时候可以考虑其他实现方案,比如说这里我们可以通过e来进点击绑定和class的添加,避免了我们通过id来绑定事件和添加class


相关文章
|
8月前
|
缓存 前端开发
样式
样式
69 3
|
8月前
|
前端开发 JavaScript
跑马灯样式
跑马灯样式
46 1
|
8月前
|
前端开发 JavaScript
抽屉式手风琴
抽屉式手风琴
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【001】
「HTML+CSS」--自定义按钮样式【001】
333 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【002】
「HTML+CSS」--自定义按钮样式【002】
123 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【003】
「HTML+CSS」--自定义按钮样式【003】
128 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【004】
「HTML+CSS」--自定义按钮样式【004】
514 0
|
前端开发
常用样式
常用样式
128 0
CSS3手风琴下拉菜单
在线演示 本地下载
895 0
|
Android开发
第12章 样式(六)
设备样式 Xamarin.Forms包含六种内置动态样式。 这些被称为设备样式,它们是名为Styles的嵌套类的成员。 这个Styles类定义了12个静态和只读字段,有助于在代码中引用这六个样式: Style样式的BodyStyle。
1308 0