Page3載入XML資料檔並逐一展示影像動畫

認識 XML @wiki
認識 XML @w3schools (英文版)
認識 XML @runoob (簡中版)

認識 JSON @wiki
認識 JSON @w3schools (英文版)
認識 JSON @runoob (簡中版)

XML vs JSON

運用 jQuery 執行 AJAX 中最重要常用的方法：$.ajax()
說明參考@jQuery
說明參考@w3schools (英文版)
說明參考@runoob (簡中版)

載入外部資料檔或動態網頁檔...... $.ajax()

 

<section class="page page3">
  <ul id="imglist">
      <!--  以下 li 是先協助 CSS 排版設計用, CSS處理好即註解  -->        
      <li>
        <a href="images/flower-b/flower1.jpg">
          <img src="images/flower-s/flower1.jpg">
        </a><span>Flower1</span>
      </li>
      <!--  以上 li 是先協助 CSS 排版設計用, CSS處理好即註解  -->
  </ul>
</section>

 

<script>

$.ajax({
    url:'TSFlowers.xml',     //要載入的檔案名稱
    datatype:'xml',          //載入檔案的資料類型
    success:function(myXMLdata){ //載入成功後要執行的function,並且將載入的資料以myXMLdata變數帶入
       
        //each是將選取的所有物件逐一執行Fn的工作, 
        //i接收的是每一圈的索引編號, obj接收的是每一圈的選取器
        $(myXMLdata).find('flower').each(function(i,obj){
            var vtitle = $(obj).find('title').text(); //將XML各欄位資料
            var vimage = $(obj).find('image').text(); //記錄到變數
            var vdesc = $(obj).find('desc').text();
            //alert(vtitle+'-----'+vimage+'-----'+vdesc);
            
            //在指定位置一筆一筆新增呈現資料
            //(剛開始的影像大小由CSS設定寬高為0定位在正中央)
            $('#imglist').append(
                '<li><a href="images/flower-b/'+vimage+'.jpg">'
                +'<img src="images/flower-s/'+vimage+'.jpg"></a>'
                +'<span>'+(i+1)+vtitle+'</span></li>'
            );//append end
            
        });//each end
        
    }//success function end
});//ajax end    

</script>

 

<script>

//設計page3的影像逐一放大顯示...(注意: 程式放哪裡？)...............
function showPage3Img(){
    $('#imglist img').eq(page3ImgNo)
        .animate({width:'100%',height:'100%',left:0,top:0},500);
    page3ImgNo++;   //累加1準備下一張要放大影像的索引編號
    //當索引編號 < 影像的總數量, 以setTimeout執行下一次showPage3Img
    if( page3ImgNo < $('#imglist img').length ){
        setTimeout(showPage3Img,300);
        //在500毫秒後執行一次showPage3Img的function
    }                
}
showPage3Img();

</script>

 

<script>

//設計page3的影像滑鼠滑入時顯示標題文字,滑出時隱藏標題文字........
$('#imglist li').hover(
    function(){
        $(this).children('span')
               .stop(true,true).animate({bottom:0},500);
    },
    function(){
        $(this).children('span')
               .stop(true,true).animate({bottom:'-50%'},500);
    }
);

</script>