<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向手风琴</title>
<style>
.container{
width:700px;
height:100px;
margin:70px auto 10px auto;
}
.handle{
float:left;
margin:1px;
width:50px;
height:90px;
cursor:pointer;
background:#F0F;
font:bold 24px Arial, Helvetica, sans-serif;
text-align:center;
color:#FFF;
border-radius:25px;
}
.handle:hover{
background:#FC3;
}
.select{
background:#FC3;
}
.slide{
background:url(images/grey.png);
float:left;
width:380px;
height:90px;
display:none;
margin:1px;
border-radius:25px;
}
.rotate{
margin:10px auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".handle").click(function(){
if(!$(this).siblings(".slide").is(":visible")){
$(this).addClass("select");
$(this).siblings(".slide").animate({width:"show"},300);
$(this).parent().siblings().children(".slide").animate({width:"hide"},300);
$(this).parent().siblings().children(".handle").removeClass("select");
}
else{
$(this).siblings(".slide").animate({width:"hide"},300);
$(this).removeClass("select");
}
})
})
</script>
</head>
<body>
<div class="container">
<div>
<div class="handle" ><p class="rotate">1</p></div>
<div class="slide">1</div>
</div>
<div>
<div class="handle" ><p class="rotate">2</p></div>
<div class="slide">2</div>
</div>
<div>
<div class="handle" ><p class="rotate">3</p></div>
<div class="slide">3</div>
</div>
<div>
<div class="handle" ><p class="rotate">4</p></div>
<div class="slide">4</div>
</div>
<div>
<div class="handle" ><p class="rotate">5</p></div>
<div class="slide">5</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
刚刚介绍完jQuery打飞机游戏，现在我们来点实用的，来分享一款基于jQuery的横向手风琴图片轮播焦点图效果。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很...
在本案例中，我们将探讨一个基于jQuery实现的横向手风琴效果，它将传统的垂直手风琴效果转化为横向展开的形式，增加了视觉吸引力。 首先，让我们了解手风琴效果的基本原理。手风琴效果通常是通过监听用户的鼠标事件...
"JQuery横向手风琴效果1"就是一个利用jQuery实现的创新性组件，它为用户提供了一种高效的方式来展示内容，尤其是在有限的空间内展示大量信息时。手风琴效果通常用于折叠和展开内容区域，使得用户可以逐个查看或者...
"jQuery横向手风琴效果" 是一种常见的交互式设计元素，它采用JavaScript库jQuery实现，为用户提供了一种优雅的方式来展示内容，尤其是在有限的空间内展示大量信息时。在这个特定的代码包中，我们看到它是基于`...
【jQuery扁平横向手风琴代码】是一种使用JavaScript库jQuery实现的交互式网页元素，它在HTML页面上创建了一个扁平化设计的横向导航菜单。这个菜单采用了手风琴效果，意味着用户点击一个菜单项时，与其关联的内容会...
本资源"jQuery实现横向手风琴图片轮播焦点图特效源码.zip"提供了使用jQuery创建一种特殊效果的代码示例，这种效果结合了横向滑动与手风琴式展开，常用于网站的图像展示或产品宣传，能够吸引用户的注意力并提升用户...
"jQuery横向手风琴效果"就是利用jQuery的特性，实现了一个左右滑动的图片或内容展示区域，其特点在于点击或滑动时，内容会像手风琴一样展开或收起，既节省空间又富有动态感。 实现这个效果的关键在于理解jQuery的...
【标题】：“动漫网站jquery横向手风琴效果.zip”是一个包含JavaScript特效的资源包，主要应用于动漫类网站，实现一种动态的图片展示方式，即横向手风琴效果。这种效果通常指的是用户点击某一图片后，图片会以类似手...
之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件，比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件。今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画，鼠标滑过...
【横向手风琴组件】是一种常见的网页交互元素，它通过jQuery库实现，允许用户在有限的空间内展示大量的信息。在网页设计中，这种组件通常用于菜单、产品展示或内容导航等场景，以节省空间并提高用户体验。"Jquery...
在本教程中，我们将探讨如何使用JavaScript实现一个横向手风琴效果，这是一种常见的网页元素，常用于展示有限空间内的多个内容板块。 首先，我们需要理解手风琴效果的基本概念。手风琴效果通常指的是一个可以展开和...
《jQuery横向手风琴图片展示动画特效源码详解》 在网页设计中，动态效果的运用可以提升用户体验，其中，手风琴效果是一种常见的交互设计手法。本篇文章将深入解析"jQuery横向手风琴图片展示动画特效源码"，帮助读者...
本项目“jQuery横向手风琴菜单”是利用jQuery实现的一种交互式导航菜单，这种菜单在用户交互时会展开或收起，呈现出类似手风琴的动态效果。在网页布局有限的情况下，手风琴菜单能有效地节省空间，提高用户体验。 ...
本代码由js代码收集并编辑整理; 尊重他人劳动成果;
关于手风琴样式的动画插件，我们在前面已经介绍过不少了，包括手风琴菜单，比如CSS3垂直手风琴折叠...今天要给大家带来一款基于jQuery的横向手风琴图片展示动画，鼠标滑过即可展开图片，每一项都可以在底部设置菜单。
"jQuery 动漫人物网的横向手风琴切换效果"是一种常见的交互设计，它主要用于展示一系列内容，如图片、文字或链接，以一种有序且节省空间的方式。在这个场景中，横向手风琴效果指的是在水平方向上，各个内容块可以像...
横向手风琴切换通常用于展示一组水平排列的项目，当用户点击某一项时，其他项会收缩，被点击的项则展开显示其全部内容。这个过程可以通过设置CSS样式和利用jQuery的`slideToggle()`方法来实现。`slideToggle()`会在...