实现简易手风琴样式

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

实现简易的手风琴样式

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

题目要求

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

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
分享
相关文章
如何处理 h5 使用 iframe 嵌套页面,内外 viewport 不一致导致的缩放问题?
如何处理 h5 使用 iframe 嵌套页面,内外 viewport 不一致导致的缩放问题?
1897 0
Kubernetes Pod 驱逐详解
QoS 等级为 Guaranteed 的 Pod 会在 QoS 等级为 Burstable 的 Pod 之前被驱逐吗?
2343 0
|
4月前
|
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
283 0
HTML5实现好看的中秋节网页源码
|
7月前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
168 19
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
MySQL锁,锁的到底是什么?
【10月更文挑战第16天】MySQL 锁锁定的是与数据和资源相关的对象,其目的是为了保证数据的一致性、避免冲突,并在并发环境下合理协调事务或操作的执行。理解锁的对象和意义对于优化数据库性能、处理并发问题至关重要。
273 0
表设计的10条军规
本文主要介绍了数据库建表的18个小技巧,包括:名字的命名规范、字段类型的选取、字段长度的控制、外键的使用、索引的创建、主键的选择、字段个数的限制、存储引擎的选择、时间字段的处理、金额字段的保存、冗余字段的使用以及注释的添加。作者强调了命名的重要性,如使用小写字母、避免全大写、使用下划线分隔等,并提倡使用NOT NULL和默认值,合理选择字段类型如datetime、decimal等,以及避免使用过多的字段和索引。此外,还提到了字符集和排序规则的选择,以及大字段和冗余字段的处理。
294 1
Pytorch学习笔记(8):正则化(L1、L2、Dropout)与归一化(BN、LN、IN、GN)
Pytorch学习笔记(8):正则化(L1、L2、Dropout)与归一化(BN、LN、IN、GN)
1753 0
Pytorch学习笔记(8):正则化(L1、L2、Dropout)与归一化(BN、LN、IN、GN)
AI助理
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问

你好,我是AI助理

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