【jQuery小实例】---2自定义动画
2023-09-14 09:00:04 时间
---本系列文章所用使用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>
样式设置:
<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); });
相关文章
- jQuery Ajax 实例 ($.ajax、$.post、$.get)详解编程语言
- jQuery选中select控件无法设置selected的解决方法
- 使用jQuery模板来展现json数据的代码
- 使用jquery为table动态添加行的实现代码
- 在网站上应该用的30个jQuery插件整理
- 基于jquery的跟随屏幕滚动代码
- JQuery动画和停止动画实例代码
- 自定义jQuery选项卡插件实例
- jquery时间下拉框小例子
- jQuery实现动画效果的实例代码
- Jquery中val()表单取值赋值的实例代码
- Jquery右下角抖动、浮动实例代码(兼容ie6、FF)
- jquery与prototype框架的详细对比
- php配合jquery实现增删操作具体实例
- jquery中的on方法使用介绍
- jquery对元素拖动排序示例
- JQuery的Ajax请求实现局部刷新的简单实例
- Jquery在指定DIV加载HTML示例代码
- jquery实现弹出div,始终显示在屏幕正中间的简单实例
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 图片放大镜jquery.jqzoom.js使用实例附放大镜图标
- jQuery使用之设置元素样式用法实例
- 用队列模拟jquery的动画算法实例