jquery 特效整合
jquery做的特效很多，整合了几种常用的，为了自己下次用着方便，也希望给需要的人提供帮助。
参考了下面的连接：
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
http://hi.baidu.com/vevoly/blog/item/ccd29845b834e437869473f1.html
http://hi.baidu.com/vevoly/blog/item/39f5a1181796e40f34fa41f2.html
<html>
<head>
<script src="jquery-1.6.js"></script>
<style type="text/css">
/*
面板折叠效果
*/
.accordion2 {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion2 h3 {
background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion2 h3:hover {
background-color: #e3e2e2;
}
.accordion2 h3.active {
background-position: right 5px;
}
.ctn{
background:#f1f1f1;
width:480px;
height:400px;
overflow-y:auto;
display:none;
}
/*
动态悬停
*/
.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background-color:#e3e3e3 ;
}
.menu li em {
background-color:#656565 ;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
/*
面板下滑
*/
a:focus {
outline: none;
}
#panel {
background: #e2e2e2;
height: 200px;
width:600px;
overflow-y:scroll;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #e2e2e2;
background-color: #ffffff;
width:600px;
}
.btn-slide {
background-color: #333333;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
margin-left:230px;
}
.active {
background-position: right 12px;
}
/*
面板逐渐消失
*/
h3 {
margin: 0;
padding: 0 0 .3em;
}
p {
margin: 0;
padding: 0 0 .5em;
}
.pane {
background: #edf5e1;
padding: 10px 20px 10px;
position: relative;
border-top: solid 2px #c4df9b;
}
.pane .delete {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
width:40px;
height:20px;
text-align:center;
background-color:#e3e3e3
}
/*
盒子特效
*/
#box {
background: #6699FF;
height: 100px;
width: 100px;
position: relative;
}
/*
折叠显示个人资料
*/
.message_list {
list-style: none;
margin: 0;
padding: 0;
width: 383px;
}
.message_list li {
padding: 0;
margin: 0;
background-color:#666666 ;
border:1px solid #cccccc;
}
.message_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
}
.message_head .timestamp {
color: #ffffff;
font-size: 95%;
position: absolute;
right: 10px;
top: 5px;
}
.message_head cite {
font-size: 100%;
font-weight: bold;
font-style: normal;
}
.message_body {
padding: 5px 10px 15px;
background-color:#e2e2e2;
}
.collapse_buttons {
text-align: right;
border-top: solid 1px #e4e4e4;
padding: 5px 0;
width: 383px;
}
.collapse_buttons a {
margin-left: 15px;
float: right;
}
.show_all_message {
background-color: #e2e2e2;
padding-right: 12px;
}
.collpase_all_message {
background-color: #e4e4e4;
padding-right: 12px;
color: #666666;
}
/*
显示整块连接
*/
a:visited {
color: #ffffff;
}
a:hover {
color: #333300;
text-decoration: underline;
}
.pane-list {
margin: 0;
padding: 0;
list-style: none;
}
.pane-list li {
background: #e2e2e2;
padding: 10px 20px 10px;
border-top: solid 1px #c4df9b;
cursor: pointer;
}
.pane-list li:hover {
background: #939393;
}
</style>
</head>
<body>
<!--
面板折叠
-->
<h2>面板折叠效果</h2>
<div class="ctn">321<br/>321<br/>321<br/>321<br/>321<br/>321<br/>321<br/>321<br/>321<br/>321<br/>321<br/>321<br/>321<br/></div>
<div class="accordion2" id="pnl">
<h3>论文代写</h3>
<div class="ctn">本站代写论文<br /></div>
<h3>网站开发</h3>
<div class="ctn">专业制作各种网站<br /></div>
<h3>企业应用开发</h3>
<div class="ctn">
<p>为企业定制各种系统</p>
<ul>
<li>财务软件</li>
<li>进销存系统</li>
<li>人事系统</li>
<li>OA</li>
<li>论坛</li>
</ul>
</div>
<h3>移动应用开发</h3>
<div class="ctn">手机应用研发<br /></div>
<h3>脚本编写</h3>
<div class="ctn">代写各种网页脚本，JS/PHP等<br/></div>
</div>
<!--
动态悬停
-->
<h2>动态悬停效果</h2>
<ul class="menu">
<li>
<a href="http://www.hl-workroom.com" target="blank">网站开发</a>
<em>以企业发展为导向，专业定制网站</em>
</li>
<li>
<a href="http://www.hl-workroom.com" target="blank">订购毕业设计，论文</a>
<em>学生的好帮手</em>
</li>
<li>
<a href="http://www.hl-workroom.com" target="blank">移动应用定制</a>
<em>以客户为核心，定制应用软件</em>
</li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br />
<!--
面板下滑
-->
<h2>面板下拉效果</h2>
<div id="panel">
这里写内容<br/>
</div>
<p class="slide"><a href="#" class="btn-slide">察看详细</a></p>
<!--
面板逐渐消失
-->
<h2>面板逐渐消失效果</h2>
<div class="pane">
<h3>以企业计划为核心的网站制作</h3>
<p>为企业制作站点</p>
<div alt="delete" class="delete" >关闭</div>
</div>
<div class="pane">
<h3>软件开发</h3>
<p>我们的目标是制作更实用、更贴心的软件</p>
<div alt="delete" class="delete" >关闭</div>
</div>
<div class="pane">
<h3>数据库营销</h3>
<p>为企业数据提供备份、分布式存储策略</p>
<div alt="delete" class="delete" >关闭</div>
</div>
<div class="pane">
<h3>脚本编写</h3>
<p>编写各种脚本，节约软件成本</p>
<div alt="delete" class="delete" >关闭</div>
</div>
<div class="pane">
<h3>论文代写</h3>
<p>代写计算机专业论文，代做毕业设计。</p>
<div alt="delete" class="delete" >关闭</div>
</div>
<!--
盒子特效
-->
<h2>盒子特效</h2>
<p><a href="#" class="run">Run</a></p>
<div id="box">
</div>
<!--
折叠显示个人资料
-->
<h2>折叠显示个人资料</h2>
<ol class="message_list">
<li>
<p class="message_head"><cite>个人资料</cite> </p>
<div class="message_body">
<p>姓名王红国，性别 男<br />姓名王红国，性别 男<br />姓名王红国，性别 男<br />姓名王红国，性别 男<br />姓名王红国，性别 男<br />姓名王红国，性别 男<br />姓名王红国，性别 男<br />姓名王红国，性别 男<br />
</p>
</div>
</li>
<li>
<p class="message_head"><cite>教育背景</cite> </p>
<div class="message_body">
<p>大学本科<br />大学本科<br />大学本科<br />大学本科<br />大学本科<br /></p>
</div>
</li>
<li>
<p class="message_head"><cite>证书</cite></p>
<div class="message_body">
<p>证书<br/>证书<br/>证书<br/>证书<br/>证书<br/>证书<br/>证书<br/></p>
</div>
</li>
<li>
<p class="message_head"><cite>个人评价</cite></p>
<div class="message_body">
<p>喜欢足球<br/>喜欢足球<br/>喜欢足球<br/>喜欢足球<br/>喜欢足球<br/>喜欢足球<br/></p>
</div>
</li>
</ol>
<p class="collapse_buttons"><a href="#" class="show_all_message">全部打开</a> <a href="#" class="collpase_all_message">全部收起</a></p>
<!--
显示整块连接
-->
<h2>块连接</h2>
<ul class="pane-list">
<li>
<h2><a href="http://hl-workroom.com" >企业门户网站定制</a></h2>
<div>专业网站制作专业网站制作专业网站制作专业网站制作专业网站制作专业网站制作</div>
</li>
<li>
<h2><a href="http://hl-workroom.com">论文代写</a></h2>
<div>专业论文代写，学生好帮手专业论文代写，学生好帮手专业论文代写，学生好帮手专业论文代写，学生好帮手专业论文代写，学生好帮手</div>
</li>
<li>
<h2><a href="http://hl-workroom.com">脚本编写</a> </h2>
<div>脚本编写，节约软件成本脚本编写，节约软件成本脚本编写，节约软件成本脚本编写，节约软件成本</div>
</li>
<li>
<h2><a href="http://hl-workroom.com">移动应用开发</a> </h2>
<div>您的需求，我们的要求！您的需求，我们的要求！您的需求，我们的要求！</div>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
//=======================折叠面板===========================
////默认不显示
// $(".accordion2 h3").eq(0).addClass("active");
// $(".accordion2 p").eq(0).show();
$(".accordion2 h3").click(function(){
$("#pnl div").css("overflow-y","scroll");//为了兼容ie
$(this).next("div").slideToggle(1)
.siblings("div:visible").slideUp(1);
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
//===========================================================
//======================动态悬停=============================
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
//===========================================================
//======================面板下滑=============================
$(".btn-slide").click(function(){
$("#panel").css("overflow-y","scroll");
$("#panel").slideToggle(300);
$(this).toggleClass("active"); return false;
});
//===========================================================
//=======================面板逐渐消失========================
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});
//===========================================================
//==========================盒子特效==========================
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
//==========================================================
//===========================折叠显示个人资料================
$(".message_list .message_body").hide();
//hide message li after the 5th
//$(".message_list li:gt(4)").hide();
//toggle message_body
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(1);
return false;
});
//collapse all messages
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(1);
return false;
});
//show all messages
$(".show_all_message").click(function(){
$(".message_body").slideDown(1);
return false;
});
//===========================================================
//========================显示整块连接=======================
////兼容ie
$(".pane-list li").hover(function(){
$(this).css("background-color","#939393");
},function(){
$(this).css("background-color","#e2e2e2");
});
////
$(".pane-list li").click(function(){
window.open($(this).find("a").attr("href"));return false;
});
//============================================================
});
</script>
</body> </html>