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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
简单的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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
一个目录遍历函数
2006/10/09 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery.each使用详解
2015/07/07 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python Django的web开发实例(入门)
2019/07/31 Python
python 类之间的参数传递方式
2019/12/20 Python
Java平台和其他软件平台有什么不同
2015/06/05 面试题
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
天那边观后感
2015/06/09 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
《灰雀》教学反思
2016/02/19 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Python学习之异常中的finally使用详解
2022/03/16 Python
Python装饰器详细介绍
2022/03/25 Python
python文件与路径操作神器 pathlib
2022/04/01 Python