---本系列文章所用使用js均可在本博客文件中找到
本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果。和一个类似qq面板效果。大致也分为三步:添加jquery-1.8.3.js文件。这个是不可缺少的,以下文章都需要添加,下面不再一一强调。随后添加图片,写jQuery代码:
一,小驴跑跑
图片添加:
<image src="1.gif" id="im" />
编写Jqery代码:
$('#im').animate({ 'left': '490px', 'top': '250px' }).animate({ 'left': '1000px', 'top': '550px', 'width': '200px', 'height': '200px' }).animate({ 'left': '1200px', 'top': '190px', 'width': '60px', 'height': '80px' }).animate({ 'left': '0px', 'top':'0px' });
注释:调用animate方法,里面参数可以设置坐标,可以在移动过程设置图片大小
效果:
二,我的同学录
1,引用js代码
2,编写html文件并设置样式
<div id="dv">
<ul id="ul">
<li>大学同学
<ul>
<li>王永威</li>
<li>贺亚东</li>
<li>张文阳</li>
</ul>
</li>
<li>高中同学
<ul>
<li>闫飞</li>
<li>小明</li>
<li>孟轲</li>
</ul>
</li>
<li>初中同学
<ul>
<li>韩剑南</li>
<li>韩建北</li>
<li>韩亚红</li>
</ul>
</li>
</ul>
</div>
样式设置:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<style type="text/css"> #dv { width:150px; height:400px; border:1px solid black; } #ul { list-style-type:none; margin:0px; padding:0px; } #ul li { text-align:center; font-size:medium; color:White; cursor:pointer; border-bottom:3px solid grey; background-color:Orange; } #ul li ul { padding:0px; margin:0px; display:none; list-style-type:none; } #ul li ul li { font-size:medium; color:Black; background-color:White; text-align:left; } </style>
jQuery代码实现效果:
$('#ul>li').click(function () {
$('ul', $(this)).toggle(200);
//$('ul', $(this)).show(200);
$(this).siblings().children('ul').hide(200);
})
效果图:
附录:显示,隐藏和显隐效果的jQuery代码
$('#but1').click(function () {
$('#dv').css('background-color','blue').show(1000);
});
$('#but2').click(function () {
$('#dv').hide(1000);
});
$('#but3').click(function () {
$('#dv').toggle(1000);
});