JavaScript手风琴页面制作
啥都不说了，直接上效果图
1.Html结构代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>手风琴2</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css" rel="external nofollow" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/new_file.js"></script>
</head>
<body>
<div id="gs">
<div class="gs gs1">
<div class="txt">
<p class="p1">我的旅行记1我的旅行记3</p>
<p class="p2">空山之旅我的旅行记3</p>
</div>
</div>
<div class="gs gs2">
<div class="txt">
<p class="p1">我的旅行记2我的旅行记3</p>
<p class="p2">沙漠之旅我的旅行记3</p>
</div>
</div>
<div class="gs gs3">
<div class="txt">
<p class="p1">我的旅行记3我的旅行记3</p>
<p class="p2">拉沙之旅我的旅行记3</p>
</div>
</div>
<div class="gs gs4">
<div class="txt">
<p class="p1">我的旅行记4我的旅行记3</p>
<p class="p2">雪山之旅我的旅行记3</p>
</div>
</div>
</div>
</body>
</html>
2.css样式代码
*{
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
#gs {
width: 1100px;
height: 429px;
}
.gs {
width: 100px;
height: 429px;
float: left;
}
.gs4 {
width: 789px;
height: 429px;
}
.gs1 {
background: url(../img/img/1.jpg) repeat scroll top left;
}
.gs2 {
background-image: url(../img/img/2.jpg);
}
.gs3 {
background-image: url(../img/img/3.jpg);
}
.gs4 {
background-image: url(../img/img/4.jpg);
}
.txt {
width: 100px;
height: 429px;
/*margin: 15px;*/
background: rgba(0,0,0,0.5);
cursor: pointer;
}
/*.txt p {
float: left;
width: 20px;
height: 429px;
color: #fff;
font-size: 20px;
margin: 14px;
}*/
.txt p {
color: #fff;
float: left;
margin: 15px;
}
.txt .p1 {
font-size: 14px;
width: 14px;
}
.txt .p2 {
font-size: 12px;
width: 12px;
}
3.javascript代码
$(function(){
$(".txt").mouseover(function(){
$(this).parent().stop(true).animate({"width":"789px"},500).siblings().stop(true).animate({"width":"100px"},500);
});
});
4.主要：
a.字体竖排垂直：字体大小font-size = 包含字体标签宽度width
b.js中stop()方法：stop()表示结束动画有过渡
stop(true)表示暂停动画，
stop(true,true)表示立即结束动画，无过渡
c.parent():找到上一级元素
siblings():除了本元素外，其他的。。。
animate():动画效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
手风琴效果其实就是通过JS改变元素的height，然后加上transition来让css动起来。 准备HTML结构 这里我们使用 dl ， 因为 dt 刚好可以模拟标题， dd 模拟内容。 <div class="panel"> <dl> <dt>One Item</dt> <dd>One Item Content .</dd>
-
我正在使用jQuery手风琴来隐藏一些数据。 accordion标题是一个带有一些标题的表格。有一个标题，我不希望你点击它，因为手风琴事件会触发。 所以 手风琴是可折叠的，如果您单击Test2（类nofunction），手风琴事件不应触发。但是如果您单击Test或其他表头，手风琴应该会触发事件。 我可以添加这个功能吗？ 更新测试http://jsfiddle.net/e3Q8d/，包括jQuery
-
jQueryUI中的Accordion Widget是一个基于jQuery的可扩展和可折叠内容持有者，它被分成几个部分，可能看起来像标签。 jQueryUI提供了accordion（）方法来实现这一点。 语法 (Syntax) accordion()方法可以使用两种形式 - $（selector，context）.accordion（options）方法 $(selector, context).
-
描述 (Description) 手风琴是一个图形控制元素，显示为堆叠的项目列表。 每个手风琴都可以expanded或stretched以显示与手风琴相关的内容。 可折叠布局 当您使用单个单独的可折叠元素时，您需要省略accordion-list包装元素。 以下是可折叠布局的结构 - <!-- Single collapsible element ------> <div class = "acc
-
本文向大家介绍JavaScript实现手风琴效果，包括了JavaScript实现手风琴效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现手风琴效果的具体代码，供大家参考，具体内容如下 代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
在垂直导航中，如果存在多个分级，常常使用手风琴导航，它会以手风琴方式展开和折叠，来节约空间。 简单的说，手风琴导航就是垂直导航的层层嵌套，需要多少级，就嵌套多少层。这里就以两级导航为例，来介绍手风琴导航的基本制作方法。 为了方便控制手风琴导航的样式和行为，外层导航使用定义列表 dl、而内层使用无序列表 ul 来包裹导航中的链接元素： <dl class="accordion"> <dt>