基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享


Posted in Javascript onJune 24, 2013

前言:前段时间一直都好忙也就好久没有写些东西了,最近手上的事刚好告些段落了,把以前空写的写插件都拿出来分享下吧,希望对大家有些帮助,也希望有高手能帮忙指点下我的写不足和错误,一直以来自己写的东西都是在用,性能方面个人只能尽量靠近问题还很多……真心求指点;
插件简介:执行渐隐等动画效果,可以这个插件为一个附加插件 可以配合前面我发的一个弹出层 等等之类的东西用增加js展示的趣味性,
使用方法:在下面的js代码里面前面写了,大家可以看看直接复制粘贴就可以用了有问题可以联系我</p
JS代码如下 展示方式可以复制下面的HTML查看
[javascript]

/*
 createByTommy_20110525
 emial:@csslife@163.com
 用途:
 执行渐隐等动画效果
 传入参数说明:
 1、第一个参数为需要变换对象或ID;
 2、第二个参数为一个对象包含:
 1)、sty->变换对象需要改变的属性,默认为改变宽度(也可以传非style的属性比如scrollTop等)
 2)、curClass->变换对象完成改变后需要添加的当前类,默认为空
 3)、maxVal->改变属于的最大值,默认为0(如果curClass为宽高等style属性表示隐藏),当这个要改变的属性值达到时停止动画
 4)、effect->执行的动画效果默认为outQuad,如需弹跳效果将其值设置为2
 3、最后个参数为可选参数表示当动画执行完毕后运行的回调函数
 */ //animation 
var ani = function(){this.init.apply(this,arguments)} 
ani.prototype = { 
    _id:function(i){ 
        if(!i) return; 
        return typeof i != "string" && i.nodeType === 1 ? i : document.getElementById(i); 
    }, 
    init:function(e,s,callback){ 
        this.e = this._id(e); 
        this.setInit(s||{}); 
        var maxS = parseInt(this.s.maxVal),speed = maxS==0?Math.max(this.getSty(this.e,this.s.sty),1):maxS/5; 
        this.fun(speed,maxS,callback) 
    }, 
    formula:function(x){ 
        var f; 
        switch(this.s.effect){ 
            case 0: 
                f = "outQuad"; 
                break; 
            case 1: 
                f = "inQuad"; 
                break; 
            case 2: 
                f = "bounce"; 
                break; 
            default: 
                f = "easeInBack"; 
        } 
        this.tween ={ 
            outQuad:function(pos){return Math.pow(pos, 2)},//outQuad 
            inQuad:function(pos){return -(Math.pow((pos-1),2)-1)},//inQuad 
            bounce:function(pos){//bounce 
                if (pos < (1 / 2.75)) { 
                    return (7.5625 * pos * pos); 
                } else if (pos < (2 / 2.75)) { 
                    return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75); 
                } else if (pos < (2.5 / 2.75)) { 
                    return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375); 
                } else { 
                    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375); 
                } 
            }, 
            easeInBack:function(pos){var s = 1.70158;return (pos) * pos * ((s + 1) * pos - s);} 
        }; 
        return this.tween[f](x); 
    }, 
    findAry:function(attr){ 
        var rg = ["width","height","top","bottom","left","right","margin","padding"]; 
        for(var z in rg){ 
            if(rg[z]==attr) return true; 
        } 
        return false; 
    }, 
    setInit:function(s){ 
        this.s = { 
            sty:"width", 
            curClass:"", 
            maxVal:0,//效果最大值 
            effect:1//执行效果 
        } 
        for(i in s) this.s[i] = s[i]; 
    }, 
    setSty:function(x){ 
        var attr = this.s.sty; 
        if(this.findAry(attr)){ 
            this.e.style[attr] = x + 'px'; 
            var isIE6 = navigator.appVersion.indexOf("MSIE 6")>-1; 
            isIE6&&attr=="top"&&(this.e.style[attr] = x + document.documentElement.scrollTop + 'px'); 
        }else if(attr=="opacity"){ 
            this.s.maxVal===1&&(this.e.style.display = "block"); 
            this.e.style.opacity = x; 
            this.e.style.filter = "alpha(opacity="+x*100+")"; 
        }else{ 
            this.e[this.s.sty] = x 
        } 
    }, 
    getSty:function(e,s){ 
        var val = e.currentStyle?e.currentStyle[s]:document.defaultView.getComputedStyle(e,null)[s]; 
        return parseInt(val)||0; 
    }, 
    fun:function(f,m,callback){ 
        var D = Date,t = new D,e,T = 500,_this = this; 
        return e = setInterval(function() { 
            var z = Math.min(1, (new D - t) / T), 
                c = _this.s.curClass, 
                curC = _this.e.className; 
            _this.setSty( + f + (m - f) * _this.formula(z)); 
            if (z == 1) { 
                if (callback && typeof callback == 'function') callback(); 
                _this.s.maxVal==0&&(_this.e.getAttribute("style"))&&(_this.e.style.display="none"); 
                if(c!=""&&curC.indexOf(c)<0)_this.e.className += c; 
                clearInterval(e); 
            } 
        },10); 
    } 
}

这是这个js展示的第一个DEMO1:
[html]

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="gbk"> 
<title>test</title> 
<style> 
    div,h6,body{padding:0;margin:0;} 
        div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;} 
    .car-mod{position:relative;width:200px;} 
        .car-menu{width:200px;background:#c06;cursor:pointer;color:#fff;} 
        .car-box{border:2px solid #c06;width:300px;display:none;} 
        .car-box h6{background-color:#f5f5f5;background-image:-moz-linear-gradient(#f5f5f5,#fff);} 
        .things{border-top:1px solid #ccc;padding:50px 15px;} 
</style> 
</head> <body> 
    <div class="car-mod" id="J_car_mod"> 
    <div class="car-menu">购物车</div> 
    <div class="car-box" id="J_car_box"> 
      <h6>我的购物车</h6> 
      <div class="things"></div> 
    </div> 
    </div> 
<script src="animation.source.js"></script> 
<script> 
    (function(){ 
        //线上调用这个插件的时候直接调用animation.js这个是压缩了的 
        var D = document,carMod = D.getElementById("J_car_mod"),carBox = D.getElementById("J_car_box"),carControl=true; 
        //移入显示 
        carMod.onmouseover = function(even){ 
            var even = even || window.event,target = even.target || even.srcElement; 
            if(target.className=="car-menu"){ 
                !!carControl&&(carObj = new ani(carBox,{maxVal:1,sty:"opacity"},function(){carControl=false;})); 
                carObj = null; 
            } 
            //移出隐藏 
            this.onmouseout = function(even){ 
                var e = even || window.event, 
                        reltg =  e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; 
                while (reltg && reltg != this){reltg = reltg.parentNode;}         
                if(reltg != this){ 
                    !carControl&&(carObj1 = new ani(carBox,{maxVal:0,sty:"opacity"},function(){carControl=true;})); 
                    carObj1 = null; 
                } 
            } 
        } 
    })() 
</script> 
</body> 
</html>

这个是基于前面的那个弹出层的demo版本的效果,这个效果必须复制前面的弹出层的js哦部分代码如下
[html]

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>弹出层事例</title> 
<style> 
    div{padding:0;margin:0;} 
    .wra{margin:0 auto;width:1000px;overflow:hidden;} 
    .menu{border:1px solid #ccc;background:#000;color:#fff;width:250px;height:30px;font:14px/30px '微软雅黑';text-align:center;text-shadow:1px 1px 2px #f5f5f5;cursor:pointer;} 
    .con{border:1px solid #000;background:#fff;padding:30px;width:500px;height:200px;position:fixed;top:-150%;left:50%;margin:-100px 0 0 -250px;display:none;z-index:999;} 
    .close{display:block;position:absolute;right:10px;top:10px;cursor:pointer;font:bold 14px Arial;-moz-transition:-moz-transform .5s ease-in 0s;} 
    .close:hover{-moz-transform:rotate(360deg);} 
</style> 
<style> 
</style> 
</head> <body> 
<div class="wra"> 
    <div id="J_popup" class="menu">点击弹出层</div> 
    <div id="J_popup_con" class="con"> 
    <span id="J_colse" class="close" title="关闭">X</span> 
        弹出层内容 
  </div> 
  <script src="popup.js"></script> 
  <script src="animation.source.js"></script> 
  <script> 
        var D = document,m = D.getElementById("J_popup"),con = D.getElementById("J_popup_con"),cl = D.getElementById("J_colse"); 
        new Popup(m,con,cl,{addFun:function(){new ani("J_popup_con",{sty:"top",maxVal:"350",effect:2})},callBack:function(){con.style.display="block";new ani("J_popup_con",{sty:"top",maxVal:"0"})}}) 
    </script> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
js打造数组转json函数
Jan 14 Javascript
javascript日期计算实例分析
Jun 29 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 #Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 #Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 #Javascript
JS实现的省份级联实例代码
Jun 24 #Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 #Javascript
用jquery生成二级菜单的实例代码
Jun 24 #Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 #Javascript
You might like
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
新浪的图片新闻效果
2007/01/13 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python对列表排序的方法实例分析
2015/05/16 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python保存文件方法小结
2018/07/27 Python
python3 读取Excel表格中的数据
2018/10/16 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python导入库的具体方法
2020/06/18 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
使用Python pip怎么升级pip
2020/08/11 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
C++的几个面试题附答案
2016/08/03 面试题
shallow copy和deep copy的区别
2016/05/09 面试题
Java servlet面试题
2012/03/04 面试题
行政总经理岗位职责
2013/12/05 职场文书
庆元旦广播稿
2014/02/10 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
村党组织公开承诺书
2015/04/30 职场文书
让子弹飞观后感
2015/06/11 职场文书