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 ...
随机推荐
- C++ 回调函数的定义与用法
一回调函数 我们经常在C++设计时通过使用回调函数可以使有些应用(如定时器事件回调处理.用回调函数记录某操作进度等)变得非常方便和符合逻辑,那么它的内在机制如何呢,怎么定义呢?它和其它函数(比如钩子函 ...
- 对session的理解
java Servlet API引入session 机制来跟踪客户的状态,session指的是在一段时间内,单个客户和web服务器之间一连串的交互过程,在一个session中,一个客户可能会多次请求同 ...
- 自定义cell右侧 多按钮
#import "ViewController.h" @interface ViewController () <UITableViewDataSource, UITable ...
- ABP理论学习之开篇介绍
返回总目录 为了和2016年春节赛跑,完成该系列博客,我牺牲了今天中午的时间来完成该系列的第一篇----开篇介绍.开篇介绍嘛,读过大学教材的同学都知道,这玩意总是那么无聊,跟考试没关系,干脆直接跳过, ...
- iOS7的启动画面设置及asset catalogs简介
如果上网搜索一下“iOS App图标设置”或者“iOS App启动画面设置”肯定能找到不少文章,但内容大多雷同,就是让你按照某种尺寸制作若干张png图片,再按照苹果的命名规范,加入到项目中去,一行代码 ...
- 浅谈算法和数据结构: 十 平衡查找树之B树
前面讲解了平衡查找树中的2-3树以及其实现红黑树.2-3树种,一个节点最多有2个key,而红黑树则使用染色的方式来标识这两个key. 维基百科对B树的定义为“在计算机科学中,B树(B-tree)是一种 ...
- React源码剖析系列 － 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- 将word文档A表格中的内容拷贝到word文档B表格中
Function IsFileExists(ByVal strFileName As String) As Boolean ) <> Empty Then IsFileExists = T ...
- 几个毫无节操纯属恶搞的JavaScript插件
fartscroll.js,为放屁而生 你知道么,有了这个js库,你的页面就可以——————————放屁勒! 打开下面的演示地址,然后滚动页面. 在线演示:http://theonion.github ...
- JavaScript面试时候的坑洼沟洄——表达式与运算符
上篇博客JavaScript面试时候的坑洼沟洄--数据类型总结了一下JavaScript数据类型几转换的相关知识,很多朋友可能和我一样,买了书后对数据类型啊.运算符啊.语句啊都是扫两眼或直接略过的,自 ...