js实现动画效果框架
RT,是参照慕课的教程做的。两个多小时的教程，看完了然后晚上的时候做了下，看的时候感觉明白了，但其实做的时候还是有很多小细节需要处理的。
上代码，思想什么的直接去慕课看教程就好了。点击这里
注释也比较清楚，应该能看得懂
-------16年12.5更新-------
想做全屏滚动，发现这个框架不支持，于是做了点小改动，支持document.body的scrollTop属性还有其他部分宽高属可自行测试，顺带修复了一部分小bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title> <style>
#aaa{
position:absolute;
left:-50px;
width: 100px;
height: 100px;
background-color: blue;
border:1px solid red;
}
#ddd{
position:absolute;
top:120px;
left:-50px;
width: 100px;
height: 100px;
background-color: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id = "aaa">123</div>
</body>
<script type="text/javascript" src="./js/animate.js"></script>
<script type="text/javascript">
window.onload=function(){
var aaa = document.getElementById('aaa');
var ddd = document.getElementById('ddd'); aaa.onmouseover=function(){
showAnimate(this,{'width':200,'height':200});
}
aaa.onmouseout=function(){
showAnimate(this,{'width':100,'height':100});
}
}
</script>
</html>
HTML demo
/**
*函数作用：执行动画
*接受参数：obj（需要运动的DOM元素）
* json（需要改变的属性集合，json格式）
* fn（回调函数）
*/
function showAnimate(obj,json,fn){
clearInterval(obj.timer);
//表示运动是否都已经停止
var flag = true;
obj.timer=setInterval(function(){
//循环json
for(var i in json){
if(i == 'opacity'){
//获取透明度值，round四舍五入去除小数点
var icur = Math.round(parseFloat(getStyle(obj,i))*100);
}
else{
//获取属性值
var icur = parseInt(getStyle(obj,i))||obj[i];
}
//缓冲运动，speed随时变换
var speed = (json[i]-icur)/10;//千万要写在定时器里面，写在外面会有意想不到的后果
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);//速度向上或者下取整，防止到不了over位置
//如果有一个没到达终点就是false
if(json[i] !== icur){
flag = false;
}else{
flag = true;
}
if(i == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';//IE兼容
obj.style.opacity = (icur+speed)/100;
}else if(i == 'scrollTop'){
obj[i] = icur+speed; }
else{
obj.style[i] = icur+speed+'px';
}
console.log(icur + ' ' + json[i]);
}
//检查是否所有的运动都已经停止
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},13);
}
/**
*函数作用：返回样式属性值
*接受参数：obj（需要获取属性的DOM元素）
* attr（需要获取的属性名称）
*/
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];//IE兼容
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
</script>
看完以后再做的时候还是碰到了不少小问题。
1.将speed移到setInterval外面时出现了一个莫名其妙的小bug，比如定时器设置的是1000毫秒，然后给两个DIV，各自设置鼠标移入移出事件，当我移入第一个DIV并且移出以后，只要在1000毫秒内，也就是移出定时器还没出发的时候迅速移动到另一个DIV上，第一个DIV就会一直执行移入事件（或者说是在第一个DIV上执行第二个DIV的事件），各位可以去试试，求大神解答。
2.getComputedStyle，看教程是可以写成getComputedStyle(obj,false).attr这种形式的，但是在实践中发现虽然没报错，但是返回是个空的。所以还是写成了getComputedStyle(obj,false)[attr];
只有这两个教程里面没讲，其他的speed取整问题， opacity特殊处理，小数点处理问题都在视频里有讲过
js实现动画效果框架的更多相关文章
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- JavaScript之JS实现动画效果
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...
- JS/JQ动画效果
1.弹出框 <style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: ...
- 原生js动画效果（源码解析）
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
- Fiori里花瓣的动画效果实现原理
Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成.另一种是下图的3/4个圆环不断旋转的效果. 关于前者的效果,可以看我制作的这个视频.这个视频是手动 ...
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
- paip.关于动画效果的原则 html js 框架总结
paip.关于动画效果的原则 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对 ...
- JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
随机推荐
- SQL 存储过程 传入数组参数
今天在做统计数据的时候,传入数组导致数据不显示.解决方式和大家分享一下: --参数@CompanyName='北京,天津,上海' DECLARE @PointerPrev int DECLAR ...
- WPF计算
设计思路: 用WPF窗体设计,在第一个数和第二个数的文本框中输入数值,单击录题按钮,数值保存在n1,n2文档中,把要做的题都保存完后,单击开始按钮,开始做题,每做完一道题,按Enter键,进入下一题, ...
- dom初识
1什么是dom document object model文档对象模型 是将整个页面文档封装成了一个对象,就是一个文档对象 整个页面就是一个文档,是由很多的节点组成的节点又包括三部分: 元素 属性 文 ...
- iOS在线更新framework,使用NSBundle动态读取
官方文档:https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/LoadingCode/Tasks/Loadin ...
- 2013年度IT博客大赛跻身10强
2013年12月26日,由51CTO独家举办的2013年度IT博客大赛圆满落幕,荣幸跻身10强[http://fellow.51cto.com/art/201312/425528.htm],首先感谢各 ...
- 开源消息队列：NetMQ
NetMQ 是 ZeroMQ的C#移植版本. ZeroMQ是一个轻量级的消息内核,它是对标准socket接口的扩展.它提供了一种异步消息队列,多消息模式,消息过滤(订阅),对多种传输协议的无缝访问. ...
- Java多线程7：死锁
前言 死锁单独写一篇文章是因为这是一个很严重的.必须要引起重视的问题.这不是夸大死锁的风险,尽管锁被持有的时间通常很短,但是作为商业产品的应用程序每天可能要执行数十亿次获取锁->释放锁的操作,只 ...
- 利用gulp搭建本地服务器，并能模拟ajax
工作中可能会用到的小工具,在此记录一下.可以实现的功能有: 本地http服务器 页面实时刷新 可以模拟ajax请求 第一步,新建package.json文件.用到了gulp.gulp-webserve ...
- 深入浅出Alljoyn——实例分析之远程调用（Method)篇
深入浅出就是很深入的学习了很久,还是只学了毛皮,呵呵! 服务端完整代码: #include <qcc/platform.h> #include <assert.h> #incl ...
- [大数据之Spark]——Transformations转换入门经典实例
Spark相比于Mapreduce的一大优势就是提供了很多的方法,可以直接使用:另一个优势就是执行速度快,这要得益于DAG的调度,想要理解这个调度规则,还要理解函数之间的依赖关系. 本篇就着重描述下S ...