mass Framework flip插件

如果浏览器支持CSS3 transform 3D的话，我们可以玩许多东西，比如flip，即电子书软件的那种翻页效果。不过，像transform3D的高级东西，不是一般浏览器能玩转，更别提IE9了。因此这时轮到JS出马了。jQuery上素以插件多出名，在上面找了几个相关插件研究一翻，搞出了自己的flip插件。总共170行。

$.define("flip", "fx", function(){
    var flip = {
        begin: function() {
            var hyaline =  (!"1"[0] ? "#123456" : "transparent")//透明色，IE6不支持透明，因此要使用滤镜hack一下
            return {//初始化属性
                hyaline: hyaline,
                backgroundColor: hyaline,
                fontSize:0,
                lineHeight:0,
                borderTopWidth:0,
                borderLeftWidth:0,
                borderRightWidth:0,
                borderBottomWidth:0,
                borderTopColor: hyaline,
                borderBottomColor: hyaline,
                borderLeftColor: hyaline,
                borderRightColor: hyaline,
                background: "none",
                borderStyle: 'solid',
                height:0,
                width:0
            };
        },
        horizontal: function( obj ){
            var waist = obj.height /100 *25;
            var begin = flip.begin();
            begin.width= obj.width;//将初始属性克隆成三份，并逐渐改变它们
            return {
                hyaline: begin.hyaline,
                begin: begin,
                middle: {
                    borderTopWidth: 0,
                    borderBottomWidth: 0,
                    borderLeftWidth: waist,
                    borderRightWidth: waist,
                    borderTopColor: "#999",
                    borderBottomColor:"#999",
                    top:  obj.top + (obj.height/2),//向上移
                    left: obj.left - waist//向左移
                },
                end: {
                    borderBottomWidth: 0,
                    borderTopWidth: 0,
                    borderLeftWidth: 0,
                    borderRightWidth: 0,
                    borderTopColor: begin.hyaline,
                    borderBottomColor: begin.hyaline,
                    top: obj.top,
                    left: obj.left
                }
            };
        },
        vertical:  function ( obj ) {
            var waist = obj.height/100 * 25;
            var begin =  flip.begin();
            begin.height = obj.height;
            return {
                hyaline: begin.hyaline,
                begin : begin,
                middle : {
                    borderTopWidth: waist,
                    borderBottomWidth: waist,
                    borderLeftWidth: 0,
                    borderRightWidth: 0,
                    borderLeftColor: "#999",
                    borderRightColor: "#999",
                    top: obj.top-waist,
                    left: obj.left+ (obj.width/2)
                },
                end: {
                    borderTopWidth: 0,
                    borderLeftWidth: 0,
                    borderRightWidth: 0,
                    borderBottomWidth: 0,
                    borderLeftColor: begin.hyaline,
                    borderRightColor: begin.hyaline,
                    top: obj.top,
                    left: obj.left
                }
            };
        }
    }
    var dirMap = {
        t: "Top",
        b: "Bottom",
        l: "Left",
        r: "Right"
    }
    function getDirOption( obj, dir, orientation ){
        var result = flip[ orientation ]( obj ), arr = ["begin", "end"]
        dir.replace( $.rword, function( who ){
            var which = arr.shift();
            result[ which ]["border"+ who + "Width"] = obj[ orientation === "horizontal" ? "height" : "width"];
            result[ which ]["border"+ who + "Color"] = obj[which + "Bgc"];
        });
        return result;
    }
    //hash 中的主要参数 beginBgc endBgc before after frame, direction
    $.fn.flip = function(duration, hash){//并不是原对象进行动画,而是其克隆进行动画
        var props =  hash || duration || {}
        if(typeof duration === "function"){// fx(obj fn)
            hash = duration;               // fx(obj, 500, fn)
            duration = 500;
        }
        if(typeof hash === "function"){   //  fx(obj, num, fn)
            props.after = hash;           //  fx(obj, num, {after: fn})
        }
        var direction = props.direction || "tb";
        direction = dirMap[ direction.charAt(0) ] + ","+dirMap[ direction.charAt(1) ]
        duration = Math.floor( duration / 2 );
        var orientation = direction.charAt(1) === "o" ?  "horizontal" : "vertical" ;
        return this.each(function(){
            var $this = $(this);
            if($this.data('fliping')){
                return false;
            }
            $this.data("fliping", 1);
            //取得原有对象中的有用的信息
            var message = {
                width: $this.width(),
                height: $this.height(),
                beginBgc: hash.beginBgc || $this.css("bgc"),
                endBgc: hash.endBgc || "#999",
                top: $this.offset().top,
                left: $this.offset().left
            };
            //添加替身
            var $clone = $this.css("visibility","hidden")
            .clone(true)
            .data('fliping',1)
            .appendTo("body")
            .html("")
            .css({
                visibility: "visible",
                position: "absolute",
                left: message.left,
                top: message.top,
                margin: 0,
                zIndex: 9999,
                boxShadow:"0px 0px 0px #000"
            });
            var dirOption = getDirOption( message, direction, orientation);
            if(!"1"[0]){//fuck IE6
                dirOption.begin.filter = "chroma(color=" + dirOption.hyaline + ")";
            }
            var middle = dirOption.middle, end = dirOption.end, self = this;
            //绑定回调
            middle.before = function( clone, prop, fx ){
                if(typeof props.before === "function" ){
                    props.before.call( self, clone, prop, fx );
                }
            }
            middle.frame = end.frame = function( clone, prop, fx ){
                if(typeof props.frame === "function" ){
                    props.frame.call( self, clone, prop, fx );
                }
            }
            end.after = function( clone, prop, fx){
                $this.css("visibility", "visible").removeData('fliping');
                $clone.remove();
                if(typeof props.after === "function" ){
                    props.after.call( self, clone, prop, fx );
                }
            }
            $clone.css( dirOption.begin ).fx( duration, middle).fx( duration, dirOption.end );
        })
    }
})
// 2012.2.19 发布

下面就是完整例子：

IE下如果报错，请它刷新页面，再不行，下载回来看。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>$.fn.flip</title>
        <script src="https://files.cnblogs.com/rubylouvre/mass.js" type="text/javascript" ></script>
 
        <style type="text/css">
            #flipbox {
                width: 500px;
                height: 200px;
                line-height: 200px;
                background-color: #ff9000;
                font-family: 'ChunkFive Regular', Tahoma, Helvetica;
                font-size: 2.5em;
                color: #ffffff;
                text-align: center;
            }
            #flipPad {
                margin: 15px 0;
                width: 500px;
                text-align: center;
            }
            #flipPad a {
                padding: 5px 15px;
                background: #1e90ff;
                border: 2px solid #1e90ff;
                border-radius: 2px;
                color: #ffffff;
                font-weight: bold;
                text-decoration: none;
                font-size: 1em;
                font-family: Helvetica, Tahoma, Verdana, sans-serif;
                line-height: 30px;
                height: 30px;
                -moz-border-radius: 2px;
                -webkit-border-radius: 2px;
                -moz-box-shadow: 1px 1px 2px #999999;
                -webkit-box-shadow: 1px 1px 2px #999999;
                -webkit-transition-duration: 1s;
            }
            #flipPad a:hover {
                background-color: #ff9000;
                border: 2px solid #ff9000;
            }
            #flipPad .revert {
                background-color: #ff9000;
                border: 2px solid #ff9000;
                display: none;
            }
        </style>
        <script type="text/javascript">

$.require("ready,fx,event,attr,20120220_flip", function(){
                $("#flipPad a:not(.revert)").bind("click",function(){
                    var btn = $(this);
                    $("#flipbox").flip(1000,{
                        direction: btn.attr("rel"),
                        endBgc: btn.attr("rev"),
                        hyaline:"fff",
                        after: function(){
                            $(this).html( btn.attr("title") )
                        }
                    })
                    return false;
                });
            })
        </script>
    </head>
    <body>
    <article>
       
        <fieldset><legend>flig 翻转效果 by 司徒正美</legend>
        <div id="flipbox">Hello! I'm a flip-box! :)</div>
        <div id="flipPad">
            <a href="#" class="left" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!">left</a>
            <a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">top</a>
            <a href="#" class="bottom" rel="tb" rev="#82BD2E" title="Hey oh let's go!">bottom</a>
            <a href="#" class="right" rel="lr" rev="#C8D97E" title="Waiting for css3...">right</a>
            <a href="#" class="revert">revert!</a>
        </div>
            <pre class="brush:js;gutter:false;toolbar:false">
            $.require("ready,fx,event,attr,more/flip", function(){
                $("#flipPad a:not(.revert)").click(function(){
                    var btn = $(this);
                    $("#flipbox").flip(1000,{
                        direction: btn.attr("rel"),
                        endBgc: btn.attr("rev"),
                        hyaline:"fff",
                        after: function(){
                            $(this).html( btn.attr("title") )
                        }
                    })
                    return false;
                });
            })
            </pre>
        </fieldset>
    </article>
</body>
</html>

更详细的使用方法请到github，看它的文档。