当前位置： 首页 > news >正文

jquery 特效整合

news 来源：原创 2024/5/2 12:15:45

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>


相关文章：

  • 奇怪，博客无法匿名评论了
  • js获取屏幕大小
  • 术业有专攻，尽好本分最重要
  • 消除frame边框
  • Ubuntu最新通知机制欣赏
  • 重温c++ hello,world
  • Mozilla:对付微软有时就要靠政府
  • VC++/MFC COMBOBOX使用
  • [IE编程] 如何编程清除IE缓存
  • 透明滚动条 HTML
  • 篮球/NBA 英语词汇大全
  • 颜色搭配
  • JS常用函数 大全
  • asp.net导入Excel表
  • VC++/MFC常用控件 基本使用方法
  • 【Linux系统编程】快速查找errno错误码信息
  • Apache Spark Streaming 使用实例
  • canvas绘制圆角头像
  • ECMAScript入门（七）--Module语法
  • js ES6 求数组的交集，并集，还有差集
  • JS专题之继承
  • Markdown 语法简单说明
  • Mysql5.6主从复制
  • Next.js之基础概念（二）
  • Odoo domain写法及运用
  • Sequelize 中文文档 v4 - Getting started - 入门
  • Vue小说阅读器（仿追书神器）
  • Web设计流程优化：网页效果图设计新思路
  • 马上搞懂 GeoJSON
  • 深入浅出Node.js
  • 深入浅出webpack学习(1)--核心概念
  • 用jquery写贪吃蛇
  • 原创：新手布局福音！微信小程序使用flex的一些基础样式属性（一）
  • 终端用户监控：真实用户监控还是模拟监控？
  • LIGO、Virgo第三轮探测告捷，同时探测到一对黑洞合并产生的引力波事件 ...
  • 积累各种好的链接
  • 曜石科技宣布获得千万级天使轮投资，全方面布局电竞产业链 ...
  • ​软考-高级-系统架构设计师教程（清华第2版）【第15章 面向服务架构设计理论与实践（P527~554）-思维导图】​
  • # 达梦数据库知识点
  • $().each和$.each的区别
  • （1）SpringCloud 整合Python
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • (Git) gitignore基础使用
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • （rabbitmq的高级特性）消息可靠性
  • （Redis使用系列） SpringBoot 中对应2.0.x版本的Redis配置 一
  • (vue)页面文件上传获取:action地址
  • （安全基本功）磁盘MBR，分区表，活动分区，引导扇区。。。详解与区别
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • （七）微服务分布式云架构spring cloud - common-service 项目构建过程
  • （三维重建学习）已有位姿放入colmap和3D Gaussian Splatting训练
  • （转）iOS字体
  • .axf 转化 .bin文件 的方法
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter