Google+中有一个特效：拖拽用户头像至分组内，用户头像会有一个特效（绕着圆圈转一圈）。写了个简单的示例，效果如下图所示：
javaScript 动画代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>~ ~</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<style type='text/css'>
* {margin:0; padding:0;}
.m {position:absolute; width:1px; height:1px; z-index:1; background-color:#3399cc}
.move {width:30px; height:30px; position:absolute; background-color:#da4936; z-index:999; border-radius:25px;}
.h {width:800px; position:absolute; border-top:1px solid #323232; top:300px; left:0px; z-index:9;}
.v {height:800px; border-left:1px solid #323232; left:300px; top:0; z-index:10; position:absolute;}
#btn {margin:100px;}
</style>
</head>
<body>
<button id="btn">开始运动</button>
<div class="move" id="modelEl"></div>
<div class="h"></div>
<div class="v"></div>
<div>
步长：<select id='sel'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
<script type="text/javascript">
//1度＝π/180 弧度 ( ≈0.017453弧度 )
!(function() {
for (var i = 0; i < 360; i+=1) {
var r = 200;
var x0 = 300;
var y0 = 300;
var angle = Math.PI * i / 180;
var x = Math.cos(angle) * r + x0;
var y = Math.sin(angle) * r + y0;
document.write('<div class="m" style="left:'+x+'px; top:'+y+'px;"></div>');
r = 170;
x = Math.cos(angle) * r + x0;
y = Math.sin(angle) * r + y0;
document.write('<div class="m" style="left:'+x+'px; top:'+y+'px;"></div>');
}
})();
function getEl(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
getEl("btn").onclick = moveHandler;
function movePos(n) {
var el = getEl("modelEl");
var r = 185;
var x0 = 300;
var y0 = 300;
var angle = Math.PI * n / 180;
var x = Math.cos(angle) * r + x0 - el.offsetWidth/2;
var y = Math.sin(angle) * r + y0 - el.offsetHeight/2;
el.style.left = x + 'px';
el.style.top = y + 'px';
}
movePos(270);
function transform(A) {
return 1 - Math.pow(1 - A, 3);
}
function moveHandler() {
var base = 270;
var step = getEl('sel').value | 0;
var start = 360;
var end = 0;
getEl("btn").disabled = true;
var timer = setInterval(function() {
if (start >= end) {
movePos(base + start);
start -= step;
step += transform((start - end)/360) / 100;
} else {
movePos(base + end);
clearInterval(timer);
if (moveHandler.count < 10) {
moveHandler.count++;
setTimeout(function() {
getEl("sel").selectedIndex = Math.random() * getEl("sel").options.length | 0;
moveHandler();
}, 100);
} else {
moveHandler.count = 0;
getEl("btn").disabled = false;
}
}
}, 1);
}
moveHandler.count = 0;
</script>
</body>
</html>
相关推荐
虽然CSS3引入了`transition`和`animation`属性，可以方便地创建简单的动画，但JavaScript能提供更大的灵活性和控制力。例如，JavaScript可以更精确地控制动画的开始、结束、速度曲线以及响应用户事件。 四、...
在“JavaScript_简单的动画为您的顺风项目”这个主题中，我们可以深入探讨如何利用JavaScript来创建吸引人的动态效果，提升用户体验。 首先，JavaScript在网页动画中的应用主要是通过操作DOM（文档对象模型）来实现...
SVG则是矢量图形标准，支持创建可缩放的图形，特别适合用于线条清晰、色彩简单的动画。 JavaScript，作为浏览器端最常用的脚本语言，为HTML5的动画提供了动力。通过修改DOM（文档对象模型）属性，如元素的位置、...
CSS动画可以为简单的动画提供一个更轻量级的选择。 6. 动画的优化：为了确保动画的流畅性，需要进行性能优化。这包括减少DOM操作，使用Web Workers处理复杂计算，以及避免不必要的全局变量等。 在了解了HTML5和...
HTML和JavaScript是构建网页动态效果和交互的核心技术...无论是简单的过渡效果还是复杂的3D场景，HTML和JavaScript都能提供足够的工具和方法来实现。通过不断实践和学习，你可以创造出富有创意和沉浸感的网页动画作品。
在本资源包中，我们关注的是如何利用JavaScript实现简单的动画库，从而创建出令人愉快的用户界面。 JavaScript动画库的核心是通过改变元素的CSS属性，如位置、大小、颜色等，来实现视觉上的动态效果。这些变化可以...
2. **CSS3转换和过渡**：CSS3提供了transform和transition属性，允许开发者在不使用JavaScript的情况下实现简单的动画效果。这些脚本可能会结合JavaScript，提供更复杂和自定义的动画控制。 3. **事件监听**：用户...
canvas-particle-network, 使用Canvas和JavaScript的简单动画粒子网络 画布粒子网络 概述在这个实验中，我建立了一个使用画布和JavaScript构建一个简单。性能。交互和动画。 完全插入'播放，模块化( 通过Browserify...
对于“简单的动画网页”，Dreamweaver可能是用来进行HTML、CSS和JavaScript的编写和管理。HTML（超文本标记语言）是网页的基础结构，CSS（层叠样式表）则负责样式和布局，而JavaScript则是实现动态效果和用户交互的...
本教程将深入讲解如何利用JavaScript实现一个简单的“hover”效果，这种效果通常用于鼠标悬停时改变元素的外观，以增强用户交互体验。 在JavaScript中，我们通常使用事件监听来响应用户的操作，比如鼠标悬停事件`...
TweenMax是一款强大的JavaScript动画库，由GreenSock公司开发，它提供了简单易用的API来创建各种复杂的动画效果。TweenMax可以轻松地实现对象的位置、颜色、透明度等属性的平滑过渡，非常适合制作Loading动画。 ...
"简单的JavaScript特效"这个主题，主要是指利用JavaScript实现的一些基础但有趣的视觉效果。这些效果可能包括按钮的悬停效果、图片轮播、计时器、表单验证、页面元素的动画等，都是初学者经常尝试的实践项目。 在...
这个压缩包"一个简单而强大的JavaScript动画引擎.zip"包含了一个名为"Animation.js"的核心脚本文件，可能还包含了其他辅助资源或示例文件，如"Y-456"、"147杨"和"G"，这些可能是项目目录、数据文件或者其他的...
总的来说，JavaScript提供了一套丰富的工具和技术，使开发者能够创建出各种各样的网页动画，从简单的滑动效果到复杂的交互式体验。无论你是初学者还是经验丰富的开发者，学习和掌握JavaScript动画都是提升网页动态...
本文将深入探讨JavaScript在动画制作中的应用，以及如何构建一个简单的动画引擎。 JavaScript动画的原理基于浏览器的渲染机制，通过不断改变页面元素的样式属性，如位置、大小或颜色，来模拟动画效果。主要有以下几...
在本文中，我们将深入探讨如何利用JavaScript来制作动画。 首先，理解JavaScript动画的基础是关键。JavaScript通过改变HTML元素的位置、大小、颜色等属性来实现动画效果。这些变化通常是连续且快速的，给人造成一种...
`Between` 还允许你创建复杂的动画效果，通过组合多个简单的动画或者嵌套动画。这在处理复杂的交互和视觉展示时非常有用。例如，可以同时对多个属性进行动画，或者在一个动画结束后开始另一个动画。 ### 性能优化 ...
- 展示如何通过JavaScript操作DOM元素来实现简单的动画效果。 - **三角函数的应用**（第3章和第4章） - 介绍三角函数的基本概念及其在动画中的应用。 - 使用三角函数计算运动物体的位置、速度等参数。 - 展示...
【标题】"简单完整手写动画js" 涉及的知识点主要集中在JavaScript（js）编程语言上，尤其是关于创建动态效果和动画的部分。在Web开发中，JavaScript是一种不可或缺的客户端脚本语言，用于实现页面的交互性和动态功能...