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 ...
随机推荐
- oracle--导出、导入blob类型的字段
blob是oracle中的一个数据类型,保存的是压缩后的二进制形式的大数据. 数据迁移如果涉及到blob字段,都不好处理,因为无法用常规方法进行操作,如:使用select查看该字段,也无法用inser ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
- 多文档上传(upload multiple documents)功能不能使用怎么办？
问题描述: 在SharePoint 2010的文档库里选择documents标签,然后选择upload document下拉菜单,你会发现upload multiple documents那个按钮是灰 ...
- GDB十分钟教程
原文链接: http://blog.csdn.net/liigo/archive/2006/01/17/582231.aspx 本文写给主要工作在Windows操作系统下而又需要开发一些跨平台软件的程 ...
- 眼见为实：.NET类库中的DateTimeOffset用途何在
在 EnyimMemcachedCore(支持.NET Core的memached客户端)中实现 Microsoft.Extensions.Caching.Distributed.IDistribut ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- （翻译）《Hands-on Node.js》—— Why?
事出有因 为何选择event loop? Event Loop是一种推进无阻塞I/O(网络.文件或跨进程通讯)的软件模式.传统的阻塞编程也是用一样的方式,通过function来调用I/O.但进程会在该 ...
- EasyPR--开发详解（2）车牌定位
这篇文章是一个系列中的第三篇.前两篇的地址贴下:介绍.详解1.我撰写这系列文章的目的是:1.普及车牌识别中相关的技术与知识点:2.帮助开发者了解EasyPR的实现细节:3.增进沟通. EasyPR的项 ...
- C#+OpenGL+FreeType显示3D文字(3) - 用PointSprite绘制文字
C#+OpenGL+FreeType显示3D文字(3) - 用PointSprite绘制文字 上一篇实现了把文字绘制到OpenGL窗口,但实质上只是把含有文字的贴图贴到矩形模型上.本篇我们介绍用Poi ...
- Step by step 活动目录中添加一个子域
原创地址:http://www.cnblogs.com/jfzhu/p/4006545.html 转载请注明出处 前面介绍过如何创建一个域,下面再介绍一下如何在该父域中添加一个子域. 活动目录中的森林 ...