一个手风琴

最新推荐文章于 2024-06-30 17:58:42 发布
最新推荐文章于 2024-06-30 17:58:42 发布
阅读量235 收藏
点赞数
文章标签： css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44561961/article/details/117634122
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
	*{
		margin: 0;
		padding: 0;
		background: pink;
	}		
	.big-box{
		width: 1370px;
		height: 550px;
		border: 1px solid orange;
		margin: auto;
		margin-top: 50px;
		display: flex;
		display: -webkit-flex;
	
	}	
	
	.b-b-1{
		height: 550px;
		width: 960px;
		background: url(img/命运石之门.jpg) no-repeat;
		background-size: 960px 550px;
		flex: 7;
	}		
	
	.b-b-2{
		height: 550px;
		width: 960px;
		background: url(img/海猫.jpg) no-repeat;
		background-size: 960px 550px;
		margin-left: -30px;	
		flex: 1;
	}	
		
	.b-b-3{
		height: 550px;
		width: 960px;
		background: url(img/海猫1.png) no-repeat;
		background-size: 960px 550px;
		margin-left: -30px;
		flex: 1;
	}

	.b-b-4{
		height: 550px;
		width: 960px;
		background: url(img/海猫2.png) no-repeat;
		background-size: 960px 550px;
		margin-left: -30px;	
		flex: 1;
	}
 
	.b-b-5{
		height: 550px;
		width: 960px;
		background: url(img/rewrite.png) no-repeat;
		background-size: 960px 550px;
		margin-left: -30px;	
		flex: 1;
	}
	.cs{
		flex: 1;
		transition: all 1.5s;
	}	
	.cc{
		flex: 7;
		transition: all 1.5s;
		
	}
		</style>
	</head>
	<body>
		<div class="big-box">
			<div class="b-b-1"></div>
			<div class="b-b-2"></div>
			<div class="b-b-3"></div>
			<div class="b-b-4"></div>
			<div class="b-b-5"></div>
		</div>
		
		
	<script type="text/javascript" src="js/jq.js" ></script>
	<script>
	//pc事件
	$(".b-b-2").on({
	 mouseover: function () {
	    //鼠标移入回调	    	    
	      $(".b-b-2").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-1").css({"flex":"1","transition":"all 1.5s"});
	 },
	 mouseout: function () {
	      //鼠标移出回调	  
	       $(".b-b-1").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-2").css({"flex":"1","transition":"all 1.5s"});
	  }
	}); 
	$(".b-b-3").on({
	 mouseover: function () {
	    //鼠标移入回调	    	    
	      $(".b-b-3").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-1").css({"flex":"1","transition":"all 1.5s"});
	 },
	 mouseout: function () {
	      //鼠标移出回调	  
	       $(".b-b-1").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-3").css({"flex":"1","transition":"all 1.5s"});
	  }
	}); 
	$(".b-b-4").on({
	 mouseover: function () {
	    //鼠标移入回调	    	    
	      $(".b-b-4").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-1").css({"flex":"1","transition":"all 1.5s"});
	 },
	 mouseout: function () {
	      //鼠标移出回调	  
	       $(".b-b-1").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-4").css({"flex":"1","transition":"all 1.5s"});
	  }
	}); 
	$(".b-b-5").on({
	 mouseover: function () {
	    //鼠标移入回调	    	    
	      $(".b-b-5").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-1").css({"flex":"1","transition":"all 1.5s"});
	 },
	 mouseout: function () {
	      //鼠标移出回调	  
	       $(".b-b-1").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-5").css({"flex":"1","transition":"all 1.5s"});
	  }
	}); 
	
	//手机端
	$(".b-b-2").on({
	 touchmove: function () {
	    //手指滑动	    	    
	      $(".b-b-2").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-1").css({"flex":"1","transition":"all 1.5s"});
	         $(".b-b-3").css({"flex":"1","transition":"all 1.5s"});
	          $(".b-b-4").css({"flex":"1","transition":"all 1.5s"});
	            $(".b-b-5").css({"flex":"1","transition":"all 1.5s"});
	 },
	
	}); 
	$(".b-b-3").on({
	  touchmove: function () {
	   //手指滑动	    	    
	      	    	    
	      $(".b-b-3").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-1").css({"flex":"1","transition":"all 1.5s"});
	         $(".b-b-2").css({"flex":"1","transition":"all 1.5s"});
	          $(".b-b-4").css({"flex":"1","transition":"all 1.5s"});
	            $(".b-b-5").css({"flex":"1","transition":"all 1.5s"});
	 },
	
	}); 
	$(".b-b-4").on({
	 touchmove: function () {
	   //手指滑动	    	    
	     $(".b-b-4").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-1").css({"flex":"1","transition":"all 1.5s"});
	         $(".b-b-2").css({"flex":"1","transition":"all 1.5s"});
	          $(".b-b-3").css({"flex":"1","transition":"all 1.5s"});
	            $(".b-b-5").css({"flex":"1","transition":"all 1.5s"});
	 },
	
	}); 
	$(".b-b-5").on({
	touchmove: function () {
	    //手指滑动	    	    
	      $(".b-b-5").css({"flex":"7","transition":"all 1.5s"});
	        $(".b-b-1").css({"flex":"1","transition":"all 1.5s"});
	         $(".b-b-2").css({"flex":"1","transition":"all 1.5s"});
	          $(".b-b-3").css({"flex":"1","transition":"all 1.5s"});
	            $(".b-b-4").css({"flex":"1","transition":"all 1.5s"});
	            	 },
	}); 
	</script>
	</body>
</html>

总结

提示：这里对文章进行总结：
1.运用flex布局和jq完成手风琴效果

荒糖落
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用transition过渡写一个手风琴
qq_42309685的博客
08-21 241
手风琴（transition） 之间用了很多方法写了手风琴，js，jquery都可以，这回是用HTML5中新添加的过渡属性transition写的。（本案例没有考虑各浏览器兼容性） 效果如下（oh~这该死的gif，效果真差）: 代码如下：(CSS部分用到了渐变) CSS部分 body, ul { padding: 0px; margin: 0px; } div { margin:...
html 手风琴折叠,各种姿势教你写手风琴式折叠菜单
weixin_35094083的博客
05-30 1007
手风琴菜单在写后台管理页面的时候，编写折叠菜单是一个比较常见的应用场景。那么今天我们就来学习一下怎么使用各种姿势写出手风琴式的折叠菜单。写之前先看一下效果，插件来源于jQuery之家，演示效果可以点击这里折叠菜单。jquery之家的源码好像有点问题，下载可以点这里。折叠效果的原理其实写出这个折叠展开的效果并不复杂，用原生的js代码就可以实现。首先看一下html结构和样式：折叠菜单.toggle{o...
如何制作一个手风琴样式的折叠菜单—html
yunduanaoligei的博客
11-04 607
今天分享下”如何制作一个手风琴样式的折叠菜单—html“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 页面主体部分： ​​<​​​​body​​​​> <​​​​ul​​ ​​id​​​​=​​​​"menu"​​​​>​​ ​​<​​​​li​​​​> ​​ ​​<​​​​a​​ ​​href​​​​=​​​​"#"​​​​>一级菜单1</​​​​a​​
【每日一练】144—实现一个手风琴 UI 组件效果
web前端开发
02-25 178
写在前面以下是今天小练习的最终效果：HTML代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...
用原生js代码实现手风琴效果
qq_43710807的博客
07-31 1963
在实际网页开发中，手风琴出现频率也居高。 简单地做了一个手风琴，但觉得它的过渡效果没实现，内容列表出现得很突兀，效果图如下： 实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten...
手写手风琴菜单
chouzizi的博客
06-12 772
今天，因为需要手风琴效果的菜单，搜索了一下，比较不错的都是一些前端框架的一部分，只为了使用手风琴效果而引入新的框架确实有点不合算，所以决定自己写个手风琴效果的菜单。
用原生js写一个手风琴
sinat_37264330的博客
02-24 390
html代码： 图片自己随便找几张即可 css代码： .brand .brandLi{ width: 1200px; height: 250px; overflow: hidden; } .brand .brandLi li{ width: 150px; float: left; } js代码： var brandLi =
jquery写一个简单的手风琴
qq_42309685的博客
08-15 242
jquery写一个简单的手风琴 效果如下： css部分 <style> body, ul { padding: 0px; margin: 0px; } ul { list-style: none; width: 300px; } .group { width: 300px; text-align: center; cursor: pointer;...
vue.js实现手风琴效果
素钗一生推
12-25 1401
效果如图，标题可定制，自定义内容区，默认打开项可以配置，主要利用了vuejs父子组件中的uid来实现，打开一个，关闭其他的，主要实现代码如下： // collapse.vue <template> <div class="collapse-parent"> <slot></slot> </div> &...
用jQuery封装一个手风琴自定义插件/组件
yesir_mao的博客
06-20 299
1.需求：用jQuery封装一个手风琴自定义插件 2.何为插件/组件：拥有独立的HTML，css，js和数据可重用的页面区域 3.何时使用：如果页面中，某个功能区域可能被重复使用时，都可将其封装为一个组件。 4.自定义插件：已经用html，css和js 实现了插件的样式和功能。 5.如何自定义插件： 5.1.将插件相关的css，剪切到一个独立的css文件中保存。为避免插件/组件间class冲突，一...
jquery实现手风琴案例
11-21
手风琴案例练习，供大家参考，具体内容如下 显示效果 重点： 1.鼠标进入事件mouseenter 鼠标离开事件mouseleave 2. 再执行下一次操作前都要先通过.stop() 停止动画 3.sublings()选择当前事件外的兄弟事件 完整代码 ...
bootstrap手风琴
05-02
2. **折叠面板（Accordion Item）**：每个手风琴中的面板都是可折叠的，包含一个标题和一段内容。标题通常是一个`<h>`元素（如`<h3>`），内容则可以是任何HTML元素。 3. **数据属性（Data Attributes）**：为了实现...
手风琴效果
06-27
手风琴效果的基本结构通常包括一组可折叠的面板，每个面板包含一个标题和相应的内容区域。默认情况下，所有内容区域都是隐藏的，只有当用户点击某个标题时，相应的内容才会显示出来，其他面板则自动关闭。这样的设计...
jquery手风琴实现图片切换
06-10
本教程将详细讲解如何利用jQuery实现一个手风琴式的图片切换效果，该效果同时具备自动播放和手动播放功能，用户可以通过点击文字来控制图片的切换。 首先，我们需要在HTML中设置基本的结构。手风琴效果通常涉及到可...
css 布局出现无法去除的空白
weixin_46221198的博客
06-28 423
案件介绍：在没有设置任何的css样式的情况下 文字顶部出现无法去除的空白。
如何在CSS中设置px值
最新发布
qq_60504665的博客
06-30 469
在CSS中设置px（像素）值非常简单。px是CSS中最常用的长度单位之一，用于指定元素的大小、位置、间距等。以下是一些示例，展示如何在CSS中使用px。
【CSS】深入理解CSS 的steps()函数
读心悦
06-30 215
steps()函数为CSS动画提供了一种步进的方式，使得动画可以在离散的步骤之间变化，这在许多动画场景中都非常有用。通过合理地使用steps()函数，你可以创建出更加有趣和吸引人的动画效果。
css持续学习
lth002的博客
06-27 211
当一个css样式发生冲突时，比如多处给一个字体设置了不同的颜色，这个时候就需要样式层叠了，它会进行三种比较。
CSS|05 继承性与优先级
Catherinemin的博客
06-27 1167
一般而言，选择器指向的越准确，优先级就会越高，通常我们会用1表示标签选择器的优先级，用10来表示类选择器的优先级，用100来表示 ID 选择器的优先级，用1000来表示行内样式。important 的属性， 文本的大小是添加的ID 选择器的 因为！在实际工作中，我们往往会给 boby 标签设置字体大小以及字体颜色，因为 boby 标签是最外层的元素，内层的元素会继承外层的元素样式。important 提升的是属性的优先级，不是选择器。important 它是提升的属性的权重，而不是提升选择器的权重！
使用vue实现一个手风琴
04-01
首先，我们需要在Vue中定义一个手风琴组件Accordion，包含多个子组件AccordionItem，每个子组件代表一个手风琴项。 Accordion组件的模板如下： ``` <slot></slot> ``` AccordionItem组件的模板如下： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值