基于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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
Javascript闭包实例详解
Nov 29 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
js判断两个数组相等的5种方法
May 06 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
mysql limit查询优化分析
2008/11/12 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
深入浅析Python传值与传址
2018/07/10 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
就业推荐表自我鉴定
2013/10/29 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
《狼》教学反思
2014/03/02 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
2014年药房工作总结
2014/11/22 职场文书
交通事故责任认定书
2015/08/06 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
JavaScript的function函数详细介绍
2021/11/20 Javascript
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python