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 ...
随机推荐
- mongodb分片配置
通过YUM库自动安装Mongodb 手动安装配置mongodb 验证mongodb主从复制过程 验证mongodb副本集并实现自动切换 实验mongodb使用gridfs存放一个大文件 1.创建数据目 ...
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- 【转】成为Java顶尖程序员 ，看这10本书就够了
“学习的最好途径就是看书“,这是我自己学习并且小有了一定的积累之后的第一体会.个人认为看书有两点好处: 1.能出版出来的书一定是经过反复的思考.雕琢和审核的,因此从专业性的角度来说,一本好书的价值远超 ...
- Ubuntu添加开机自动启动程序方法
1. 开机启动时自动运行程序 Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init.init根据配置 文件继续引导过程,启动其它进程.通常情况下,修改放置在 / ...
- ABP理论学习之日志记录
返回总目录 本篇目录 服务端 获取Logger 基类中的Logger 配置 客户端 服务端 ABP使用的是Castle Windsor的日志记录设备.它可以和不同的日志类库一起工作,比如Log4Net ...
- SQL Server 查询分解
标签:SQL SERVER/MSSQL SERVER/数据库/DBA/查询步骤 概述 查询步骤是很基础也挺重要的一部分,但是我还是在周围发现有些人虽然会语法,但是对于其中的步骤不是很清楚,这里就来分解 ...
- WebDriver API元素的定位
一.以下截图为用FireBug定位的用火狐(Firefox)浏览器打开的百度首页,下面所讲述的八种定位方法,就是以该截图中的百度输入框为例子. ①.FireBug是Firefox浏览器下的开发类插件, ...
- Java Thread 的 run() 与 start() 的区别
Java Thread 的使用 Java Thread 的 run() 与 start() 的区别 Java Thread 的 sleep() 和 wait() 的区别 1. ...
- Sublime Text执行js
Sublime Text执行js 在Build Sytem添加以下内容: { "cmd": ["node", "$file"], " ...
- 【夔堂】：程序血泪史之——有一种垃圾语言叫做JavaScript
"Prototype"机制是个半成品OOP,有些文章说这玩意当初为了"简单(编写).容易(学习)"而发明的,但web前端技术发展到今天我们看到,JS显然是需要O ...