0元购京东自营斐讯K2路由器返399元活动

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

作者:     目录: Jquery 网页特效

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代码,即可实现如此炫的动画效果,还不感觉试一下!

标签: .
发表: 2010年06月04日

2 个评论

  1. 支持下楼主!(*^__^*)

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

  2. Pingback: 網站開發壓縮工具收集整理 | 72Pixel-Design™ | css HTML jquery php Wordpress 網站設計

发表评论

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