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代码，即可实现如此炫的动画效果，还不感觉试一下！
2 个评论