JS 动画基础
获取元素的样式
getStyle函数
function getStyle(element, attr) {
if(element.currentStyle) {
//针对IE
return element.currentStyle[attr];
} else {
//针对Firefox
return getComputedStyle(element, false)[attr];
}
}
此函数返回的是一个字符串，需要调用 parseInt() 或者 parseFloat() 将返回的结果转换为数字值。
简单动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>简单动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box">
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<span>萌萌哒</span>
</div>
</body>
</html>
CSS
* {
margin:;
padding:;
}
#box {
padding: 5px;
margin: 10px;
border: 1px solid #aaa;
border-radius: 5px;
width: 240px;
box-shadow: 0 0 1px #aaa, 0 0 2px #aaa;
position: absolute;
top:;
left: -260px;
cursor: pointer;
}
#box span {
position: absolute;
display: block;
width: 20px;
background-color: black;
color: white;
margin-left: 245px;
margin-top: -125px;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, "left", 0, 1, 10);
};
box.onmouseout = function() {
animation(box, "left", -260, 1, 10);
};
}
// 简单动画，接收5个参数：动画元素、动画属性、目标值、变化速度、定时器时间
function animation(element, attr, target, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = parseInt(getStyle(element, attr));
var count = speed;
if(curValue < target) {
count = speed;
} else if(curValue > target) {
count = -speed;
} else {
count = 0;
}
if(curValue == target) {
clearInterval(element.timer);
} else {
element.style[attr] = curValue + count + "px";
console.log(curValue);
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
缓冲动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box">
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<span>萌萌哒</span>
</div>
</body>
</html>
CSS
* {
margin:;
padding:;
}
#box {
padding: 5px;
margin: 10px;
border: 1px solid #aaa;
border-radius: 5px;
width: 240px;
box-shadow: 0 0 1px #aaa, 0 0 2px #aaa;
position: absolute;
top:;
left: -260px;
}
#box span {
position: absolute;
display: block;
width: 20px;
background-color: black;
color: white;
margin-left: 245px;
margin-top: -125px;
cursor: pointer;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, "left", 0, 10, 50);
};
box.onmouseout = function() {
animation(box, "left", -260, 10, 50);
};
}
// 缓冲动画，接收5个参数：动画元素、动画属性、目标值、变化速度、定时器时间
function animation(element, attr, target, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = parseInt(getStyle(element, attr));
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
if(curValue == target) {
clearInterval(element.timer);
} else {
element.style[attr] = curValue + count + "px";
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
透明度动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS
#box {
width: 100px;
height: 100px;
background-color: blue;
border: 5px solid #333;
border-radius: 5px;
opacity: 0.5;
}
JavaScript
window.onload = function() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
changeOpacity(box, 100, 2, 10, 100);
}
box.onmouseout = function() {
changeOpacity(box, 30, 2, 10, 100);
}
}
function changeOpacity(element, target, method, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = Math.round(parseFloat(getStyle(element, "opacity")) * 100);
switch(method) {
case 1:
var count = speed;
if(curValue < target) {
count = speed;
} else if(curValue > target) {
count = -speed;
} else {
count = 0;
}
break;
case 2:
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
break;
default:
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
}
if(curValue == target) {
clearInterval(element.timer);
} else {
console.log(curValue);
element.style.opacity = (curValue + count) / 100;
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
【1】使用 getStyle 函数获取的 opacity 属性是一个浮点数，不能使用 parseInt() 对其进行转化，应该使用 parseFloat() 。
将 opacity 的值乘以 100 ，然后调用 Math.round() ，将浮点数变成整数。（永远不要比较两个浮点数是否相等，结局绝对会出人意料。）
基础动画框架
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>动画框架演示</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS
#box {
margin: 10px;
border: 5px solid #333;
border-radius: 5px;
box-shadow: 0 0 1px #333, 0 0 2px #333;
width: 100px;
height: 100px;
background-color: blue;
opacity: 0.3;
position: absolute;
left:;
top:;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, {left:300}, 2, 20, 50, function() {
animation(box, {width:200, height:200, opacity:100}, 2, 20, 50)
})
}
box.onmouseout = function() {
animation(box, {left:0}, 2, 20, 50, function() {
animation(box, {width:100, height:100, opacity:50}, 2, 20, 50)
})
}
}
// 动画函数接收 6 个参数：动画元素、json 数据、运动方式、变化速度、定时器时间、回调函数
// 其中，json 数据的格式为 {attr1: target1, attr2: target2}
// method 参数传入 1 则表示匀速运动，传入 2 则表示缓冲运动
function animation(element, json, method, speed, timing, fn) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var flag = true;
for(var attr in json) {
var curValue = 0;
if(attr == "opacity") {
curValue = Math.round(parseFloat(getStyle(element, attr)) * 100);
} else {
curValue = parseInt(getStyle(element, attr));
}
switch(method) {
case 1:
var count = speed;
if(curValue < json[attr]) {
count = speed;
} else if(curValue > json[attr]) {
count = -speed;
} else {
count = 0;
}
break;
case 2:
var count = (json[attr] - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
break;
default:
var count = (json[attr] - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
}
if(curValue != json[attr]) {
flag = false;
}
if(attr == "opacity") {
element.style.opacity = (curValue + count) / 100;
console.log(curValue);
} else {
element.style[attr] = curValue + count + "px";
}
}
if(flag) {
clearInterval(element.timer);
if(fn) {
fn();
}
}
}, timing);
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
【1】如果需要将元素恢复到动画之前的样子，动画的运动方式应该一致，否则在特殊情况下会出一些 bug 。
JS 动画基础的更多相关文章
- 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4); -从索引3开始截取,截取4 ...
- CSS 和 JS 动画哪个更快
基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...
- CSS VS JS动画，哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
- CSS3动画和JS动画的比较
前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...
- 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- JS 的基础概念
本篇文章主要讲述js的基础知识! 首先,我们要明白什么是JS,JS就是 javascript 的简称,是一种轻量级,弱类型的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能, ...
随机推荐
- 补鞋匠---Cobbler 服务器自动搭建
Cobbler 服务器自动搭建http://tshare365.com/archives/439.html
- Summary Ranges
Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...
- C语言 复杂的栈（链表栈）
//复杂的栈--链表栈 #include<stdio.h> #include<stdlib.h> #define datatype int//定义链表栈数据类型 //定义链表栈 ...
- SQL Server 阻止了对组件 'Ole Automation Procedures' 的 过程'sys.sp_OACreate' 的访问
--开启 Ole Automation Procedures sp_configure ; GO RECONFIGURE; GO sp_configure ; GO RECONFIGURE; GO E ...
- angularjs中只显示选中的radio的值
angularjs中,只显示选中的radio的值.主要是相同的radio,name属性值要相同还有ng-model的值要相同,同时要指定value值.这样选中的时候就会在下面的div中显示选中的值了. ...
- ZooKeeper学习第二期--ZooKeeper安装配置
一.Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式. ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境:■ 伪集群模式:就是在一台物 ...
- Java系列： JAVA字符串格式化-String.format()的使用（zz）
常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重 ...
- 从0开始学Java——JSP&Servlet——如何在Eclipse中配置Web容器为tomcat
windows- >Preferences -> Server->runtime Envirement ->Add 点击下一步,然后按照如下设置:
- 20145324 20145325《信息安全系统设计基础》实验五 简单嵌入式WEB服务器实验
实验五报告链接为:http://www.cnblogs.com/SJZGM10/p/6106668.html
- 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout（二）菜单导航
一.前言 上篇博客中已经总体的说了一下权限系统的思路和表结构设计,那接下来我们就要进入正文了,先从菜单导航这个功能开始. 二.实现 这个页面基本不用什么需求分析了,大家都很明白,不过在这个页面要多维护 ...