原生js仿jquery animate动画效果
jquery animate动画效果：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
*{margin:0;padding:0;}
.box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}
</style>
<script>
//获取对象样式规则信息，IE下使用currentStyle
function getStyle(obj,style){
return obj.currentStyle?obj.currentStyle[style]:getComputedStyle(obj,false)[style];
}
//原生js动画类似jquery--animate
function animate(obj,styleJson,callback){
clearInterval(obj.timer);
// 开启定时器
obj.timer=setInterval(function(){
var flag=true;//假设所有动作都已完成成立。
for(var styleName in styleJson){
//1.取当前属性值
var iMov=0;
// 透明度是小数，所以得单独处理
iMov=styleName=='opacity'?Math.round(parseFloat(getStyle(obj,styleName))*100):parseInt(getStyle(obj,styleName));
//2.计算速度
var speed=0;
speed=(styleJson[styleName]-iMov)/8;//缓冲处理，这边也可以是固定值
speed=speed>0?Math.ceil(speed):Math.floor(speed);//区分透明度及小数点，向上取整，向下取整
//3.判断是否到达预定值
if(styleJson[styleName]!=iMov){
flag=false;
if(styleName=='opacity'){//判断结果是否为透明度
obj.style[styleName]=(iMov+speed)/100;
obj.style.filter='alpha(opacity:'+(iMov+speed)+')';
}else{
obj.style[styleName]=iMov+speed+'px';
}
}
}
if(flag){//到达设定值，停止定时器，执行回调
clearInterval(obj.timer);
if(callback){callback();}
}
},30)
}
window.onload=function(){
document.getElementById('box').onclick=function(){
var oThis=this;
animate(oThis,{'width':'500'},function(){
animate(oThis,{'height':'400'},function(){alert('宽度高度都增加了')});
});
}
}
</script>
</head>
<body>
<div class="box" id="box">点击效果：宽度增加->高度增加->弹出框</div>
</body>
</html>
注意点
1.动画前要先停止原来的定时器，不然绑定多个对象的话会冲突
2.定时器的id要区分开，不能重叠，这里我直接那绑定对象的 对象来赋值 obj.timer
3.要判断所要执行的动画，是否全部到了设定值=> flag，全部执行完再停止定时器再执行回调函数
4.javascript的数据类型转换问题
alert(0.07*100);
//弹出7.000000000000001
注意：Javascript在存储时并不区分number和float类型，而是统一按float存储。而javascript使用IEEE 754-2008 标准定义的64bit浮点格式存储number，按照IEEE 754的定义：
decimal64对应的整形部分长度为 10,小数部分长度为16，所以默认的计算结果为“7.0000000000000001”，如最后一个小数为0，则取1作为有效数字标志。
5.传入的json数据不能带px，例如｛'width':'300px'｝，为了兼容透明度的数值，没想到好的处理方式，有没有大神指导下...
6.该定时器做了缓冲处理，变化越来越慢，想要快速的效果或者匀速的效果，只需要在2.计算速度那块做下处理就可以
7.不兼容css3的属性,只兼容了（width,height,top,left,right,bottom,opacity）
8.获取对象样式的信息，要判断IE或者火狐浏览器，区别对待
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍原生js仿浏览器滚动条效果，包括了原生js仿浏览器滚动条效果的使用技巧和注意事项，需要的朋友参考一下 效果图： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍原生js实现jquery函数animate()动画效果的简单实例，包括了原生js实现jquery函数animate()动画效果的简单实例的使用技巧和注意事项，需要的朋友参考一下 通过在公司一个月的实习，慢慢的对css跟html算是比较熟悉了，这几天开始研究js，今天用js写了一个jquery的animate函数，测试了下，性能还可以。个人觉得jquery并不是万能的，因为是个框架，所
-
本文向大家介绍原生JS实现匀速图片轮播动画，包括了原生JS实现匀速图片轮播动画的使用技巧和注意事项，需要的朋友参考一下 JS实现轮播图实现结果图： 需求： 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片，定时轮播图片；鼠标在图片上时暂停 4 左右两侧可点击轮播图片 一、布局部分 html部分 css部分 JS部分 1这是匀速动画函数的封装 轮播图封装函数： 精
-
本文向大家介绍原生JS实现首页进度加载动画，包括了原生JS实现首页进度加载动画的使用技巧和注意事项，需要的朋友参考一下 js进度加载动画程序是本人的个人作品，写的不好，可以参考，但未经本人允许，请不要用于其它用途！ 早上写了个首页进度加载动画，本想在我的博客里用上，测试发现博客园加载太快，根本看不到动画效果，直接就加载‘Complete'了，算了，还是不要把博客搞得太臃肿了！ 于是我就写了个演
-
本文向大家介绍原生js实现弹幕效果，包括了原生js实现弹幕效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现弹幕效果的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍原生JS实现拖拽效果，包括了原生JS实现拖拽效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现拖拽效果的具体代码，供大家参考，具体内容如下 想要让整个元素移动需要三个事件： 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html JS CSS部分 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多