::jQuery::中文官網

 jQuery 這次的試用是我的第一次,話說第一次總是比較痛,這次測試上也花了
不少時間,但畢竟是別人寫好的套件,【沒吃過豬肉也要看過豬走路】老實說
Javascript 我也不太行,使用上僅限於基本功,要自行開發一個Javascript 完整
功能我還差的遠嚕,更不用說看jQuery 程式碼,跟看天書有啥差別,但不會開
發總要會應用,不然也不用出來混了。


    【jQuery Cycle Plugin】官網
            這是這次我主要需要的圖片過場效果,使用上相當方便,只需修改宣告
            素質,就能改變過場效果,要使用jQuery Cycle Plugin需先下載jQuery
            的主程式,有分三類(請至jQuery官網下載):

                1‧下載 jQuery 1.2.6 (16kb, 使用Gzip壓縮與最小化處理 )
                2‧下載 jQuery 1.2.6 (97kb, 未壓縮的)
                3‧下載 jQuery 1.2.6 (30kb, 精簡版)

             jQuery Cycle Plugin程式也一樣分三類:

                1‧jQuery Cycle Plugin with all transitions - compressed (12 KB) 
                2‧jQuery Cycle Plugin with all transitions - minified (17 KB) 
                3‧jQuery Cycle Plugin with all transitions - uncompressed (34 KB) 
             
             jQuery的路徑:
               ﹂  _WWW_
                     ﹂  include
                           ﹂  javascript
                                  ﹂  jQuery
                                       ﹂  jquery-1.2.6.min.js
                                       ﹂  jquery.cycle.all.min.js

             1‧下載jQuery 及 jQuery Cycle Plugin ,自行選擇所需要的版本。
             2‧Include 套件
                   <script type="text/javascript"
                   src="include/javascript/jQuery/jquery-1.2.6.min.js"></script>
                   <script type="text/javascript"
                   src="include/javascript/jQuery/jquery.cycle.all.min.js"></script>
             3‧以範例 Pager demo with an extra link to trigger direct navigation
                   為例, jQuery Cycle Plugin的執行程式碼,將底下程式碼至於
                   <head></head>裡。
                   <script type="text/javascript">
                        $(function() {
                               $('#slideshow').cycle({
                                         fx:     'turnDown',     //過場效果
                                         speed:  'fast',          //轉換速度
                                         timeout: 3000,          //停留時間
                                         pager:  '#nav',          //頁碼
                                         pagerEvent: 'mouseover',     //滑鼠動作判斷
                                         pagerAnchorBuilder: function(idx, slide) {
                                               return '#nav li:eq(' + (idx) + ') a';
                                         }
                                });
                                $('#direct').click(function() {
                                         $('#nav li:eq(2) a').triggerHandler('click');
                                         return false;
                                });
                        });
                   </script>
             4‧css樣式,將底下程式碼至於<head></head>裡。
                   #nav { width: 300px; margin: 15px }
                   #nav li { width: 50px; float: left; margin: 8px; list-style: none }
                   #nav a { width: 50px; padding: 3px; display: block;
                                   border: 1px solid #ccc; }
                   #nav a.activeSlide { background: #88f }
                   #nav a:focus { outline: none; }
                   #nav img { border: none; display: block }
             5‧  #nav裡的圖片可改為文字頁碼,將底下程式碼至於<body>
                     </body>裡。
                   <ul id="nav">
                        <li><a href="#" target="_blank">
                               <img src="images/beach1.jpg" width="50" height="50" />
                               </a></li>
                        <li><a href="#" target="_blank">
                               <img src="images/beach2.jpg" width="50" height="50" />
                               </a></li>
                        <li><a href="#" target="_blank">
                               <img src="images/beach3.jpg" width="50" height="50" />
                               </a></li>
                        <li><a href="#" target="_blank">
                               <img src="images/beach4.jpg" width="50" height="50" />
                               </a></li>
                   </ul>
                   <div id="slideshow" class="pics">
                        <img src="images/beach1.jpg" width="200" height="200" />
                        <img src="images/beach2.jpg" width="200" height="200" />
                        <img src="images/beach3.jpg" width="200" height="200" />
                        <img src="images/beach4.jpg" width="200" height="200" />
                   </div>

arrow
arrow
    全站熱搜

    kyosukehot 發表在 痞客邦 留言(1) 人氣()