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应用开发,常用来为网页添加各式各样的动态功能, ...
随机推荐
- GIS开源软件大全
3 - F 3map:行星地球项目由3map驱动,这是一个自由软件,由Telstra宽带基金会创建并支持,提供客户端与服务器的能力以在线再现虚拟地球. Amein!:其界面介于ArcMap和UMN M ...
- php基础08：改变数据类型
<?php //1.获取数据类型 $num = 55; echo gettype($num); //integer //2.设置数据类型 settype($num, "string&q ...
- 【兄弟连】2016高洛峰新版PHP培训视频教程
[兄弟连]2016高洛峰新版PHP培训视频教程 视频部分目录: 下载地址:http ...
- Linux及安全——Linux基础实践
Linux及安全——Linux基础实践 一.实践一:掌握软件源的维护方法,配置系统使用教育网内的软件源镜像.掌握通过软件源来查找,安装,卸载,更新软件的方法. 1.软件源的维护方法 Ubuntu的软件 ...
- Linux 第一次学习笔记
一.Linux 为何物 Linux 就是一个操作系统,就像你多少已经了解的 Windows(xp,7,8)和 Max OS ,至于操作系统是什么,就不用过多解释了,如果你学习过前面的入门课程,应该会有 ...
- 浪潮之巅——IT那点事之二—蓝色巨人IBM
蓝色巨人IBM的全称是国际商用机器公司(International Business Machines Corporation),纵观IBM的发展历史,可以看出IBM与机器结缘,以商用为主的发展策略. ...
- Jetty嵌入式Web容器攻略
Jetty是一个用 Java 实现.开源.基于标准的,并且具有丰富功能的 Http 服务器和 Web 容器.Jetty中应用最广泛的一项功能就是可以作为嵌入式Web容器. 在开发阶段,可以使用Jett ...
- 『随笔』Socket 链接 必须 上下行 同时使用
结论: > Socket 理论上 支持 只上行,或者 只下行. > 心跳包 必须是 上下行的 —— 心跳包请求(上行) - 心跳包响应(下行). > 如果 长时间 只有单向链接(只发 ...
- 导出EXCEL【Web方式HTML通过拼接html中table】
DataTable dt= GetTaskList(int.MaxValue); StringBuilder table = new StringBuilder(); table.Append(&qu ...
- jdbc基础 (五) 连接池与数据源 DBCP以及C3P0的使用
一.连接池的概念和使用 在实际应用开发中,特别是在WEB应用系统中,如果JSP.Servlet或EJB使用JDBC直接访问数据库中的数据,每一次数据访问请求都必须经历建立数据库连接.打开数据库.存取数 ...