認識 XML @wiki
認識 XML @w3schools (英文版)
認識 XML @runoob (簡中版)
認識 JSON @wiki
認識 JSON @w3schools (英文版)
認識 JSON @runoob (簡中版)
運用 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>