<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS动画案例</title>
<meta charset="utf-8"/>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{
margin:0;
padding:0;
}
#move{
padding:10px;
width:300px;
background:#ccc;
margin:10px auto;
border:1px solid #000;
}
#move a{
display:inline-block;
width:58px;
height:40px;
border:1px solid #ddd;
border-radius:3px;
background-color:#fff;
text-align:center;
margin:10px 17px;
position:relative;
padding-top:40px;
color:#9c9c9c;
font-size:12px;
text-decoration:none;
line-height:25px;
overflow:hidden;
}
#move a i{
position:absolute;
top:20px;
left:0;
display:inline-block;
width:100%;
text-align:center;
filter:alpha(opacity=100);
opacity:1;
}
#move a:hover{
color:#f00;
}
#move img{
border:none;
}
</style>
<script type="text/javascript" src="js/jsonmove.js"></script>
<script type="text/javascript">
window.onload = function(){
//通过改变时间值，可以改变动画的速度；
var oMove = document.getElementById('move');
var aList = oMove.getElementsByTagName('a');
for(var i=0;i<aList.length;i++){
aList[i].onmouseover = function(){
var icon = this.getElementsByTagName('i')[0];
startMove(icon,{top:-25,opacity:0},function(){
icon.style.top=30+'px';
startMove(icon,{top:20,opacity:100});
});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href=""><i><img src="images/caipiao.png" alt="" /></i><p>彩票</p></a>
<a href=""><i><img src="images/movie.png" alt="" /></i><p>电影</p></a>
<a href=""><i><img src="images/food.png" alt="" /></i><p>外卖</p></a>
<a href=""><i><img src="images/game.png" alt="" /></i><p>游戏</p></a>
<a href=""><i><img src="images/insure.png" alt="" /></i><p>保险</p></a>
<a href=""><i><img src="images/travel.png" alt="" /></i><p>旅行</p></a>
</div>
</body>
</html>
js/jsonmove.js
//从样式表中根据id和属性名取值
function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
//fn是一个函数，当完成任务时，没有马上结束，而失去执行fn函数（回调函数）
//fn表示结束一个运动后，然后执行另一个运动，
//attr，target表示JSON中的一对值
//startMove(obj,{attr1:targte1,attr2:targte2},fn)
function startMove(obj,json,fn){
var flag=true; //假设所有属性都能达到目标值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1.取当前的值
var cur = 0;
if(attr == 'opacity'){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}
//2.算速度
var speed = (json[attr] - cur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
//要判断所有目标到达终点
if(cur != json[attr]){
//如果某一属性没有达到目标值，则置假
flag = false;
}
if(attr == 'opacity'){
obj.style.filter = 'aplha(opacity:'+(cur+speed)+')';//IE
obj.style.opacity = (cur+speed)/100; //chrome或火狐
}else{
obj.style[attr] = cur+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
分享到：
相关推荐
"JS动画效果源代码（含注释）"这个资源包含了实现各种JavaScript动画效果的源码，这些代码经过了详细的注释，方便初学者理解和学习。 在JavaScript中，动画效果主要通过操作DOM（Document Object Model）元素的样式...
电影《骇客帝国》中的经典画面，特别是绿色的代码雨，常被开发者用来创作各种JavaScript动画。这些动画通常涉及大量的文本元素，如ASCII字符，以模拟电影中代码快速滚动的效果。为了实现这个效果，可以创建一个包含...
首先，JavaScript动画的核心在于改变元素的样式属性，如位置、大小或透明度，然后利用浏览器的重绘和回流机制，呈现出连续变化的效果。常见的方法包括使用`requestAnimationFrame`函数、定时器（如`setTimeout`或`...
3. **CSS3 Transitions 和 Animations**：虽然这里是讨论JavaScript动画，但有时可以结合CSS来实现更高效的动画效果。CSS3的`transition`和`animation`属性能轻松创建简单的动画，如果浏览器支持，可以考虑使用它们...
在“HTML5+JavaScript动画基础”这个主题中，我们深入探讨如何利用这两者构建引人入胜的动画效果。 首先，HTML5新增了许多元素和API，如canvas标签，它提供了一个画布，允许开发者通过JavaScript绘制图形并实现动态...
二、CSS3与JavaScript动画 CSS3提供了许多内置的动画功能，如`transition`和`animation`，但它们的灵活性和控制度相对较低。而JavaScript能提供更精确的动画控制，如自定义缓动函数、暂停/恢复动画、动态调整动画...
【标题】"three.js 动画帧切割"涉及的核心知识点主要集中在如何在three.js这个流行的JavaScript 3D库中处理和播放3D模型动画。three.js是一个强大的WebGL库，它使得在浏览器中创建和展示复杂的3D场景变得简单易行。...
一、JavaScript动画基础 1. 时间戳与定时器：在JS中，通过`Date.now()`或`performance.now()`获取当前时间戳，结合`setTimeout()`或`setInterval()`实现动画的定时执行。这两个函数用于在指定延迟后执行函数，`...
这本小册子通过制作 一个图像动画特效为主线向大家讲解JavaScript动画制作的基本技巧，分四步讲解本动画的实现：一是用Javascript制作动画－生成图象数组 、二是设置图象的位置、三是现在开始演示动画、四是用...
4. **CSS3动画与过渡**: 虽然主要讨论JavaScript动画，但CSS3也提供了强大的动画和过渡功能，比如`transition`和`animation`属性，可以方便地实现元素的平滑变化。这些可以与JavaScript动画结合，增强用户体验。 5....
【实用的JS动画】是关于JavaScript实现动态效果的技术分享，主要...通过阅读和理解`cartoon_js.html`的源码，开发者可以深入学习到JavaScript动画的实现技巧，并将其应用于自己的项目中，提升网页的互动性和趣味性。
JavaScript动画的核心在于改变元素在页面上的位置、大小、颜色等属性，并且在短时间内重复这一过程，给人眼造成连续运动的错觉。以下是一些关键知识点： 1. **时间戳与定时器**：JavaScript中最常见的动画机制是...
JavaScript（简称JS）...总结起来，"js动画弹出动画"涉及了JavaScript事件处理、CSS动画和响应式设计等核心概念。通过结合使用这些技术，开发者可以创建出既美观又实用的弹出动画模态框，提升用户在网站上的互动体验。
JavaScript动画通常使用定时器（如`setInterval`或`setTimeout`）来实现帧动画，通过改变元素的位置、大小、颜色等属性，创建出连续的效果。在这个表白动画中，可能包括了心跳、闪烁的文字、爱心飞舞等元素，这些都...
**3D签到墙ThreeJS动画详解** Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建3D图形。这个“3D签到墙”项目利用Three.js的强大功能，为活动、年会等场合提供一种新颖且互动的签到体验。通过WebGL，它...
4. **CSS3动画**：虽然主要讨论JavaScript动画，但CSS3的`@keyframes`规则也提供了一种声明式创建动画的方法，可以与JavaScript结合使用。 5. **事件处理**：通过监听用户交互，如`click`、`mousemove`等，来触发或...
在"HTML5 JavaScript动画基础"这本书中，作者兰贝塔（Billy Lamberta）和彼得（Keith Peters）深入浅出地讲解了如何利用这两门技术构建引人入胜的网页动画。 HTML5是超文本标记语言的最新版本，它引入了许多新的...
原生JavaScript动画框架是开发网页动态效果的一种高效方式，它避免了依赖于第三方库如jQuery，使得代码更轻量级，加载更快。本框架重点在于实现图片旋转功能，且具有良好的浏览器兼容性，覆盖了从老旧的IE到现代的...
- JavaScript动画：利用JavaScript的`requestAnimationFrame`或定时器（如`setInterval`、`setTimeout`）来逐帧改变元素属性，创建自定义动画。 - 事件驱动：结合用户交互，如点击、滚动等，触发动画效果。 2. **...
"anime.js"是一个知名的开源JavaScript动画引擎，它在开发者社区中广受欢迎，因其强大的功能和易于使用的API而备受赞誉。 anime.js提供了丰富的动画控制选项，包括但不限于平移、缩放、旋转、颜色变化等，涵盖了2D...