十早•八羽 D:D: 2012

資料來源
http://www.cnblogs.com/Cson/archive/2012/02/01/2335087.html

功能說明：

利用css的border實現圖片的翻轉效果，支持從上到下、從下到上，從左到右，從右到左四種翻轉。

兼容IE 7 8 9 10 firefox chrome

效果預覽：

實現原理：

　　之所以說這是CSS的障眼法，是因為這種效果並不是使用CSS原生的屬性進行實現的，並不僅僅是使用一張圖片，然後通過特定屬性使其翻轉，因為我們知道CSS並不提供另圖片翻轉的接口。要實現這種效果，我們需要的是通過圖片和外層div的border的配合，使圖片看起來翻轉了一定角度。

　　細心的讀者可能會發現，我在選擇圖片的時候，已經有所講究，看看上面這幅圖片，它具有兩個特點：

　　1.完全對稱。

　　2.圖形周圍的空白（黑色部分）較多。

　　如果不是滿足上述兩個特點的圖片，翻轉效果看起來也會沒那麼好，要知道原因，首先就要清楚這種翻轉效果的實現原理了。

　　以從右到左的翻轉為例，使圖片翻轉的實現步驟：

　　1.首先添加一張你需要實現翻轉效果的圖片，圖片絕對定位。

　　2.然後我們需要的是一個div，div高度和圖片高度相等。該div除了右邊框外，其他邊框為和背景色一樣且borderWidth為0，右邊框則為透明且borderWidth和圖片寬相等，定位與圖片一致，zIndex比圖片大。經過這兩步後，我們就可以把一個透明正方形（實質上為div的右邊框）覆蓋在圖片上面。

　　3.之後我們需要的就是使右邊框和圖片的尺寸和大小動態改變，實現翻轉效果。我們開始同時逐漸減少右邊框和圖片的寬度，並且同時逐漸增大上下邊框的寬度和圖片的高度，並且調整圖片和div的定位，使它們始終保持在原位置，就可以實現圖片的翻轉效果。簡單地說，實現視覺上翻轉效果的實際上是div的右邊框，但是我們通過把右邊框設置為透明從而露出下面的圖片，看上去就是圖片在翻轉。

　　之所以我之前說的選擇的圖片最好要有上面那兩個特點：完全對稱和四周空白較多。那是因為如果圖片不對稱，那麼圖片翻轉過去之後，圖片的顯示就會不合理（沒有達到鏡像的顯示效果，顯示位置不對），但是，我也在程序裡提供了onHalfLoop和onFullLoop兩個回調函數的接口，分別是翻轉90度和180度後觸發的回調函數。大家完全可以使用ps把一張圖片左右（或上下）翻轉，然後在onHalfLoop裡把圖片路徑設置為該翻轉後圖片的路徑，在onFullLoop裡把路徑還原，這樣就可以完全克服需要使用完全對稱圖片這個障礙，使不對稱的圖片也可以實現翻轉。

　　至於另一個特點：使用四周空白較多的圖片。使用這種圖片的好處是消除翻轉的時候處在圖片邊緣的圖紋被隱藏所帶來的視覺破綻，具體這裡說不清楚，不過大家找一張圖片四周也有較多圖紋的圖片試試就清楚了。

最後給出所有代碼吧，結合代碼應該就可以更清楚地瞭解其中的原理：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔title>
<style type="text/css" rel="stylesheet">
#container{width:600px; height:500px; background:white; position:relative;}
.borderWrap{position:absolute; border-style:solid; border-color:white; border-width:0 0 0 0; z-index:10; height:100px; width:0;}
.turnImg{position:absolute;z-index:1; width:150px; height:100px;}

#borderWrapper1{ left:100px; top:100px;}
#borderWrapper2{ left:300px; top:100px;}
#borderWrapper4{ left:100px; top:300px;}
#borderWrapper3{ left:300px; top:300px;}

#turnImg1{left:100px; top:100px;}
#turnImg2{left:300px; top:100px;}
#turnImg3{left:100px; top:300px;}
#turnImg4{left:300px; top:300px;}
style>
head>

<body>

<div id="container">
<div id="borderWrapper1" class="borderWrap">div>
<img id="turnImg1" class="turnImg" src="http://52photoshop.com/quan/photo/201001161611051194.jpg" />
<div id="borderWrapper2" class="borderWrap">div>
<img id="turnImg2" class="turnImg" src="http://52photoshop.com/quan/photo/201001161611051194.jpg" />

<div id="borderWrapper3" class="borderWrap">div>
<img id="turnImg3" class="turnImg" src="http://52photoshop.com/quan/photo/201001161611051194.jpg" />

<div id="borderWrapper4" class="borderWrap">div>
<img id="turnImg4" class="turnImg" src="http://52photoshop.com/quan/photo/201001161611051194.jpg" />

div>


body>
<script>
var overturnImg=(function(){

    var _overturnImg=function(imgId,wrapperId,options){
        this.init(imgId,wrapperId,options);
    
    }
    _overturnImg.prototype=(function(){
        
        var dirObj={//方向對應的擴大border
'RTL':{preHalf:'right',afterHalf:'left'},
            'LTR':{preHalf:'left',afterHalf:'right'},
            'TTB':{preHalf:'top',afterHalf:'bottom'},
            'BTT':{preHalf:'bottom',afterHalf:'top'}        
        }
    
        
        
        var    $=function(id){return document.getElementById(id);};
        var emptyFunction=function(){};
    
        
        var changeTurningStyle=function(self){
        
            var timeId;
            var speed=self.speed;
            var img=self.img;
            var borderWrapper=self.borderWrapper;
            var bwWidth,imgWidth,bwHeight,imgHeight,bwTop,imgTop,bwLeft,imgLeft,bwOther2Width;
            var dir=self.direction;
            var preHalf=true;
            var enhanceBorder='border-'+dirObj[dir]['preHalf']+'-';//根據旋轉方向映射出需要被擴大的border        
            bwWidth=imgWidth=img.clientWidth;
            bwHeight=imgHeight=img.clientHeight;
            bwOther2Width=0;
            bwTop=imgTop=img.offsetTop;
            bwLeft=imgLeft=img.offsetLeft;
    
            return function(){
                
                var reduceBorder;                
                if(dir=='RTL'||dir=='LTR'){
            
                    if(preHalf){
                    
                        bwOther2Width+=speed;
                        bwWidth-=speed*2;
                        bwLeft+=speed;
                        bwTop-=speed;
        
                        if(bwWidth<=0){
                            preHalf=false;
                            self.onHalfLoop(self);
                            enhanceBorder='border-'+dirObj[dir]['afterHalf']+'-';//根據旋轉方向映射出需要被擴大的border
                        }        
                        
                    }
                else{
                        
                    bwOther2Width-=speed;
                    bwWidth+=speed*2;
                    bwLeft-=speed;
                    bwTop+=speed;
                    
                    if(bwWidth>=imgWidth){
                        preHalf=true;
                        enhanceBorder='border-'+dirObj[dir]['preHalf']+'-';//根據旋轉方向映射出需要被擴大的border
                        self.onFullLoop(self);
                    }    
                }
                    
                    borderWrapper.style.cssText=enhanceBorder+'width:'+bwWidth+'px;'
                                                +enhanceBorder+'color:transparent;'
                                                +'width:0;'
                                                +'border-top-width:'+bwOther2Width+'px;'
                                                +'border-bottom-width:'+bwOther2Width+'px;'
                                                +'top:'+bwTop+'px;'
                                                +'left:'+bwLeft+'px;';
                                                
                    img.style.cssText='height:'+(bwOther2Width*2+bwHeight)+'px;'
                                      +'width:'+Math.max(0,bwWidth)+'px;'
                                      +'top:'+bwTop+'px;'
                                      +'left:'+bwLeft+'px;';
                    
                
                }
                else if(dir=='TTB'||'BTT'){
                    if(preHalf){
                        
                        bwOther2Width+=speed;
                        bwHeight-=speed*2;
                        bwLeft-=speed;
                        bwTop+=speed;
                    
                        if(bwHeight<=0){
                            preHalf=false;
                            enhanceBorder='border-'+dirObj[dir]['afterHalf']+'-';//根據旋轉方向映射出需要被擴大的border
                            self.onHalfLoop(self);
                        }        
                        
                    }
                    else{
                    
                        bwOther2Width-=speed;
                        bwHeight+=speed*2;
                        bwLeft+=speed;
                        bwTop-=speed;
                        
                        if(bwHeight>=imgHeight){
                            preHalf=true;
                            enhanceBorder='border-'+dirObj[dir]['preHalf']+'-';//根據旋轉方向映射出需要被擴大的border
                            self.onFullLoop(self);
                        }    
                    }
                    
                    borderWrapper.style.cssText=enhanceBorder+'width:'+bwHeight+'px;'
                                                +enhanceBorder+'color:transparent;'
                                                +'height:0;'
                                                +'width:'+bwWidth+'px;'
                                                +'border-left-width:'+bwOther2Width+'px;'
                                                +'border-right-width:'+bwOther2Width+'px;'
                                                +'top:'+bwTop+'px;'
                                                +'left:'+bwLeft+'px;';
                    img.style.cssText='width:'+(bwOther2Width*2+bwWidth)+'px;'
                                      +'height:'+Math.max(0,bwHeight)+'px;'
                                      +'top:'+bwTop+'px;'
                                      +'left:'+bwLeft+'px;'
                                      
                                     
                    
                }
                timeId=window.setTimeout(arguments.callee,20);
                
            }
                    
            
        }
    
        return{
            /*    初始化    */
            init:function(imgId,wrapperId,options){
                var strArr=[];
                var ags=arguments||[];
                var ag;
                for(var i=0,len=ags.length;i<len;i++){        //參數修復
                    ag=arguments[i];
                    (typeof ag=='string')?strArr.push(ag):options=ag;
                }
                imgId=ags[0];
                wrapperId=ags[1];
                
                options=options||{};
                
                this.img=$(imgId||'turnImg');//獲取要翻轉的圖片元素
this.borderWrapper=$(wrapperId||'borderWrapper');//獲取製造翻轉的div元素
this.speed=options.speed||2;
                this.direction=options.direction||'RTL';
                this.onHalfLoop=options.onHalfLoop||emptyFunction;
                this.onFullLoop=options.onFullLoop||emptyFunction;
            
            
            },
            run:function(){
                changeTurningStyle(this)();
            }
        
        };
    })();
    
    return _overturnImg;

})();var b=new overturnImg('turnImg1','borderWrapper1');
b.run();var b2=new overturnImg('turnImg2','borderWrapper2',{direction:'TTB'});
b2.run();var b3=new overturnImg('turnImg3','borderWrapper3',{direction:'BTT'});
b3.run();var b4=new overturnImg('turnImg4','borderWrapper4',{direction:'LTR'});
b4.run();
script>

　　可以看看最後的調用方法：

var b=new overturnImg('turnImg1','borderWrapper1');
b.run();
var b2=new overturnImg('turnImg2','borderWrapper2',{direction:'TTB'});
b2.run();
var b3=new overturnImg('turnImg3','borderWrapper3',{direction:'BTT'});
b3.run();
var b4=new overturnImg('turnImg4','borderWrapper4',{direction:'LTR'});
b4.run();

　　我們想要使圖片向不同的方向翻轉，需要的就是在direction中傳入不同的數值：RTL(右向左翻轉)、LTR(左向右翻轉)、BTT（下向上翻轉）、TTB（上向下翻轉）。

　　歡迎轉載，請標明出處：http://www.cnblogs.com/Cson/archive/2012/02/01/2335087.html

十早•八羽 D:D

2012年8月12日星期日

Eclipse 建立 Android Virtual Device

2012年5月19日星期六

CSS 3D 方塊

2012年5月2日星期三

Google Task API smaple

2012年3月28日星期三

CSS教學－DIV內的物件垂直水平置中

2012年2月3日星期五

[轉]關於Java生成背景透明的png圖片

2012年2月2日星期四

轉【CSON原創】CSS的障眼法：利用border實現圖片的翻轉

著作人

標籤

網誌存檔

熱門文章

2012年8月12日 星期日