实现简易手风琴样式

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

实现简易的手风琴样式

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

题目要求

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

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


目录
打赏
0
0
1
0
69
分享
相关文章
CSS 鼠标样式和手指样式
巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊。CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*"   例 子:&lt;span style="cursor:*"&gt;文本或其它页面元素&lt;/span&gt;  &lt;a href="#" style="cursor:*"&gt;文本或其它页面元素&lt;/a&gt;
1940 0
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片预览和图片切换
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片的单选、限数量的多选和不限数量的多选。支持图片预览和图片文件夹的切换。支持图片单选并剪裁。 先上效果图: 1、引入依赖 在Project的build.gradle在添加以下代码 allprojects { repositories { ... maven { url 'https://jitpack.io' } // 如果你使用的是1.4.0或更早的版本,这句可以不用。
6055 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等