- 1、本文档共3页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
jQuery制作js下拉收缩js展开收起js显示隐藏效果
PHP教程网: HYPERLINK PHP博客:
PAGE
PAGE 3
HYPERLINK /jquery/542.html jQuery制作js下拉收缩、js展开收起、js显示隐藏效果
文章来源: HYPERLINK /jquery/542.htm /jquery/542.htm
今天发布一个jquery基础教程--jQuery制作js下拉收缩、js展开收起、js显示隐藏效果!废话不多说了先上效果图素材图片下拉上下图标下载下面切入正题先引入jquery.js框架就不说了然后写html代码
div style=display: block; id=panel!-- content--/divp class=slidea href=javascript:; class=btn-slide active点击试试/a/p
就2段代码一个内容区域#panel一个是下拉.slide下面是css代码
style type=text/cssbody { 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(/images/jstx/white-arrow.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
重点是.btn-slide样式background背景颜色和下拉小图标因为用到图片组合在一张图片上所以用到背景定位right -50px;最后放出jquery代码,
script type=text/javascript src=/templets/niu/js/jquery.min.js/scriptscript type=text/javascript$(document).ready(function(){$(.btn-slide).click(function(){//当点击黄色块触发silideToggle$(#panel).slideToggle(slow);$(this).toggleClass(active); return false;//触发后然后改变小图标方向,css在.active定义的});});/script
演示地址: HYPERLINK /js_texiao/541.html /js_texiao/541.htmll
您可能关注的文档
- ISPE06终处理选择注射用水.doc
- ISO90012015质量管理体系要求学习word版.doc
- ISSR(inter-sequencerepeat)分子标记的实验原理及操作流程.doc
- ISO90012008版质量手册.doc
- It’sseveno’clock2014年小学教师信息技术应用能力提升全员远程研修.doc
- ISO90012008体系标准.doc
- ISO18000-6B标准中防碰撞算法的改进.doc
- IT公司员工素质能力表.doc
- ITS在区分疑似黄鹌菜上的应用.doc
- IT企业如何进行研发项目管理.doc
- 2024高考物理一轮复习规范演练7共点力的平衡含解析新人教版.doc
- 高中语文第5课苏轼词两首学案3新人教版必修4.doc
- 2024_2025学年高中英语课时分层作业9Unit3LifeinthefutureSectionⅢⅣ含解析新人教版必修5.doc
- 2024_2025学年新教材高中英语模块素养检测含解析译林版必修第一册.doc
- 2024_2025学年新教材高中英语单元综合检测5含解析外研版选择性必修第一册.doc
- 2024高考政治一轮复习第1单元生活与消费第三课多彩的消费练习含解析新人教版必修1.doc
- 2024_2025学年新教材高中英语WELCOMEUNITSectionⅡReadingandThi.doc
- 2024_2025学年高中历史专题九当今世界政治格局的多极化趋势测评含解析人民版必修1.docx
- 2024高考生物一轮复习第9单元生物与环境第29讲生态系统的结构和功能教案.docx
- 2024_2025学年新教材高中英语UNIT5LANGUAGESAROUNDTHEWORLDSect.doc
文档评论(0)