分享10个jQuery实现的超酷动态特效教程和插件
openkk 13年前
<p> 使用 jQuery 可以帮助你快速的实现一些非常酷的动态特效，有些时候能帮助你提高用户体验，有时候能够帮助你似的网站更加炫酷。例如在 GBin1 首页使用的标题宽度变化效，可以有效的帮助用户提高阅读的便利性，一个好的前端人员，应该时时刻刻站在用户的角度看待 UI 设计。</p> <p> 今天这里我们收集了 10 个使用特别动态效果的教程，希望大家能够喜欢，如果你能给我们留言，我们将会非常高兴的！</p> <p> 相关教程： <a href="/misc/goto?guid=4958199732319342328" target="_blank">分享 10 个超酷的 jQuery 动画教程</a></p> <p> <strong><a href="/misc/goto?guid=4958202733308618874" target="_blank">1. 动态的标题背景特效</a></strong></p> <p> 在这个教程中，作者介绍了如何使用 jQuery 来使你的标题背景动起来，这样使得你的网站更具有活力</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/67c5f189d5e18a9ca09f9ddb89de4285.jpg" width="520" height="179" /></p> <p> <a href="/misc/goto?guid=4958202734057650991">在线演示 </a></p> <p> <strong><a href="/misc/goto?guid=4958202734789681517" target="_blank">2. jQuery 的 DJ 英雄 </a></strong></p> <p> 使用 jQuery 实现的一个 DJ 英雄</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/526849be77128a49a372c2ffe1613fb6.jpg" width="520" height="301" /></p> <p> <strong><a href="/misc/goto?guid=4958183375008784811" target="_blank">3. jQuery API </a></strong></p> <p> jQuery 文档中自带的一个动画应用的例子，如果你仔细研究的话，你会发现其中的奥秘。</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/221954345eedc364801b6cba3f5cd4b8.jpg" width="520" height="169" /></p> <p> <strong><a href="/misc/goto?guid=4958202736204778400" target="_blank">4. 一个自动移动的视差背景效果</a></strong></p> <p> 帮助你生成一个视差的背景动画效果</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/1733d79104538bb19ec5dc2a58a43b1c.jpg" width="520" height="188" /></p> <p> <a href="/misc/goto?guid=4958202736938712761">在线演示 </a></p> <p> <strong><a href="/misc/goto?guid=4958202737699435910" target="_blank">5. jAni </a></strong></p> <p> 这是一个简单的 jQuery 插件能够帮助你让你的背景动起来。这个插件是使用 GIF 动画文件的替代选择。 但是拥有几个非常不过的特性。</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/a1f4d653cb2abe8d945f45854acfa9e4.jpg" width="520" height="156" /></p> <p> <a href="/misc/goto?guid=4958202738432928918" target="_blank">在线演示 </a></p> <p> <strong><a href="/misc/goto?guid=4958202739172384764" target="_blank">6. jQuery 动画： 一个 7 个步骤的应用 </a></strong></p> <p> 来自于 NetTuts++ 的一个教程，你可以找到几个不错的特效。</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/85dfe9b05a8a981763830269a320b73d.jpg" width="520" height="190" /></p> <p> <a href="/misc/goto?guid=4958202739911361983" target="_blank">在线演示 </a></p> <p> <strong><a href="/misc/goto?guid=4958202740649430660" target="_blank">7. jQuery 的简单连续动画效果 </a></strong></p> <p> 一些很有用的 jQuery 小技巧，帮助大家创建自己的特效</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/b8adb973a7bdac802df82cb1a4dfd443.jpg" width="520" height="133" /></p> <p> <a href="/misc/goto?guid=4958202741391978233" target="_blank">在线演示 </a></p> <p> <strong><a href="/misc/goto?guid=4958202742142838287" target="_blank">8. JQuery Faux 3D </a></strong></p> <p> 简单的放置一些方框，生成一个 jQuery 实现的 3D 动画效果</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/568fc4d5ead66adbf74e7b8762b760c3.jpg" width="520" height="345" /></p> <p> <a href="/misc/goto?guid=4958202742882273139" target="_blank">在线演示 </a></p> <p> <strong><a href="/misc/goto?guid=4958202743618659574" target="_blank">9. 背景移动的文字特效 </a></strong></p> <p> 使用动画特效的文字背景，非常炫！</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/aaf8d96a363994e49ac4eb1599f8f8f5.jpg" width="520" height="169" /></p> <p> <a href="/misc/goto?guid=4958202744355775194" target="_blank">在线演示 </a></p> <p> <strong><a href="/misc/goto?guid=4958202745092591543" target="_blank">10. jQuery 插件 Approach </a></strong></p> <p> jQuery approach 插件能够帮助你动画一些样式，和 jQuery animate 类似，但是不同的地方在于，它是基于距离而不是时间的实现方式。</p> <p style="text-align:center;"><img alt="分享10个jQuery实现的超酷动态特效教程和插件" src="https://simg.open-open.com/show/663753a964255b6cfa5b2705770c530c.jpg" width="520" height="102" /></p> <p> <a href="/misc/goto?guid=4958202745832618182" target="_blank">在线演示 </a></p> <br /> 来自: <a id="link_source2" href="/misc/goto?guid=4958202746575569067" target="_blank">www.gbin1.com</a>