Web设计师值得收藏的10个jQuery特效.doc

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