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 ...
随机推荐
- java实现全排列
前天上午的面试遇到了一个用java实现一串数字的全排列的题,想来想去用递归最方便,可是没有在规定的时间内完成555,今天上午有空便继续写,以下是完成后的代码: import java.util.Arr ...
- Js中变量的作用域
一.理解函数作用域需要理解以下几点: 1.函数变量的作用域有全局变量和局部变量两种,全局变量写在函数的最前面,局部变量写在函数体内,局部变量省略了var 也就默认成为了全局变量! 2.函数 ...
- 【实战Java高并发程序设计6】挑战无锁算法：无锁的Vector实现
[实战Java高并发程序设计 1]Java中的指针:Unsafe类 [实战Java高并发程序设计 2]无锁的对象引用:AtomicReference [实战Java高并发程序设计 3]带有时间戳的对象 ...
- 将asp.net core站点发布到IIS上遇到的问题
今天第一次将整个 asp.net core 站点发布到 IIS 上,以前都是发布到 Linux 服务器上. 开始使用 dotnet publish -c release 命令发布,用浏览器访问站点时出 ...
- C#中使用Socket请求Web服务器过程
最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有“连接建立”的发生. 而有人或许会问: ...
- HappyAA服务器部署笔记1(nginx+tomcat的安装与配置)
这是本人的服务器部署笔记.文章名称叫"部署笔记1"的原因是之后我对这个进行了改进之后,会有"部署笔记2","部署笔记3"...循序渐进,估计 ...
- %~dp0是什么意思
转载自 www.cnblogs.com/yxsylyh 转载内容如下: cd /D %~dp0的意思如下: 更改当前目录为批处理本身的目录 比如你有个批处理a.bat在D:\qq文件夹下 a.bat内 ...
- 抛开flash，自己开发实现C++ RTMP直播流播放器
抛开flash,自己开发实现C++ RTMP直播流播放器 众所周知,RTMP是以flash为客户端播放器的直播协议,主要应用在B/S形式的场景中.本人研究并用C++开发实现了RTMP直播流协议的播放器 ...
- 【玩转单片机系列002】 如何使用STM32提供的DSP库进行FFT
前些日子,因为需要在STM32F103系列处理器上,对采集的音频信号进行FFT,所以花了一些时间来研究如何高效并精确的在STM32F103系列处理器上实现FFT.在网上找了很多这方面的资料做实验并进行 ...
- Node.js教程系列~目录
Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...