基于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 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 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
Terran热键控制
2020/03/14 星际争霸
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
php无限极分类递归排序实现方法
2014/11/11 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python中Apriori算法实现讲解
2017/12/10 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Django缓存系统实现过程解析
2019/08/02 Python
python实现XML解析的方法解析
2019/11/16 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
python递归函数用法详解
2020/10/26 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
新闻专业本科生的自我评价分享
2013/11/20 职场文书
司法建议书范文
2014/05/13 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
丧事答谢词大全
2015/09/30 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python