index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画效果</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<input type="button" class="button" value="按钮" />
<input type="button" class="stop" value="停止" />
<input type="button" class="ani" value="查找运动的动画" />
<div id="box">
box
</div>
<div id="pox">
pox
</div>
</body>
</html>
style.css
/* CSS Document */
#box{ width:100px; height:100px; background:red; position:absolute;}
#pox{ width:100px; height:100px; background:green; top:200px; position:absolute;}
demo.js
$(function(){
/*
$('.button').click(function(){
$('#box').animate({
left :'800px'
},3000);
});
$('.stop').click(function(){
$('#box').stop();
});
$('.button').click(function(){
$('#box').animate({left :'300px'},1000)
.animate({bottom :'300px'},1000)
.animate({width :'300px'},1000)
.animate({height :'300px'},1000);
});
$('.stop').click(function(){
$('#box').stop();
});
//如果有列队动画，停止的话，那么会停止掉第一个列队动画，然后继续执行后面的列队动画
$('.stop').click(function(){
$('#box').stop(true);
});
//第一个参数，如果为 true,就是停止并并且清除后台的列队动画，动画即完全停止
//默认值为 false
$('.stop').click(function(){
$('#box').stop(true,true);
});
//第二个参数，如果为 true ,停止后会跳转到末尾的位置上.默认值为 false
$('.button').click(function(){
$('#box').delay(1000)
.animate({left :'300px'})
.animate({bottom :'300px'}).delay(2000)
.animate({width :'300px'})
.animate({height :'300px'});
});
$('#box').slideToggle('slow',function(){
$(this).slideToggle('slow',arguments.callee);
});
$('.ani').click(function(){
$(':animated').stop().css('background','blue');
});
$.fx.interval = 200;
$.fx.off = true;//关闭动画
$('.button').click(function(){
$('#box').toggle(1000);
});
$('.button').click(function(){
$('#box').animate({
left:'800px'
},3000,'swing');
});
*/
$('.button').click(function(){
$('#box').animate({
left:'800px'
},3000,'swing');
$('#pox').animate({
left:'800px'
},3000,'linear');
});
});
相关推荐
在本章“第11章 动画效果（中）”中，我们将深入探讨计算机图形学和编程领域中的动画制作技术。尽管描述为空，但从标题我们可以推断，本章可能是某个教程或系列文章的一部分，专注于讲解如何在软件开发中创建中间...
在本章“动画效果（上）”中，我们将探讨如何在软件开发中创建引人入胜的视觉动态，特别是关注编程中的动画技术。动画效果在现代应用和网页设计中起着至关重要的作用，它们能够提升用户体验，使界面更加生动、交互性...
总之，《Maya 2012中文版入门与实战视频教程》的第11章“动画初级篇”将带你走进三维动画的世界，通过一系列实例操作，逐步掌握Maya的基础动画技能。无论你是对动画制作充满热情的初学者，还是希望拓宽技能范围的...
在本章"精通Direct3D图形与动画程序设计 29_第二十九章 海浪效果模拟"中，我们将深入探讨如何使用Direct3D技术来创建逼真的海浪效果。Direct3D是Microsoft开发的一个图形应用程序接口(API)，主要用于游戏开发、专业...
在Direct3D图形与动画程序设计中，运动模糊效果是一个重要的技术，特别是在游戏开发和电影制作中，它能显著提高视觉...通过深入学习和实践，你将能够熟练地运用这些技术，创造出更加逼真、引人入胜的3D图形和动画效果。
第21章 HLSL高级应用 1、HLSLSelfShadowing 演示使用HLSL渲染语言进行GPU编程实现自遮蔽阴影。 2、HLSLBumpTexture 演示使用HLSL渲染语言进行GPU编程实现凹凸纹理映射。 3、HLSLCubeMapping 演示使用HLSL渲染语言...
这一章可能会涵盖表单验证、提交处理以及使用action和method属性设置表单行为。 3. HTML框架：框架允许网页内容分为多个独立显示的区域，每个区域可以加载不同的网页。学习框架有助于理解frameset、frame和noframes...
《网页设计与制作》课程中的第11章主要讲解了网页动画的制作，特别是通过Adobe Flash 8这一矢量动画编辑软件来实现。Flash 8是一款强大的创作工具，广泛应用于制作交互式内容，如动画、演示文稿、应用程序以及网站。...
第1章 3ds max 9入门 第2章 基本模型创建 第3章 基本编辑操作 第4章 创建图形 ...第11章 基础动画 第12章 粒子动画及影视合成 第13章 室内效果图制作实训 第14章 建筑效果图制作实训 第15章 片头动画制作实训
【Flash8教程第11章】在动画中应用外部图像和视频是关于如何在Adobe Flash 8中导入和处理多媒体元素的重要章节。本章主要涵盖了以下几个核心知识点： 1. **应用外部图像**： - Flash 8支持多种图形和图像格式，...
计算机动画技术则大大简化了这个流程，可以自动生成中间画、自动描线上色，并且能够直接输出高质量的动画效果，增强了真实感。 计算机动画广泛应用于电影电视、广告、教育、训练、工业仿真、医疗、游戏等多个领域。...
第1章Powerpoint2016的初步认识.mp4 第2章Powerpoint2016的新增...第21章动画效果实例(2) .mp4 第22章插入超链接.mp4 第23章认识幻灯片放映视图.mp4 第24章操作幻灯片.mp4 第25章打印幻灯片.mp4 第26章打包演示文稿.mp4
在第十一章“应用程序框架”中，作者可能涵盖了以下几个关键知识点： 1. **DirectX SDK**：介绍DirectX软件开发工具包，包括安装、配置和使用的步骤，以及SDK中包含的各种库和头文件的作用。 2. **设备初始化**：...
总的来说，3ds max 7是一款强大的三维动画工具，它提供了一整套工具集，从基础建模到高级动画制作，使得用户能够创建出栩栩如生的三维动画效果。对于想要学习三维动画的人来说，理解和掌握这些基础知识和流程至关...
### 第十一章：面部动画 - **面部动画**：专注于实现逼真的面部表情变化，如眨眼、微笑等。 - _知识点_： - 唇同步技术。 - 如何使用DirectX实现面部动画。 - **文件转换**：介绍如何将不同格式的3D模型文件转换...
在本章"精通Direct3D图形与动画程序设计 27_第二十七章 自然现象模拟"中，我们将深入探讨如何使用Direct3D技术来创建逼真的自然环境效果。Direct3D是Microsoft开发的一个强大的图形应用程序接口(API)，广泛应用于...
第5章介绍如何实现平滑的动画效果；第6章讲解如何用JavaScript语言来实现精灵；第7章展示了如何在动画中模拟物理效果；第8章介绍了进行碰撞检测所用的技术；第 9章以一个简单但是高效的游戏引擎开始，提供了游戏制作...
而7-24"进退有度--进入和退出动画效果对照"则比较了不同类型的进入和退出动画，帮助你根据内容选择最佳的展示方式。 7-11"动画计时之高级日程表"和7-50"动画实例补充--都市霓虹广告字"提供了一些高级技巧，如精确...