accordion特效
1 http://fmarcia.info/jquery/accordion.html
Code
<html>
<head>
<title>jQuery accordion</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="../jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$.accordian = function(items, first, options) {
var active = first;
var running = 0;
var titles = options && options.titles || '.title';
var contents = options && options.contents || '.content';
var onClick = options && options.onClick || function(){};
var onShow = options && options.onShow || function(){};
var onHide = options && options.onHide || function(){};
var showSpeed = options && options.showSpeed || 'slow';
var hideSpeed = options && options.hideSpeed || 'fast';
$(items).not(active).children(contents).hide();
$(items).not(active).each(onHide);
$(active).each(onShow);
$(items).children(titles).click(function(e){
var p = $(contents, this.parentNode);
$(this.parentNode).each(onClick);
if (running || !p.is(":hidden")) return false;
running = 2;
$(active).children(contents).not(':hidden').slideUp(hideSpeed, function(){--running;});
p.slideDown(showSpeed, function(){--running;});
$(active).each(onHide);
active = '#' + $(this.parentNode)[0].id;
$(active).each(onShow);
return false;
});
};
function simpleLog(message) {
$('<div>' + message + '</div>').appendTo('#log');
}
$(function(){
$.accordian('#list1 > div', '#item11');
$.accordian('#list2 > div', '#item22', {
titles:'.mytitle',
contents:'.mycontent',
onClick:function(){simpleLog(this.id + ' clicked')},
onShow:function(){simpleLog(this.id + ' shown'); $(this).removeClass('off').addClass('on');},
onHide:function(){simpleLog(this.id + ' hidden'); $(this).removeClass('on').addClass('off');},
showSpeed:250,
hideSpeed:550
});
});
</script>
<%--#list1 .title { font-weight:bold; }--%>
<style type="text/css">
#list1, #list2 { width:20em; }
.title, .mytitle { cursor:pointer; border:1px solid #CCCCCC; margin-top:0.5em; padding:0.1em; }
.on .mytitle { background-color:#C0C0C0; }
.off .mytitle { background-color:#E0E0E0; }
.content, .mycontent { background-color:#F5F5F5; padding:0.1em; border:1px solid #C0C0C0; border-top-width:0; }
#log { position:absolute; top:0; right:1em; text-align:right; }
</style>
</head>
<body>
<h1>Standard</h1>
<div id="list1">
<%--<div id="item11">
<div class="title">Lorem ipsum dolor sit amet</div>
<div class="content">
consectetuer adipiscing elit<br/>
Sed lorem leo<br/>
lorem leo consectetuer adipiscing elit<br/>
Sed lorem leo<br/>
rhoncus sit amet
</div>
</div>
<div id="item12">
<div class="title">elementum at</div>
<div class="content">
bibendum at, eros<br/>
Cras at mi et tortor egestas vestibulum<br/>
sed Cras at mi vestibulum<br/>
Phasellus sed felis sit amet
</div>
</div>
<div id="item13">
<div class="title">orci dapibus semper.</div>
<div class="content">
Morbi eros massa<br/>
interdum et, vestibulum id, rutrum nec<br/>
bibendum at, eros<br/>
Cras at mi et tortor egestas vestibulum<br/>
Phasellus sed felis sit amet<br/>
Morbi eros massa<br/>
interdum et, vestibulum id, rutrum nec<br/>
Phasellus sem leo
</div>
</div>--%>
</div>
<h1>With options</h1>
<div id="list2">
<div id="item21">
<div class="mytitle">Lorem ipsum dolor sit amet</div>
<div class="mycontent">
consectetuer adipiscing elit<br/>
Sed lorem leo<br/>
lorem leo consectetuer adipiscing elit<br/>
Sed lorem leo<br/>
rhoncus sit amet
</div>
</div>
<div id="item22">
<div class="mytitle">elementum at</div>
<div class="mycontent">
bibendum at, eros<br/>
Cras at mi et tortor egestas vestibulum<br/>
sed Cras at mi vestibulum<br/>
Phasellus sed felis sit amet
</div>
</div>
<div id="item23">
<div class="mytitle">orci dapibus semper.</div>
<div class="mycontent">
Morbi eros massa<br/>
interdum et, vestibulum id, rutrum nec<br/>
bibendum at, eros<br/>
Cras at mi et tortor egestas vestibulum<br/>
Phasellus sed felis sit amet<br/>
Morbi eros massa<br/>
interdum et, vestibulum id, rutrum nec<br/>
Phasellus sem leo
</div>
</div>
</div>
<div id="log"><div><strong>Log of the 2nd accordion</strong></div></div>
</body>
</html>
Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="chili-1.7.pack.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.accordion.js" type="text/javascript"></script>
<script type="text/jscript">
jQuery().ready(
function(){
jQuery('#list1b').accordion({
autoheight: false
});
// var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard');
var accordions = jQuery('#list1b');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="basic" style="float:left; margin-left: 2em;" id="list1b">
<a>There is one obvious advantage:</a>
<div>
<p>
You've seen it coming!<br/>
Buy now and get nothing for free!<br/>
Well, at least no free beer. Perhaps a bear,<br/>
if you can afford it.
</p>
</div>
<a>Now that you've got
</a>
<div>
<p>
your bear, you have to admit it!<br/>
No, we aren't selling bears.
</p>
</div>
<a>Rent one bear,</a>
<div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div>
</div>
</form>
</body>
</html>
Code<html>
<head>
<title>jQuery accordion</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="../jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$.accordian = function(items, first, options) {
var active = first;
var running = 0;
var titles = options && options.titles || '.title';
var contents = options && options.contents || '.content';
var onClick = options && options.onClick || function(){};
var onShow = options && options.onShow || function(){};
var onHide = options && options.onHide || function(){};
var showSpeed = options && options.showSpeed || 'slow';
var hideSpeed = options && options.hideSpeed || 'fast';
$(items).not(active).children(contents).hide();
$(items).not(active).each(onHide);
$(active).each(onShow);
$(items).children(titles).click(function(e){
var p = $(contents, this.parentNode);
$(this.parentNode).each(onClick);
if (running || !p.is(":hidden")) return false;
running = 2;
$(active).children(contents).not(':hidden').slideUp(hideSpeed, function(){--running;});
p.slideDown(showSpeed, function(){--running;});
$(active).each(onHide);
active = '#' + $(this.parentNode)[0].id;
$(active).each(onShow);
return false;
});
};
function simpleLog(message) {
$('<div>' + message + '</div>').appendTo('#log');
}
$(function(){
$.accordian('#list1 > div', '#item11');
$.accordian('#list2 > div', '#item22', {
titles:'.mytitle',
contents:'.mycontent',
onClick:function(){simpleLog(this.id + ' clicked')},
onShow:function(){simpleLog(this.id + ' shown'); $(this).removeClass('off').addClass('on');},
onHide:function(){simpleLog(this.id + ' hidden'); $(this).removeClass('on').addClass('off');},
showSpeed:250,
hideSpeed:550
});
});
</script>
<%--#list1 .title { font-weight:bold; }--%>
<style type="text/css">
#list1, #list2 { width:20em; }
.title, .mytitle { cursor:pointer; border:1px solid #CCCCCC; margin-top:0.5em; padding:0.1em; }
.on .mytitle { background-color:#C0C0C0; }
.off .mytitle { background-color:#E0E0E0; }
.content, .mycontent { background-color:#F5F5F5; padding:0.1em; border:1px solid #C0C0C0; border-top-width:0; }
#log { position:absolute; top:0; right:1em; text-align:right; }
</style>
</head>
<body>
<h1>Standard</h1>
<div id="list1">
<%--<div id="item11">
<div class="title">Lorem ipsum dolor sit amet</div>
<div class="content">
consectetuer adipiscing elit<br/>
Sed lorem leo<br/>
lorem leo consectetuer adipiscing elit<br/>
Sed lorem leo<br/>
rhoncus sit amet
</div>
</div>
<div id="item12">
<div class="title">elementum at</div>
<div class="content">
bibendum at, eros<br/>
Cras at mi et tortor egestas vestibulum<br/>
sed Cras at mi vestibulum<br/>
Phasellus sed felis sit amet
</div>
</div>
<div id="item13">
<div class="title">orci dapibus semper.</div>
<div class="content">
Morbi eros massa<br/>
interdum et, vestibulum id, rutrum nec<br/>
bibendum at, eros<br/>
Cras at mi et tortor egestas vestibulum<br/>
Phasellus sed felis sit amet<br/>
Morbi eros massa<br/>
interdum et, vestibulum id, rutrum nec<br/>
Phasellus sem leo
</div>
</div>--%>
</div>
<h1>With options</h1>
<div id="list2">
<div id="item21">
<div class="mytitle">Lorem ipsum dolor sit amet</div>
<div class="mycontent">
consectetuer adipiscing elit<br/>
Sed lorem leo<br/>
lorem leo consectetuer adipiscing elit<br/>
Sed lorem leo<br/>
rhoncus sit amet
</div>
</div>
<div id="item22">
<div class="mytitle">elementum at</div>
<div class="mycontent">
bibendum at, eros<br/>
Cras at mi et tortor egestas vestibulum<br/>
sed Cras at mi vestibulum<br/>
Phasellus sed felis sit amet
</div>
</div>
<div id="item23">
<div class="mytitle">orci dapibus semper.</div>
<div class="mycontent">
Morbi eros massa<br/>
interdum et, vestibulum id, rutrum nec<br/>
bibendum at, eros<br/>
Cras at mi et tortor egestas vestibulum<br/>
Phasellus sed felis sit amet<br/>
Morbi eros massa<br/>
interdum et, vestibulum id, rutrum nec<br/>
Phasellus sem leo
</div>
</div>
</div>
<div id="log"><div><strong>Log of the 2nd accordion</strong></div></div>
</body>
</html>
2 TeeryLee上幻灯翻转第一个
Code<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="chili-1.7.pack.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.accordion.js" type="text/javascript"></script>
<script type="text/jscript">
jQuery().ready(
function(){
jQuery('#list1b').accordion({
autoheight: false
});
// var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard');
var accordions = jQuery('#list1b');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="basic" style="float:left; margin-left: 2em;" id="list1b">
<a>There is one obvious advantage:</a>
<div>
<p>
You've seen it coming!<br/>
Buy now and get nothing for free!<br/>
Well, at least no free beer. Perhaps a bear,<br/>
if you can afford it.
</p>
</div>
<a>Now that you've got
</a><div>
<p>
your bear, you have to admit it!<br/>
No, we aren't selling bears.
</p>
</div>
<a>Rent one bear,
</a><div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div>
</div>
</form>
</body>
</html>
本人在长沙, 有工作可以加我QQ4658276
