<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>课后练习</title>
<script language="javascript" type="text/javascript" src="./js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
$(function(){
$("#sfq").accordion({
header:"h3",
active:1,
animated:"bounceslide",
icons:{ //图标的设置 header 默认额效果 headerSelected 代表是面板激活后的图标
header:"ui-icon-carat-2-e-w",
headerSelected:"ui-icon-carat-2-n-s"
}
}).sortable({
axis:"y", //只能对y轴进行拖动
handle:"h3",//设置效果属性标签
stop:function (event,ui){
//stop 事件 匿名函数 event 浏览器自带的事件处理对象
ui.item.children("h3").striggerHandler("focusout");
}
});
});
</script>
</head>
<body>
<div id="sfq" style="width:200px; height:300px;">
<div>
<h3><a href="#">我的好友</a></h3>
<div>哈哈 ，(*^__^*) 嘻嘻…… 啦啦 你们干啥呢 我们没事啊 (*^__^*) 嘻嘻…… 是啊</div>
</div>
<div>
<h3><a href="#">陌生人</a></h3>
<div>这其实是第二个 是吧 看看能换位置不 注意 我是第二个</div>
</div>
<div>
<h3><a href="#">黑名单</a></h3>
<div>我是第三个 记住啊 我是第三个 (*^__^*) 嘻嘻…… 哈哈 </div>
</div>
<div>
<h3><a href="#">白名单</a></h3>
<div>我是第四个 我真的是第四个 不管你信不信 反正我信了</div>
</div>
<div>
<h3><a href="#">绿名单</a></h3>
<div>我是第五个 你是第几个呢 也就是最后一个</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
jquery手风琴效果
刚刚介绍完jQuery打飞机游戏，现在我们来点实用的，来分享一款基于jQuery的横向手风琴图片轮播焦点图效果。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很...
原版效果：多种手风琴效果可供选择； 测试效果：立刻学会如何设置各种参数。 十分实用！
jQuery插件——手风琴左侧竖向导航栏，网页中很常见的手风琴导航栏，很好看.
此Jquery实现了网格手风琴特效，结合网格手风琴缩略图和手风琴面板的功能，是你展示你的图片网站一个非常有趣的方法。你可以选择使用XML或HTML。功能强大的API将允许进一步提高这个Jquery插件的功能，可以方便地集成...
今天我们要来介绍一款非常酷的jQuery插件，它是一款横向的手风琴图片展示切换插件，每一张图片初始都是水平层叠在一起，点击图片后即可切换至下一张，并且在图片切换时出现水平移动的动画特效。另外你可以定义任意...
jquery ui accordion手风琴插件带动画的竖直手风琴
jQuery的简易手风琴插件_水平滑动手风琴切换 jQuery的简易手风琴插件_水平滑动手风琴切换 jQuery的简易手风琴插件_水平滑动手风琴切换
各种插件效果 包括手风琴菜单 还有cool 切换效果
【Jquery经典特效21】jQuery手风琴效果插件j-accordion
手风琴菜单一般用于下拉导航，由于外观非常简洁，使用起来跟手风琴一样可以拉伸和收缩而得名，项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。
Woco Accordion 是一个简单的，对用户友好的轻量级 jQuery 手风琴插件，它可以通过 CSS3 过渡流畅地搭载动画。
下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉菜单。 HTML代码 由于使用了bootstrap框架，因此其HTML结构也需要一致，代码如下： [......] 阅读全文>>
jquery 插件实现的纵向手风琴效果。
jquery手风琴插件 jquery 手风琴
用jquery UI实现的手风琴菜单、折叠菜单
这是一款炫酷的jquery水平手风琴折叠菜单效果。该jquery风琴折叠菜单效果以1870年为主题，在切换菜单项时带有幻影效果，并在整体上配以炫酷的文字动画效果。
自己写的jquery 手风琴样式图片轮播插件,第一次写插件,请多多批评.
这是一款使用jQuery制作的垂直手风琴插件。这款jQuery手风琴插件可以通过导航按钮切换图片，也可以通过鼠标滚轮来滑动切换图片。
之前我们分享过很多手风琴样式的jQuery插件和CSS3应用，同时也有手风琴式的菜单，比如CSS3垂直手风琴折叠菜单和CSS3手风琴下拉菜单 支持多菜单展开，另外也有手风琴式的图片切换，比如最近介绍的jQuery横向手风琴...