2015年4月2日 星期四

[教學] jQuery學習筆記 第七堂(animate使用:製作輪撥式廣告看板)



在這堂課中,我們要學習製作輪撥式的廣告看板。

製作出來的結果就像這樣子。
這堂課我們會學習到的語法包含:
HTML和CSS語法
overflow:hidden
position:relative/fixed/absolute

jQuery語法
.animate():製作動畫效果


jQuery學習筆記 第五堂(製作最流行的圖片輪撥效果)這堂課,我們已經有製作了一種類型的廣告輪撥方式,而在今天這堂課我們則是要學習製作如同YAHOO拍賣一樣的輪撥式廣告看板



在這個看板中有幾個不同的效果:

1.當滑鼠移到上方的標題時,圖片會透過移動的方式轉到符合那張標題的圖片
2.自動輪撥

為了要學習撰寫這樣的效果,我們要先學習animate這個語法。

animate功能示範
首先,我們先利用CSS製作一個方框


長的就像這樣子


接著就可以來套用animate這個效果了,animate({"CSS屬性":"CSS的值"})

這麼做的話,就可以改變方框的大小了,我們同樣也可以改變方框的位置



結果就會像這樣,它會從左邊和上方開始移動各100px。


在官網有寫到,如果是單純用jQuery的話,是沒辦法改變背景顏色的,需要另外下載jQuery.color的套件,才可以做到改變背景顏色,有興趣的可以在試試看。




這個部分完整的語法如下:
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>animate示範</title>
    <style>
        .show{
            height:100px;
            width:100px;
            border-radius:10px;
            background-color:aquamarine;
            position:absolute;
        }
    </style>
    <script src="jquery-1.11.2.min.js"></script>
<!--    <script src='jquery.color-2.1.2.min.js'></script>-->
    <script>
        $(document).ready(function(){
            $(".show").animate({
                "width":"300px",
                "height":"300px",
                "left":"100px",
                "top":"100px",
                //"background-color":"#4c67a5"
               })
        })
    </script>
</head>
<body>
<div class="show">
</div>


</body>
</html>
可以玩玩看animate的效果:點我

製作廣告輪撥畫面

知道animate的大致用法後,我們就來模仿製作yahoo的廣告輪撥畫面了

STEP 1 版面建置

我們先分析yahoo廣告的版型,可以看出大概可以切成兩個區塊,一個區塊是是上方的選單(nav),另一個區塊是下方的廣告區(banner)


就可以開始來建立區塊(div)了



在nav的區塊中,我們用先前所學到的ulli來把標題輸入進去

同時我們可以到yahoo拍賣,把廣告的圖片下載下來練習用,插入banner當中,雖然實際上的廣告有5張圖,但是我們先插入三張就好,之後的部分可以在用回圈來讓自己執行。



這個時候網頁的頁面會長的像這樣子


我們這時候可以設定各個區塊的css style,比較容易的方式是由下往上做,先看每一張圖片的大小(949*354),所以我們知道欄的寬應該要是949,所以nav這個區塊的寬也是949


這時候的版面會變成這樣子


再來我們要把三張圖片並排在一起,所以我們把寬度改為949*3=2847


這時候會發現,雖然我們banner設的寬度和三張圖剛剛好是一樣的,可是這三張圖並沒有並排在一起,原因是因為,我把三張圖的程式碼用enter分行,而在html中,按enter就會多一個空白


就是這個空白,使得我們三張圖沒有辦法直接併在一起


這時候,我們可以利用float這個語法,讓這三張圖之間加以並排,不要留空隙


結果就會剛剛好這三張圖可以出現在banner這個區塊中


再來我們把List變成水平排列,使用float:left這個指令


另外,我們還可以用overflow這個語法,告訴它說,如果我們其他區塊超過all的寬度時,請幫我隱藏起來。


這時候的結果就會長的像這樣



STEP 2 更多CSS語法修飾版型

這時候,我們其實可以開始寫jQuery的語法了,但我要想讓版面漂亮一下再開始寫,所以我決定先在添加一下CSS的樣式,修飾一下版型。

我先把CSS寫成如下,但最後寫上jQuery還會做一些變動,這裡我原本是用hover來做出當滑鼠移過時會有的效果,等一下我會把這部分拿掉,改用jQuery的效果.css來執行:
    <style>
        *{
            padding:0;
            margin:0;
        }
        #all{width:949px; height:424px; margin:auto; overflow:hidden}
        .nav{width:949px; height:40px;margin-bottom: 10px; margin-top:20px; border-bottom:1px solid #07A1D4;padding-bottom:3px}
        .nav li{float:left; list-style-type: none; color:darkgray; font-family:微軟正黑體; width:200px; font-size:18px; text-align:center; line-height:40px; cursor: pointer}
        .nav li:hover{
            font-weight:bold;
            color:#0785d4;
            font-size:21px;
            border-bottom: 4px solid #07A1D4;
         
        }
        .banner{width:2847px; height:354px;}
        .banner img{float:left}
    </style>

這裡要注意的地方是,#all的高度要調整成424,因為我們在nav的地方有用到margin和padding,這會增加它的高度,所以調成424(10(margin-bottom)+20(margin-top)+354(.banner height)+40(.nav height))

添加廣告輪撥動畫:開始寫jQuery語法

jQuery我們會用到幾個不同的語法,像是動畫(animate)、設定播放時間(setInterval)、修改樣式(css)和一些回圈的指令

STEP 1 當滑鼠移過時,移動廣告位置

寫移動的效果時,會用到animate這個語法,但要注意的是,若要用animate,前面一定要先定義position

這裡我們用的是relative


如果用absolute,banner會出現問題,上面雖然我們有設定overflow:hidden,當是當我這裡的postion如果設定成absolute,它會以它上層的element(這裡就是指id=all)當作定位點。


接下來就可以寫入這段jQuery語法:
<script src="jquery-1.11.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".nav li:eq(0)").mouseenter(function(){
                $(".banner").animate({"left":"0px"},400)
            })
            $(".nav li:eq(1)").mouseenter(function(){
                $(".banner").animate({"left":"-949px"},400)
            })
            $(".nav li:eq(2)").mouseenter(function(){
                $(".banner").animate({"left":"-1898px"},400)
            })
        })
    </script>

這段程式碼的意思是,當我的滑鼠進入(mouseenter)nav li這個區塊時,執行animate的動畫。

這裡的定位點是用relative,當left為0的時候,就是最左邊,當left為-949的時候,表示圖片會往左邊移動949px,以此類推。

記得之前的這張圖嗎?


STEP 2 讓字體根據游標位置改變

接著,我們可以把剛剛寫的.nav li:hover {}這整段CSS刪掉,讓它變成jQuery動畫的效果,這段效果分成兩段,下面那段的意思是,當我滑鼠移到的那欄,請幫我改變字體;上面那段則是用來恢復每一段變回原本的字體。

stop.() 的目的則是要避免動畫向音譜一樣抖動,也就是當滑鼠移到其他按鍵的時候,就不要再執行先前的動畫了。



STEP 3 製作自動輪撥的效果

接著要利用setInterval(函數,時間),這個語法,也就是每隔多久執行一次該函數(這裡是auto)。

然後我們先用alert(position)來測試一下我們希望呈現的數字對不對,在這裡我們希望每個3秒呈現一個數字,第一次是-949,第二次-949*2,第三次是-949*0。


如果用alert的作法沒問題的話,我們就可以把它改成輪撥的函數


接著,跟上面一樣,我們要加入CSS的效果,讓輪撥的時候,也能隨著我們輪撥到的畫面,改變字體。


STEP 4 設定當滑鼠移過圖片時,停止輪撥

我們利用hover這個指令來執行,當滑鼠移到圖片上時,我們clearInterval,當滑鼠移開圖片時,我們在setInterval。


STEP 5 讓輪撥和滑鼠移過的效果不會衝突

在上個步驟完成後,我們會發現,輪撥的效果和滑鼠移過的效果會有衝突產生,這是因為輪撥的效果和滑鼠移過的效果之間沒有關連,因此,我們要透過變數n,讓它們產生關連。

我們要在每一個效果中都增加這段語法,讓它知道當我的滑鼠移到第一張圖(eq:(0))的時候,輪撥的效果也要變成從第1張繼續下去。同時為了避免滑鼠一移到那張圖後,就馬上輪播下一張,我們要加上clearInter和setInterval,讓它重新計時。



STEP 6 將程式碼精簡化

最後這個部分,我們要透過函數的建立還有回圈把程式碼精簡化。

首先,我們把我們落落長的一段變成函數,把它叫做change,放在最後面


上面原本又用到這段函式的地方,就都可以用change這個函式取代


我們進一步把這三段在更精簡的一點,改成一個回圈。這裡,因為回圈的變數i無法傳到mouseenter這個功能裡面,所以我們要要寫成{id:i},function(e),這裡的id、e都是可以自己取的變數,data則是關鍵字


再來的幾個步驟,我們試著讓我們寫的程式更簡單就可以更改他的設定,所以我們把裡面許多未來可能會更改的值都設成變數。

我們把標題(圖片)的數目取做變數num_li,這樣之後如果圖片增加的話,我們不用一個一個在改程式,它會自動幫我們判斷我們有幾張圖。


接著,為了避免以後圖片增加,我們要去修改banner這個區塊的寬度,我們就直接把style裡面banner的寬度拿掉,把它放到jQuery裡面,讓電腦自動根據我有幾張圖片(num_li)來決定banner的寬度(width_banner)


這個目的是要讓網友一點進去的時候,第一個標題就已經有hover的效果了。


再來我們也可以設定輪撥的速度,把它設成變數time,後面所有原本填3000的地方,都改成time就可以


我們在新設一個變數,是圖片寬度,這樣以後如果我們廣告圖片的寬度有改變的話,只需要調整這裡就可以了,我們把這個變數取做img_width,後面原本寫949的地方也全部要取代成img_width。


寫到這裡其實已經告一段落了,因為實際上有6張廣告圖(原本我們只放了三張),這時候我們在把剩下的兩張放進去,因為前面都已經自動設定好寬度和函式的關係,把圖片加上後,程式就會自動幫我們修改。


看看結果吧
完整的程式碼如下:
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>輪撥式廣告banner製作</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #all{width:949px; height:424px; margin:auto; overflow:hidden;}
        .nav{width:949px; height:40px;margin-bottom: 10px; margin-top:20px; border-bottom:1px solid #07A1D4;padding-bottom:3px}
        .nav li{float:left; list-style-type: none; color:darkgray; font-family:微軟正黑體; width:150px; font-size:16px; text-align:center; line-height:40px; cursor: pointer}
        .banner{height:354px; position:relative}
        .banner img{float:left}
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
        
        
        $(document).ready(function(){
            time=3000//設定輪撥速度
            img_width=949//設定圖片寬度
            
            num_li=$(".nav li").length//根據有幾個標題來寫回圈
            width_banner=num_li*img_width
            $(".banner").css("width",width_banner)//根據有幾個標題來設定banner的寬度
            //當滑鼠移過時,圖片移動到特定位置
            for(i=0;i<num_li;i++){
                $(".nav li:eq("+i+")").mouseenter({id:i},function(e){
                    n=e.data.id
                    change()
                })
            }
         
        //設定輪撥函數
            clock=setInterval(auto,time);
            n=0
            function auto(){
                n++
                if(n>=num_li){
                    n=0
                }
                position=-n*img_width
                $(".banner").animate({"left":+position+"px"},400)
                $(".nav li").css({
                    "font-weight":"none",
                    "color":"darkgray",
                    "font-size":"16px",
                    "border-bottom":"none",  
                })
                $(".nav li:eq("+n+")").css({
                    "font-weight":"bold",
                    "color":"#0785d4",
                    "font-size":"19px",
                    "border-bottom":" 4px solid #07A1D4",   
                })
            }
        //當滑鼠移到圖案上時輪撥暫停
            $(".banner img").hover(function(){clearInterval(clock)},function(){clock=setInterval(auto,time)})
            
        //當滑鼠移到nav時,根據標題移動圖片
            function change(){
                clearInterval(clock)
                clock=setInterval(auto,time)
                position2=-n*img_width
                $(".banner").stop()//讓動畫不會像音譜一樣抖動,當其他動畫開始執行時,原本已開始的動畫就停止
                $(".banner").animate({"left":+position2+"px"},400)
                //讓所以的清單變回原本的字體
                $(".nav li").css({
                    "font-weight":"none",
                    "color":"darkgray",
                    "font-size":"16px",
                    "border-bottom":"none",  
                })
                //讓滑鼠移到的清單改變成hover的字體
                $(".nav li:eq("+n+")").css({
                    "font-weight":"bold",
                    "color":"#0785d4",
                    "font-size":"19px",
                    "border-bottom":" 4px solid #07A1D4",   
                })
            }
                    
        })
        
    
    </script>
</head>
<body>
<div id="all">
    <div class="nav">
        <ul>
            <li style="font-weight:bold; color:#0785d4;font-size:21px;border-bottom:4px solid #07A1D4">無名小物</li>
            <li>高CP值人氣機王</li>
            <li>秋葉原3C</li>
            <li>開工開學優惠</li>
            <li>Norns</li>
            <li>WL數碼達人</li>
        </ul>
    </div>
    <div class="banner">
        <img src="yahoo/banner1.jpg">
        <img src="yahoo/banner2.jpg">
        <img src="yahoo/banner3.jpg">
        <img src="yahoo/banner4.jpg">
        <img src="yahoo/banner5.jpg">
        <img src="yahoo/banner6.jpg">
    </div>
</div>


</body>
</html>


點我看結果





以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share:

0 意見:

張貼留言