jquery实现的下拉和收缩效果示例


Posted in Javascript onAugust 21, 2014

下拉和收缩类似的效果应用非常的频繁,本章节简单介绍一下如何实现此效果。
代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<head> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
body{ 
margin:0 auto; 
padding:0; 
width:570px; 
font:75%/120% Arial, Helvetica, sans-serif; 
} 
a:focus{ 
outline:none; 
} 
#panel{ 
background:#69C7F7; 
height:200px; 
display:none; 
} 
.slide{ 
margin:0; 
padding:0; 
border-top:solid 4px #F27613; 
} 
.btn-slide{ 
background:#F27613 url(mytest/jQuery/20121225165932118.gif) no-repeat right -50px; 
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; 
} 
.active{ 
background-position:right 12px; 
} 
</style> 
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".btn-slide").click(function(){ 
$("#panel").slideToggle("slow"); 
$(this).toggleClass("active"); 
return false; 
}) 
}) 
</script> 
</head> 
<body> 
<div style="display: block;" id="panel"></div> 
<p class="slide"> 
<a href="javascript:;" rel="external nofollow" class="btn-slide active">点击查看效果</a> 
</p> 
</body> 
</html>

以上代码实现了下拉和收缩效果,代码比较简单,这里就不多介绍了。

Javascript 相关文章推荐
关于js datetime的那点事
Nov 15 Javascript
javascript的push使用指南
Dec 05 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
简单的jquery左侧导航栏和页面选中效果
Aug 21 #Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 #Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 #Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 #Javascript
json字符串之间的相互转换示例代码
Aug 21 #Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 #Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 #Javascript
You might like
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
关于js类的定义
2011/06/28 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
Python 常用的安装Module方式汇总
2017/05/06 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python上下文管理器全实例详解
2019/11/12 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
护士求职推荐信范文
2013/11/23 职场文书
员工工作表扬信范文
2014/01/13 职场文书
学历公证书范本
2014/04/09 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
拖欠货款起诉状
2015/05/20 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
聘任通知书
2015/09/21 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
对讲机的最大通讯距离是多少
2022/02/18 无线电
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技