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 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
Laravel5中contracts详解
2015/03/02 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php生成验证码函数
2015/10/20 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python 魔法函数实例及解析
2019/09/25 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
适用于所有创业者的创业计划书
2014/02/05 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
家长会标语
2014/06/24 职场文书
老干部工作先进事迹
2014/08/17 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
青涩记忆观后感
2015/06/18 职场文书
行政复议决定书
2015/06/24 职场文书
标准发言稿结尾
2019/07/18 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技