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 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
浅谈JavaScript中this的指向问题
Jul 28 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
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
Python文件和目录操作详解
2015/02/08 Python
python中sleep函数用法实例分析
2015/04/29 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python 序列的方法总结
2016/10/18 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Python多线程正确用法实例解析
2020/05/30 Python
python利用opencv保存、播放视频
2020/11/02 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
美国电视购物:QVC
2017/02/06 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
市场专员岗位职责
2014/02/14 职场文书
煤矿安全保证书
2015/02/27 职场文书
简历自我评价优缺点
2015/03/11 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
python用tkinter开发的扫雷游戏
2021/06/01 Python
JS的深浅复制详细
2021/10/16 Javascript
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技