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代码,即可实现如此炫的动画效果,还不感觉试一下!
支持下楼主!(*^__^*)
欢迎楼主给小站提出意见http://www.tt277.com(要支持哦)