JavaScript,封装库--运动动画和透明度动画

/** yi_dong_tou_ming()方法,说明
* * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作
* 1,x将元素横向左移动或者右移动
* 2, y将元素竖向上移动或者下移动
* 3,w将元素动画增加或者减少宽度
* 4,h将元素动画增加或者减少高度
* 5,o将元素动画增加或者减少透明度
* *************************************
* x将元素横向左移动或者右移动,首先将目标设置定位,position:absolute;
* o将元素动画增加或者减少透明度,结合css里元素原始透明度filter: alpha(opacity=0);opacity: 0;
* *************************************
* yi_dong_tou_ming()方法,参数说明
* 参数是一个对象如下
* yi_dong_tou_ming({
'attr':'x', 【为动画方式】, x.为横向移动,y.为竖向移动,w.为增加宽度动画,h.为增加高度动画,o.为透明度动画,【必填】
'type':'1', 【动画模式】, 0.匀速模式,1.缓冲模式【可选,默认缓冲】
'speed':6, 【缓冲速度】, 动画模式为缓冲时设置,【可选,默认为6】,以此值改变跨度.每一次动画动态增加或者减少,实现缓冲效果
'start':50, 【动画起始位置】, 起始的像素或者透明度【可选,默认为对象原始位置】
'target':100, 【目标量】, 就是在原始的像素或者透明度上,增加或者减少到目标量的像素或者透明度【可先,注意目标量不填,增量必填】
'alter':50, 【增量】, 就是在对象原始的像素或者透明度上,增加或者减少像素或者透明度【可先,注意增量不填,目标量必填】
'step':7, 【跨度】, 每一次动画增加或者减少的,像素或者透明度,【可选,默认20】
't':50 【每次动画时间】, 也就是多少毫秒执行一次动画【可选,默认10】
});
**/
feng_zhuang_ku.prototype.yi_dong_tou_ming = function (obj) {
for (var i = 0; i < this.jie_dian.length; i++) {
var element = this.jie_dian[i];
// attr,为动画方式,
// x.为横向移动
// y.为竖向移动
// w.为增加宽度动画
// h.为增加高度动画
// o.为透明度动画
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
obj['attr'] == 'o' ? 'opacity' : 'left'; // start.为动画起始位置,
// 如果输入了动画起始位置,值就为输入的起始位置,移动动画是像素值(如100),透明度动画是透明度百分比(如50)
// 如果没输入,默认移动动画获取的对象原始像素位置,透明度动画获取的对象原始透明度,除以100等于原始透明度百分比
var start = obj['start'] != undefined ? obj['start'] :
attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 :
parseInt(getStyle(element, attr)); // t.为每次动画时间,也就是多少毫秒执行一次动画
// 不传默认,是10毫秒执行一次动画
var t = obj['t'] != undefined ? obj['t'] : 10; // step.为跨度,每一次动画增加或者减少的,像素或者透明度
var step = obj['step'] != undefined ? obj['step'] : 20; // alter.为增量,就是在对象原始的像素或者透明度上,增加或者减少像素或者透明度
var alter = obj['alter']; // target.为目标量,就是在原始的像素或者透明度上,增加或者减少到目标量的像素或者透明度
// 注意,增量,是在原始上增加或者减少多少,目标量是在原始的基础上增加或者减少到目标
var target = obj['target']; // speed.为缓冲速度,动画模式为缓冲时,以此值改变step.每一次动画动态增加或者减少,实现缓冲效果
// 不传,默认为6
var speed = obj['speed'] != undefined ? obj['speed'] : 6; // type.为动画模式,匀速为匀速模式,缓冲为缓冲模式
// 不传,默认为缓冲模式
var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';
if (alter != undefined && target == undefined) {
target = alter + start;
} else if (alter == undefined && target == undefined) {
throw new Error('alter增量或target目标量必须传一个!');
}
if (start > target) step = -step;
if (attr == 'opacity') {
element.style.opacity = parseInt(start) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(start) + ')';
} else {
element.style[attr] = start + 'px';
}
clearInterval(window.timer);
timer = setInterval(function () {
if (type == 'buffer') {
step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
(target - parseInt(getStyle(element, attr))) / speed;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
}
if (attr == 'opacity') {
if (step == 0) {
setOpacity();
} else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
setOpacity();
} else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
setOpacity();
} else {
var temp = parseFloat(getStyle(element, attr)) * 100;
element.style.opacity = parseInt(temp + step) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')'
}
} else {
if (step == 0) {
setTarget();
} else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
setTarget();
} else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
setTarget();
} else {
element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
}
}
//document.getElementById('aaa').innerHTML += step + '<br />';
}, t);
function setTarget() {
element.style[attr] = target + 'px';
clearInterval(timer);
}
function setOpacity() {
element.style.opacity = parseInt(target) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
clearInterval(timer);
}
}
return this;
};

第一百四十二节,JavaScript,封装库--运动动画和透明度动画的更多相关文章

  1. 【JavaScript 封装库】BETA 4.0 测试版发布!

    /* 源码作者: 石不易(Louis Shi) 联系方式: http://www.shibuyi.net =============================================== ...

  2. 【JavaScript 封装库】BETA 3.0 测试版发布!

    /* 源码作者: 石不易(Louis Shi) 联系方式: http://www.shibuyi.net =============================================== ...

  3. 【JavaScript 封装库】BETA 2.0 测试版发布!

    /* 源码作者: 石不易(Louis Shi) 联系方式: http://www.shibuyi.net =============================================== ...

  4. 【JavaScript 封装库】BETA 1.0 测试版发布!

    /* 源码作者: 石不易(Louis Shi) 联系方式: http://www.shibuyi.net =============================================== ...

  5. 【JavaScript 封装库】Prototype 原型版发布!

    /* 源码作者: 石不易(Louis Shi) 联系方式: http://www.shibuyi.net =============================================== ...

  6. js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...

  7. 第一百五十二节,封装库--JavaScript,表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  8. 【JavaScript 封装库】BETA 5.0 测试版发布!

    JavaScript 前端框架(封装库) BETA 5.0 已于10月10日正式发布,今天开始提供 BETA 5.0 的 API 参考文献.相较于之前 5 个版本的发布都是草草的提供源代码,并没有很多 ...

  9. js动画实现透明度动画

    在本次实例中,由于一般主流的浏览器对于透明度opacity最大值为1,但是在IE6最大值是100,此次例子是按主流浏览器的透明度来算的,所以定义的是小数,也可以定义为整数为单位,在运算的时候遇到主流的 ...

随机推荐

  1. 超棒的JS移动设备滑动内容幻灯实现 - Swiper

    来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库.因此体积非常小,适合运行在移动设 ...

  2. java开发中的一些概念名词

    1. JavaBeans JavaBean是符合某种规范的Java组件,也就是Java类.它必须满足如下规范: 1)必须有一个零参数的默认构造函数 2)必须有get和set方法,类的字段必须通过get ...

  3. url 传值

    js获取url参数值: index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取h ...

  4. Android 开发之使用Eclipse Debug调试详解(转)

    转自 http://blog.csdn.net/xys289187120/article/details/6636331 1.在程序中添加一个断点 如果所示:在Eclipse中添加了一个程序断点 在E ...

  5. background-position 之剑走偏锋

    转自:http://www.cnblogs.com/yizuierguo/archive/2009/03/10/1407860.html 在设置background-image属性时,经常会遇到一个b ...

  6. C++ 代码风格准则:POD

    作者:一根筋的傻瓜链接:https://www.zhihu.com/question/36379130/answer/69853366来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  7. 【BIEE】存储安装信息的目录

    在BIEE中存在一个目录,用于存储BIEE的安装信息,这个文件的目录为 ~/Oracle_BI1/install/setupinfo.txt 我的目录为:E:/BIEE/Oracle_BI1/inst ...

  8. centOS7 安装redis-3.2.6

    0.下载tar.gz包并解压到某个位置,然后cd进入解压后的目录(redis-3.2.6)下 1.安装 make MALLOC=libc 关于为什么这样做,参考redis-3.2.6目录下的READM ...

  9. 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片

    业务需求: 3个图片轮番播放,可以左右滑动,点击指示点可以切换图片  index.wxml: 这里使用小程序提供的<swiper>组件autoplay:自动播放interval:自动切换时 ...

  10. Unable to locate package错误

    W: GPG error: http://nginx.org precise Release: The following signatures couldn't be verified becaus ...