- 1、本文档共19页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Web设计师值得收藏的10个jQuery特效
Web设计师值得收藏的10个jQuery特效
来源: sofish.de??发布时间: 2010-12-03 18:29??阅读: 1241 次??原文链接?? 全屏阅读 [收藏]??
编辑点评:jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了。这篇文章的最重要内容是来自Web Designer Wall的一篇教程,一篇包含了10个jQuery特效的教程。
[1] Web设计师值得收藏的10个jQuery特效[2] Web设计师值得收藏的10个jQuery特效
jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了。直到学完CSS的大部分内容,才开始接触这种write less, do more 的Javascrīpt框架。这篇文章的最重要内容是来自Web Designer Wall的一篇教程,一篇包含了10个jQuery特效的教程。这里不打算全文翻译,想以自己的语言来表达,或许这样更方便大家理解/自己以后学习,也可能更准确地描述。
先试试看?特效实例:
View jQuery Demos:/demo/jquery/
jQuery是如何工作的?
首先,你需要下载一个jQuery版本,并将它插入到head标签内。然后,你将需要写函数来告诉jQuery做些什么,下面的这个图表将告诉你jQuery是怎样工作的(请点击图片,查看大图):
如何获取元素(Get the element)?
书写jQuery函数是一个非常简单的事。关键是你要学习如何获取你想要实现的效果的确切元素。
1. (#header) = 获取 id=header 的元素 2. (h3) = 获取所有h3 3. (div#content .photo) = 获取div id=content里 4. 所有用class=photo定义的元素 5. (ul li) = 获取所以 ul 中 li 的元素 6. (ul li:first) = 只获取ul中第一个li
1. 简单的下拉面板
让我们来开始这个简单的下拉面板特效吧,或许你已经见过很多次,现在,自己试试吧:
当包含class=btn-slide的元素被点击,它会下拉/上提div id=panel里的元素。然后切换到CSS中的class=active到a class=btn-slide元素。.active 将会以CSS的方式打开/关闭出面板。
1. $(document).ready(function(){ 2. 3. $(.btn-slide).click(function(){ 4. $(#panel).slideToggle(slow); 5. $(this).toggleClass(active); 6. }); 7. 8. });
view demo:/demo/jquery/simple-slide-panel.html
2. 简单的隐藏效果
如图,当右上角的上图标被点击时,内容被隐藏。
当被定义为 img class=delete 的图片被点击,它会手找到父级元素 div class=pane 并激活它的能力,慢慢消失,隐藏起来。
1. $(document).ready(function(){ 2. 3. $(.pane .delete).click(function(){ 4. $(this).parents(.pane).animate({ opacity: hide }, slow); 5. }); 6. 7. });
view demo:/demo/jquery/simple-disappear.html
3 连续过渡效果
让我们来看看jQuery连贯性的威力吧。只需要几行代码,我能让这个方块渐变+缩放比例地飞来飞去。
Line 1: 当 a class=run 被点击
Line 2: 激活 div id=box 的不透明度(opacity)=0.1,直到值达到400px,速度达到1200px/ms
Line 3: 当opacity=0.4, top=160px,height=20,width=20,以slow显示
Line 4: 当opacity=1, left=0, height=100, width=100,也以slow显示
Line 5: 当opacity=1, left=0
您可能关注的文档
- unit2修改版.ppt
- Unit5单元综合卷.doc
- Unit_8_构词法.ppt
- VB二级入门六.doc
- VF试卷分析.doc
- VB语言及程序开发环境_说课稿(改进版).ppt
- VMwarevSphere体系结构(VTSP5)题库答案.doc
- VMware虚拟机在windows7下上网的方法.doc
- WC碳含量的变化对硬质合金性能的影响.doc
- WesternBlot试剂-自己总结.doc
- 江苏省灌云高级中学2023-2024学年高三上学期第一次月考地理试题含答案.docx
- 备战2024年高考物理一轮重难点复习 第十三章 近代物理.docx
- 江苏省高邮市一中2021-2022学年高三上学期第一次月考语文试题(原卷版).docx
- 江苏省华罗庚中学2023-2024学年高三上学期12月阶段检测数学试卷含答案.docx
- 江苏省海门中学2023-2024学年高三上学期第一次调研考试地理试题及答案.docx
- 备战2024年高考物理一轮重难点复习 第九章 恒定电流.docx
- 江苏省高邮市2023-2024学年高三下学期3月学情调研数学试题含答案.docx
- 备战2024年高考物理一轮重难点复习 实验十一:探究影响感应电流方向的因素.docx
- 备战2024年高考物理一轮重难点复习 实验三:验证平行四边形定则.docx
- 备战2024年高考物理一轮重难点复习 第十四章 光.docx
文档评论(0)