ajax xml 取得 表示 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<title>jqery 2017/02/04</title>
</head>

 

<body>
<!-- 2 html -->
<div class="ticker">
<ul>
<li><a href="#">2017/01/01 新年の始まり~~~~</a></li>
<li><a href="#">2017/01/21 親の誕生日</a></li>
<li><a href="#">2017/01/31 引っ越し完了</a></li>
<li><a href="#">2017/02/01 2月の始まり~~~~~</a></li>
<li><a href="#">2017/02/04 旧暦</a></li>
</ul>
</div>

<p>text,text,text,text<a href="#">今日は天気が良いみたいですね<span class="ttpShow">
最高気温は10℃に上がるようです</span></a>明日も晴れると良いな。365日中、4/3くらいは
晴れが良いな。
</p>

<h2>au news(ajax xml)</h2>
<div id="news"><p>ロード中です・・・<a href="news.html"></a></p></div>

<h2>yahoo IT</h2>
<div id="news_02"><p>ロード中です・・・<a href="news.html"></a></p></div>

 

 


<script>
/*-- 2 ニュースティッカー --*/
$(window).load(function(){
var thisTi = $('.ticker');
tiul = thisTi.find('ul');
tili = tiul.find('li');
liF = tiul.find('li:first');// 最初のli要素

liF.css({display:'block', opacity:'0',zIndex: '98'}).
stop().animate({opacity: '1'}, 1000, 'linear').
addClass('showlist');

setInterval(function(){
var showLi = thisTi.find('.showlist');
showLi.animate({opacity: '0'},1000, 'linear', function(){
$(this).next().css({display: 'block',opacity: '0',zIndex: '98'}).
animate({opacity: '1'},1000, 'swing').addClass('showlist').
end().appendTo(tiul).css({display:'none',
zIndex: '98'}).removeClass('showlist');
});
}, 7777);
});


/*---1 リンク 詳細表示 ---*/
$(function(){
$('a:has(.ttpShow)').mouseover(function(e){
$('body').append('<div id="ttpPanel">' +
$(this).children('.ttpShow').html() + '</div>');
$('#ttpPanel').css({top:(e.pageY+10) + 'px',left:(e.pageX+10) + 'px'}).fadeIn('fast');

}).mousemove(function(e){
$('#ttpPanel').css({top:(e.pageY+10) + 'px',left:(e.pageX+10) + 'px'});

}).mouseout(function(){
$('#ttpPanel').remove();
});
});

/*----- ajax new -----*/

$.ajax({
url: 'rss.xml',
dataType: 'xml',
async: 'true',
success: function(xml){
var html = '';
$(xml).find('channel item').each(function(){
html += '<li><a href="' + $(this).find('link').text() +
'">' + $(this).find('title').text() + '</a></li>';
});
$('#news').html('<ul>' + html + '</ul>');
},
error: function(html) {
alert('データの読み込みに失敗しました');
}
});

$.ajax({
url: 'yahooi.xml',
dataType: 'xml',
async: 'true',
success: function(xml){
var html = '';
$(xml).find('channel item').each(function(){
html += '<li><a href="' + $(this).find('link').text() +
'">' + $(this).find('title').text() + '</a></li>';
});
$('#news_02').html('<ul>' + html + '</ul>');
},
error: function(html) {
alert('データの読み込みに失敗しました');
}
});


</script>

</body>
</html>