jQuery实现横版手风琴效果

一、实现效果

当鼠标滑过方块的时候,方块的状态就会发生如下图所示的变化,同理当鼠标滑到其他的方块也会发生同样的效果,不仅大小会改变同时方块的颜色也会跟着发生变化:

在这里插入图片描述
在这里插入图片描述

二、代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {padding: 0;margin: 0;}img {border: none;display: block;}#box {width: 839px;height: 100px;margin: 100px auto;padding: 20px;border-radius: 20px;background-color: #1C4C72;}#box ul {position: relative;height: 100px;}#box ul li {width: 100px;height: 100px;border: 1px solid #000;float: left;list-style: none;border-left: 0;overflow: hidden;position: relative;}#box ul li.ac {width: 434px;}#box ul li .left {font-size: 14px;width: 100px;height: 100px;background-color: #fff;cursor: pointer;}#box ul li div.ac {background: orange;}#box ul li div:last-child {border-left: 1px solid #ddd;position: absolute;width: 334px;height: 100px;background: blue;top: 0;left: 100px;z-index: 0;box-sizing: border-box;}#box ul li img {width: 334px;height: 138px;}#box ul li.last {position: absolute;top: 0;right: 0;}</style><script src="static/js/jquery-1.11.3.js"></script></head><body><div id="box"><ul><li class="ac"><div class="left ac">111</div><div><img src="static/imgs/image01_pd@2x.png" alt=""></div></li><li><div class="left">22</div><div><img src="static/imgs/image02_con@2x.png" alt=""></div></li><li><div class="left">33</div><div><img src="static/imgs/image_about@2x.png" alt=""></div></li><li><div class="left">44</div><div><img src="static/imgs/image2_about@2x.png" alt=""></div></li><li class="last"><div class="left">55</div><div><img src="static/imgs/image03_con@2x.png" alt=""></div></li></ul></div><script>$(function() {$("#box").find("li").mouseover(function() {$(this).stop().animate({width: "434px"}, 800).children("div").addClass("ac").end().siblings().stop().animate({width: "100px"}, 800).children("div").removeClass("ac");});});</script></body>
</html>

ps:注意一定要引入jq文件哦~

完成!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/159159.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

笔记58:Encoder-Decoder 架构

本地笔记地址&#xff1a;D:\work_file\&#xff08;4&#xff09;DeepLearning_Learning\03_个人笔记\3.循环神经网络\第9章&#xff1a;动手学深度学习~现代循环神经网络 a a a a a a a a a

SpringBoot 导入其他配置文件

默认情况下&#xff0c;springboot 初始的项目中都有一个 application.yml 或者 application.properties 文件&#xff0c;如果我们希望再定义一个独立的配置文件用来配置特定业务数据&#xff0c;而不希望把这些配置内容都堆积在 application 配置文件中&#xff0c;实现这个需…

python命令行交互 引导用户选择宠物

代码 以下代码将在命令行中&#xff0c;引导用户选择一个或者多个宠物&#xff0c;并反馈用户选择的宠物 # -*- coding:UTF-8 -*- """ author: dyy contact: douyaoyuan126.com time: 2023/11/22 15:19 file: 在命令行中引导用户选择宠物.py desc: xxxxxx &qu…

好题分享(2023.11.12——2023.11.18)

目录 ​ 前情回顾&#xff1a; 前言&#xff1a; 题目一&#xff1a;《有效括号》 思路&#xff1a; 总结&#xff1a; 题目二&#xff1a;《用队列实现栈》 思路&#xff1a; 总结&#xff1a; 题目三&#xff1a;《用栈实现队列》 思路&#xff1a; 总结 &#x…

WPF实战项目十五(客户端):RestSharp的使用

1、在WPF项目中添加Nuget包&#xff0c;搜索RestSharp安装 2、新建Service文件夹&#xff0c;新建基础通用请求类BaseRequest.cs public class BaseRequest{public Method Method { get; set; }public string Route { get; set; }public string ContenType { get; set; } &quo…

Node.js之http模块

http模块是什么&#xff1f; http 模块是 Node,js 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的 http.createServer() 方法&#xff0c;就能方便的把一台普通的电脑&#xff0c;变成一台Web 服务器&#xff0c;从而对外提供 Web 资源服务。 如果我们想在node…

Request 爬虫的 SSL 连接问题深度解析

SSL 连接简介 SSL&#xff08;Secure Sockets Layer&#xff09;是一种用于确保网络通信安全性的加密协议&#xff0c;广泛应用于互联网上的数据传输。在数据爬取过程中&#xff0c;爬虫需要与使用 HTTPS 协议的网站进行通信&#xff0c;这就牵涉到了 SSL 连接。本文将深入研究…

向日葵x华测导航:远程控制如何助力导航测绘设备运维

导航测绘在各个领域均在发挥积极作用&#xff0c;其中RTK载波相位差分技术是导航测绘领域所常用的主流技术&#xff0c;该技术基于卫星定位系统的基础定位数据&#xff0c;可以实现在野外实时获取厘米级精度的定位数据&#xff0c;一定程度上省去了事后解算的麻烦。相应的&…

(论文阅读46-50)图像描述2

46.文献阅读笔记 简介 题目 Learning a Recurrent Visual Representation for Image Caption Generation 作者 Xinlei Chen, C. Lawrence Zitnick, arXiv:1411.5654. 原文链接 http://www.cs.cmu.edu/~xinleic/papers/cvpr15_rnn.pdf 关键词 2014年rnn图像特征和文本特…

验证码 | 可视化一键管控各场景下的风险数据

目录 查看今日验证数据 查看未来趋势数据 验证码作为人机交互界面经常出现的关键要素&#xff0c;是身份核验、防范风险、数据反爬的重要组成部分&#xff0c;广泛应用网站、App上&#xff0c;在注册、登录、交易、交互等各类场景中发挥着巨大作用&#xff0c;具有真人识别、身…

Leo赠书活动-10期 【AIGC重塑教育 AI大模型驱动的教育变革与实践】文末送书

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠书活动专栏 ✨特色专栏&#xff1a;…

新手做抖店,这6点建议一定要收好,能让你不亏钱!

我是电商珠珠 我呢&#xff0c;目前身居郑州。 电商这个行业也做了5年多了&#xff0c;抖店从20年开始做&#xff0c;到现在也已经快3年了。 其实&#xff0c;我做抖店期间呢&#xff0c;踩过很多坑&#xff0c;所以今天就把我所踩过的坑&#xff0c;给做抖店的新手总结了6点…

QT mysql 数据库线程池 与数据库操作封装

最近事情比较多很久没有写学习笔记了&#xff0c;数据库线程池&#xff0c; 数据库封装&#xff0c;虽说数据库操作有很多不需要写sql 的&#xff0c;ORM 封装的方式去操作数据库。但是从业这些年一直是自己动手写sql &#xff0c;还是改不了这个习惯。不说了直接上代码。 数据…

【23真题】劝退211!今年突变3门课!

今天分享的是23年云南大学847&#xff08;原827&#xff09;的考研试题及解析。同时考SSDSP的院校做一个少一个&#xff0c;珍惜&#xff01;同时考三门课的院校&#xff0c;复习压力极大&#xff0c;但是也会帮大家劝退很多人&#xff0c;有利有弊&#xff0c;请自行分析~ 本…

YOLOv5 环境搭建

YOLOv5 环境搭建 flyfish 环境 Ubuntu20.04 驱动、CUDA Toolkit、cuDNN、PyTorch版本对应 1 NVIDIA驱动安装 在[附加驱动界]面安装驱动时&#xff0c;需要输入安全密码&#xff0c;需要记下&#xff0c;后面还需要输入这个密码 重启之后有的机器会出现 perform mok manage…

Android修行手册-溢出父布局的按钮实现点击

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

【EI会议征稿】第五届人工智能、网络与信息技术国际学术会议(AINIT 2024)

第五届人工智能、网络与信息技术国际学术会议&#xff08;AINIT 2024&#xff09; 2024 5th International Seminar on Artificial Intelligence, Networking and Information Technology 第五届人工智能、网络与信息技术国际学术会议&#xff08;AINIT 2024&#xff09;将于…

变态跳台阶,剑指offer

目录 题目&#xff1a; 我们直接看题解吧&#xff1a; 相似题目&#xff1a; 解题方法&#xff1a; 审题目事例提示&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 题目地址&#xff1a; 【剑指Offer】9、变态跳台阶 难度&#xff1a;简单 今天刷变态跳台阶&#xf…

sd-webui-controlnet代码分析

controlnet前向代码解析_Kun Li的博客-CSDN博客文章浏览阅读1.5k次。要分析下controlnet的yaml文件&#xff0c;在params中分成了4个部分&#xff0c;分别是control_stage_config、unnet_config、first_stage_config、cond_stage_config。其中control_stage_config对应的是13层…

Maven依赖管理项目构建工具(保姆级教学---下篇)

对于Maven依赖管理项目构建工具的介绍&#xff0c;我们将其分为上篇和下篇。如果您对文章感兴趣&#xff0c;您可以在此链接中找到上篇详细内容&#xff1a; Maven依赖管理项目构建工具&#xff08;保姆级教学上篇&#xff09;-CSDN博客 一、Maven依赖传递和依赖冲突 1. …