有“鏡頭感”的網頁是如何實現的 - lvdabao－IT工程師數位筆記本

文章出處

　　很早以前，“焦點圖”這個名稱就出現在了網頁制作中，能夠完成絢麗的圖片切換效果。有很多由flash和jquery制作的焦點圖，其特點就是一個比一個炫。其中有一種特效就是有鏡頭左右搖擺或是拉遠拉近的視覺效果，如果你印象不深了，可以點擊這里體驗一下。隨著CSS3的發布，我們可以利用它的變形、漸變、動畫屬性來代替jquery的動畫函數，用更少的代碼來實現這種有“鏡頭感的”效果。本文就將探索一下如何利用CSS3來制作一個有鏡頭感的網頁。

　　從最終效果來想想原理，在頁面上依次出現的這些內容，其實一開始頁面加載的時候就已經都在頁面上了，只不過大部分內容都在瀏覽器窗口“之外”，我們看不到，等到需要顯示它的時候，再通過改變它的定位，使它恰好出現了瀏覽器的可見區域內。如此一來我們需要解決兩個問題。第一個，當頁面上的內容超出瀏覽器區域時，會自動出現滾動條，對于瀏覽器之外的我們暫時不想讓用戶看到的內容，我們一定得藏好了，不能讓用戶通過滾動條來看到。解決這個問題比較簡單，因為我們有overflow這個神器。只需一行代碼：

body{overflow:hidden;}

　　這樣瀏覽器之外的部分就會藏的很好了。第二個問題來了，在顯示某一塊內容時，我們不單單是要改變這個內容區塊的定位，因為我們發現在切換的過程中，其它區塊的內容也會跟著動，也會時不時“掠過”可視區域，只不過是最終沒有停留而已，如下圖：

　　所以可得出結論：要動的不是將顯示的內容，而是整個所有內容，我們需要做的是在所有元素動完后，將顯示的內容出現在鏡頭前。為此，我們需要把所有內容放置在一個大的背景層上。這個背景層與瀏覽器窗口的關系應該像是這樣的：

　　我們只需將這個大背景層移動合適的位置，就可以將想要顯示的內容恰好出現在瀏覽器窗口中。那么，接下來就是如何移動它，才能模擬出是鏡頭移動的感覺。CSS3的transform允許設置元素的縮放（scale）、移動（translate）、旋轉（rotate）、扭曲(skew)，通過合理得組合利用這些屬性，制作成一個keyframe，便可以模擬出不錯的效果。以下是我所嘗試的一個簡單效果。整個頁面的代碼如下：

<!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=utf-8" />
<title>有鏡頭感的網頁</title>
<style>
body{overflow:hidden;}
#bg{ width:600px; height:800px; position:absolute;border:1px solid red; -webkit-transition:all 1s ease-out 0s;/*為可能的所有屬性加上漸變效果*/
-webkit-animation-name:scale;/*關鍵幀名稱*/
-webkit-animation-duration:1s;/*動畫持續時間*/
-webkit-animation-timing-function:ease-out;/*速度變化函數*/
-webkit-animation-iteration-count:1;/*動畫循環次數，設為infinite無限循環*/
-webkit-animation-play-state:paused;/*控制動畫的播放和暫停。取值為running和paused*/
}
#bg img{width:200px; height:180px; position:relative;}
#img1{ left:10px; top:50px;}
#img2{ left:100px; top:100px;}
#img3{ left:130px; top:400px;}
#win{width:200px; height:180px; border:2px solid; position:absolute; left:800px; top:300px; z-index:2;}
@-webkit-keyframes scale{
         0%{
                   -webkit-transform:scale(1) rotate(0deg);
                   }
         50%{
                   -webkit-transform:scale(0.5) rotate(20deg);
                   }
         100%{
                   -webkit-transform:scale(1) rotate(0deg);
                   }
         }
</style>
<script type="text/javascript" src="../jquery.js"></script>
</head>

<body>
<input id="btn1" type="button" value="第一張" />
<input id="btn2" type="button" value="第二張" />
<input id="btn3" type="button" value="第三張" />
<div id="bg">
    <img id="img1" src="Chrysanthemum.jpg" />
    <img id="img2" src="Desert.jpg" />
    <img id="img3" src="Hydrangeas.jpg" />
</div>
<div id="win">
這是瀏覽器窗口
</div>
<script>
$(function(){
    var bg = $('#bg');
    var winLeft = $('#win').offset().left;
    var winTop = $('#win').offset().top;

　　//根據id展示某一張圖片
    function showImg(imgId){
        var imgLeft = $('#'+imgId).position().left;
        var imgTop = $('#'+imgId).position().top;
        var newbgLeft = winLeft - imgLeft;
        var newbgTop = winTop - imgTop;
        bg.css({left:newbgLeft,top:newbgTop,'-webkit-animation-play-state':'running'});
        bg.on('webkitTransitionEnd',function(e){
　　            bg.css('-webkit-animation-play-state','paused');
            });
        }
        
    $('#btn1').click(function(){
        showImg('img1');
        });
    $('#btn2').click(function(){
        showImg('img2');
        });
    $('#btn3').click(function(){
        showImg('img3');
        });
    
    });
</script>
</body>
</html>