DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 基於OO的動畫附加插件,可以實現彈跳、漸隱等動畫效果 分享
基於OO的動畫附加插件,可以實現彈跳、漸隱等動畫效果 分享
編輯:關於JavaScript     

前言:前段時間一直都好忙也就好久沒有寫些東西了,最近手上的事剛好告些段落了,把以前空寫的寫插件都拿出來分享下吧,希望對大家有些幫助,也希望有高手能幫忙指點下我的寫不足和錯誤,一直以來自己寫的東西都是在用,性能方面個人只能盡量靠近問題還很多……真心求指點;
插件簡介:執行漸隱等動畫效果,可以這個插件為一個附加插件 可以配合前面我發的一個彈出層 等等之類的東西用增加js展示的趣味性,
使用方法:在下面的js代碼裡面前面寫了,大家可以看看直接復制粘貼就可以用了有問題可以聯系我</p
JS代碼如下 展示方式可以復制下面的HTML查看
[javascript]
復制代碼 代碼如下:
/*
 createByTommy_20110525
 emial:@[email protected]
 用途:
 執行漸隱等動畫效果
 傳入參數說明:
 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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved