//返回当前样式
function getStyle(obj,attr){ //obj对象,attr属性名
if(obj.currentStyle){ //ie等
return obj.currentStyle[attr];
}else{ //w3c
return window.getComputedStyle(obj,null)[attr];
}
}
function $(id){ return document.getElementById(id);}
//封装scrollTop,scrollLeft
function scroll(){
if(window.pageYOffset != null){
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}else if(document.compatMode == 'css1Compat'){ //声明了DTD
//判断是否声明了DTD <!DOCTYPE html>--检测是不是怪异模式的浏览器
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}else { //怪异模式下
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
}
//封装clientWidth,clientHeight
function client(){
if(window.innerHeight!=null){ //ie9+ 最新浏览器
return {
width: window.innerWidth,
height: window.innerHeight
}
}else if(document.compatMode == 'css1Compat'){ //标准浏览器
return{
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}else{ //怪异模式
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
}
//返回当前样式
function getStyle(obj,attr){ //obj对象,attr属性名
if(obj.currentStyle){ //ie等
return obj.currentStyle[attr];
}else{ //w3c
return window.getComputedStyle(obj,null)[attr];
}
}
//封装缓动运动框架 多个属性 回调函数(执行完动画,执行的函数) 支持透明度、zIndex
/*function animateSlow(obj,attrJson,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
flag = true;
for(var attr in attrJson){
var current;
if("opacity" == attr){
current = parseInt(getStyle(obj,attr)*100);
}else{
current = parseInt(getStyle(obj,attr)); //去除样式的 “px”
}
var step = (attrJson[attr] - current)/10;
step = step>0 ? Math.ceil(step) : Math.floor(step);
if("opacity" == attr){
if("opacity" in obj.style){ //支持opacity-----opacity:0.3
obj.style.opacity = (current + step)/100;
}else{ //ie6----filter:alpha(opacity=30);
obj.style.filter = "alpha(opacity="+ (current+step)+")";
}
}else if("zIndex"==attr){
obj.style.zIndex = attrJson[attr];
}
else{
obj.style[attr] = current + step + "px";
}
if(current != attrJson[attr]){ //多个条件,只要有一个不满足,就是false
flag = false;
}
}
if(flag == true){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}*/
function animateSlow(obj,json,fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for(var attr in json){ // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; //用户没有定义opacity,则返回undefined
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // 数值,去除样式的 “px”
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity
{
// obj.style.opacity,//支持opacity-----opacity:0.3
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调,就应该执行回调
{
fn(); // 函数名 + () 调用函数 执行函数 暂且这样替代
}
}
},30)
}
//匀速运动
function animateUniform(obj,target,speed){
clearInterval(obj.timer); // 先清除定时器
var _speed = obj.offsetLeft < target ? speed : -speed; //判断是正的方向走,还是倒着走
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft; //记录现位置距离目标位置差值
obj.style.left = obj.offsetLeft + _speed + "px";
if(Math.abs(result) <= speed){ //距离差值小于等于5
clearInterval(obj.timer);
obj.style.left = target +"px"; //补足最后几px的差距
}
},30);
}