利用jQuery制作具有动画效果的链接

作者:     目录:Jquery 网页特效     发表:2010年06月04日

jQuery是一套跨浏览器的JavaScript库,强化了HTML与JavaScript之间的操作,是目前最受欢迎的JavaScript库。利用Jquery可以制作出超酷的动画效果。

建议使用谷歌 AJAX Libraries API提供jQuery的js的引用服务,其优点是加载速度快,而且能降低网站服务器的负荷。

预览 利用jquery制作动画效果的链接

利用Jquery制作具有动画效果的链接 源代码

首先必须加载Jquery库,这里直接使用谷歌 AJAX Libraries API,使用方法如下:
在<head></head>内增加下面的代码即可:
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.1.js”></script>

HTML

<ul>
<li><a href="http://renniaofei.com" class="link">首页</a></li>
<li><a href="http://renniaofei.com" class="link">灵感</a></li>
<li><a href="http://renniaofei.com/category/design" class="link">设计</a></li>
<li><a href="http://renniaofei.com/category/graphic" class="link">图像</a></li>
<li><a href="http://renniaofei.com/category/code" class="link">编码</a></li>
<li><a href="http://renniaofei.com/category/freebies" class="link">素材</a></li>
<li><a href="http://renniaofei.com/category/internet" class="link">网络</a></li>
</ul>

CSS

#links ul li {
margin-bottom: 6px;
list-style-type: none;
}

Jquery

<script type="text/javascript">
  $(document).ready(function() {
  $('a.link').hover(function() { //mouse in
    $(this).animate({ paddingLeft: '20px' },400);
  }, function() { //mouse out
    $(this).animate({ paddingLeft: 0 }, 400);
  });
});
</script>

代码说明

Html代码中所有需要增加动画效果的链接都添加类(class=”link”),然后在Jquery中对a.link(所有class=”link”的链接)设置动画效果。

只需要简单的几行Jquery代码,即可实现如此炫的动画效果,还不感觉试一下!

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝红包领取方法:

  • 打开支付宝APP,首页搜索数字 1547638 即可领现金红包
  • 手机用户直接 点击这里领取
  • 或者支付宝APP扫描下面二维码领取
支付宝现金红包 每天可领

2 个评论

  1. Pingback: 網站開發壓縮工具收集整理 | 72Pixel-Design™ | css HTML jquery php Wordpress 網站設計
  2. 支持下楼主!(*^__^*)

    欢迎楼主给小站提出意见http://www.tt277.com(要支持哦)

kuailehaitong进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.