作者s25g5d4 (死城盗贼)
看板Ajax
标题[ajax] 用AJAX取得XML在写入网页
时间Thu Aug 5 23:52:49 2010
这是成果发表会~
用jQuery写的 特别PO上来给版友们吐嘈XDD
不过找不到空间放怎麽办
最後只好丢HINET ADSL送的空间了
http://s25g5d4.sg1010.myweb.hinet.net/index.html
script部分
$(document).ready(function () {
$.ajax({
url: 'xml/3.xml?='+Math.floor(Math.random()*1000),
dataType: 'xml',
success: function (data) {
$(data).find("album").each(function(i){
var img=$(this).find("image"),content='';
content+='<div class="album"><table><tr><td><img
src="'+img.text()+'"'+(img.attr('width')?'
width="'+img.attr('width')+'"':'')+(img.attr('height')?'
height="'+img.attr('height')+'"':'')+' /></td><td
class="intro"><h2>'+$(this).find("name").text()+'</h2><h3>'+$(this).find("artist").text()+'</h3><ol
class="track">';
$(this).find("track").each(function (index) {
content+='<li>'+$(this).text()+'</li>';
});
_data=$('#data').append(content+"</ol><span
class='desc'>"+$(this).find("desc").text()+"</span></td></tr></table></div>");
});
divAlbum=$('div.album').hover(function(){
$(this).animate({"opacity":1},300);
},function(){
$(this).animate({"opacity":0.8},300);
});
_data.animate({"opacity":1},800);
olTrack=$('ol.track');
divAlbum=$('div.album');
func=function(){
divHighlight=$(this).removeClass('album').addClass('highlight');
$('div.album').hide(500);
divHighlight.find('span.desc').hide(500,function(){
$(this).appendTo(_data).show(500).attr('id','spanDesc');
});
olTrack.show(500);
$('div.highlight img').one('click',function(){
$('div.album').show(500,function(){
$('
#spanDesc').hide(0,function(){
$(this).appendTo('div.highlight
td.intro').removeAttr('id').show(500);
divHighlight.removeClass('highlight').addClass('album');
divAlbum.one('click',func);
});
olTrack.hide(500);
});
});
}
divAlbum.one('click',func);
}
});
});
--
1F：→ Entropy1988:就不要下次插了插头结果忘了按开关07/30 11:27
2F：推 ArSaBuLu: 就不要下次开了开关结果忘了放东西07/30 11:30
3F：→ peter261989:就不要下次记得放东西结果忘了拿出来07/30 11:34
4F：→ fine246: 就不要下次拿出东西结果摆在那忘了吃07/30 11:47
5F：推 Entropy1988:就不要下次记得吃饭结果忘了煮下一餐 07/30 11:50
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 59.127.208.70
6F：→ s25g5d4:其实本来是架在自己电脑的...可是我又不能24小时开机@@ 08/05 23:53
7F：→ TonyQ:有用到多次的 div.album / #data这些查询应该用变数cache 08/06 00:00
8F：→ TonyQ:找不到空间可以用fiddle 08/06 00:00
9F：→ TonyQ:总之 $ 有点过度使用了，适当用变数减少查询会比较好。 08/06 00:01
※ 编辑: s25g5d4 来自: 59.127.208.70 (08/06 21:47)
※ s25g5d4:转录至看板 Web_Design 08/06 23:18
10F：推 IDL:这又没很难 08/06 23:35
11F：→ s25g5d4:对我来说算难爆了 08/07 00:20
12F：→ s25g5d4:我接触jQuery才一两个月 而且这还是我第一次用AJAX= = 08/07 00:21
13F：推 liullen:对於初学者很有帮助的! 08/09 02:20
14F：推 bala045:挺酷的 09/07 00:46