Forked from: Kakushi's RSS取得テスト その2 View Diff (79) RSS取得テスト その3 Kakushi Follow 2015-11-03 21:31:39 License: All rights reserved Fork1 Fav0 View892 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 85 lines HTML 7 lines CSS 61 lines RSS取得テスト その3 jQuery v2.1.0 // forked from Kakushi's "RSS取得テスト その2" http://jsdo.it/Kakushi/qirU // forked from Kakushi's "RSS取得テスト" http://jsdo.it/Kakushi/6gJ2 google.load("feeds", "1"); function initialize() { //Google Apiの読み込み完了 //ロードボタンにイベント指定 document.getElementById("load").addEventListener("click",loadRss); //あらかじめ読み込む loadRss(); } //コールバックの指定 google.setOnLoadCallback(initialize); function loadRss(){ //RSSロード用の関数 //URLにテキストボックス内の値を指定 var feedurl=document.getElementById("url").value; //ロード var feed = new google.feeds.Feed(feedurl); //記事数 feed.setNumEntries(10); feed.load(function (result){ //ロード完了 if (!result.error){ //エラーは起きず //フィード表示要素を空に $("#feed").empty(); for (var i = 0; i < result.feed.entries.length; i++) { //記事一個一個について var entry = result.feed.entries[i]; //イメージhtmlの入れ物 var img = ""; //見出し文内のイメージ要素のパスを探す var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))"/); if(imgCheck){ //始めの画像を表示 img="<img class='rss-image' "+imgCheck[0]+">"; }else{ //画像がないのでタイトル入れとく img="<div class='rss-image'>"+entry.title+"</div>"; } //記事表示用の箱 var box=$("<a class='rss-box' href='"+entry.link+"'></a>") //アニメーション用に布石 .css({height:0}); //イメージ入れとく box.append(img) //&マウスホバー時のタイトル .append("<div class='rss-title'>"+entry.title+"<div>"); /* //タイトル、見出し、日付 var title = '<li><h3>' + entry.title + '</h3></li>'; var conte = '<li>' + entry.contentSnippet + '</li>'; var dates = '<li>' + (new Date(entry.publishedDate)) + '</li>'; */ //表示 $('#feed').append(box); //アニメーション box.delay(i*100).queue(function(){ $(this).css({height:"128px"}); }); } } }); } <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div> <input type="text" id="url" value="http://feeds.gizmodo.jp/rss/gizmodo/index.xml"><input type="button" id="load" value="load"> </div> <p id="feed"> </p> RSS取得テスト その3 * { margin: 0; padding: 0; border: 0; } body { background: #dff; font: 15px sans-serif; } input[type="button"]{ /*見やすくする*/ padding:0px 2px; border:#aaa 3px outset; border-radius:2px; background:#ccc; } input[type="button"]:active{ /*押されたときの*/ border:#aaa 3px inset; background:#888; } .rss-box , .rss-image , .rss-title{ /* アニメーションのためのトランジション */ transition:all 0.5s; /* a要素があるので */ display:inline-block; /* 幅と高さとはみ出し字の指定 */ width:128px; height:128px; overflow:hidden; } .rss-title{ /* アニメーションのためのトランジション */ transition:all 0.5s; /* 画像にかぶせる */ position:relative; top:-129px; /* 透明度を0に */ opacity:0; /* 背景と文字色 */ background:rgba(0,0,0,0.8); color:white; } .rss-box:hover .rss-title{ /* 透明度を1に */ opacity:1; } // forked from Kakushi's "RSS取得テスト その2" http://jsdo.it/Kakushi/qirU // forked from Kakushi's "RSS取得テスト" http://jsdo.it/Kakushi/6gJ2 google.load("feeds", "1"); function initialize() { //Google Apiの読み込み完了 //ロードボタンにイベント指定 document.getElementById("load").addEventListener("click",loadRss); //あらかじめ読み込む loadRss(); } //コールバックの指定 google.setOnLoadCallback(initialize); function loadRss(){ //RSSロード用の関数 //URLにテキストボックス内の値を指定 var feedurl=document.getElementById("url").value; //ロード var feed = new google.feeds.Feed(feedurl); //記事数 feed.setNumEntries(10); feed.load(function (result){ //ロード完了 if (!result.error){ //エラーは起きず //フィード表示要素を空に $("#feed").empty(); for (var i = 0; i < result.feed.entries.length; i++) { //記事一個一個について var entry = result.feed.entries[i]; //イメージhtmlの入れ物 var img = ""; //見出し文内のイメージ要素のパスを探す var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))"/); if(imgCheck){ //始めの画像を表示 img="<img class='rss-image' "+imgCheck[0]+">"; }else{ //画像がないのでタイトル入れとく img="<div class='rss-image'>"+entry.title+"</div>"; } //記事表示用の箱 var box=$("<a class='rss-box' href='"+entry.link+"'></a>") //アニメーション用に布石 .css({height:0}); //イメージ入れとく box.append(img) //&マウスホバー時のタイトル .append("<div class='rss-title'>"+entry.title+"<div>"); /* //タイトル、見出し、日付 var title = '<li><h3>' + entry.title + '</h3></li>'; var conte = '<li>' + entry.contentSnippet + '</li>'; var dates = '<li>' + (new Date(entry.publishedDate)) + '</li>'; */ //表示 $('#feed').append(box); //アニメーション box.delay(i*100).queue(function(){ $(this).css({height:"128px"}); }); } } }); } <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div> <input type="text" id="url" value="http://feeds.gizmodo.jp/rss/gizmodo/index.xml"><input type="button" id="load" value="load"> </div> <p id="feed"> </p> * { margin: 0; padding: 0; border: 0; } body { background: #dff; font: 15px sans-serif; } input[type="button"]{ /*見やすくする*/ padding:0px 2px; border:#aaa 3px outset; border-radius:2px; background:#ccc; } input[type="button"]:active{ /*押されたときの*/ border:#aaa 3px inset; background:#888; } .rss-box , .rss-image , .rss-title{ /* アニメーションのためのトランジション */ transition:all 0.5s; /* a要素があるので */ display:inline-block; /* 幅と高さとはみ出し字の指定 */ width:128px; height:128px; overflow:hidden; } .rss-title{ /* アニメーションのためのトランジション */ transition:all 0.5s; /* 画像にかぶせる */ position:relative; top:-129px; /* 透明度を0に */ opacity:0; /* 背景と文字色 */ background:rgba(0,0,0,0.8); color:white; } .rss-box:hover .rss-title{ /* 透明度を1に */ opacity:1; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Kakushi 最近はcanvasのimagedata系のいじりが多いです 大作よりも小さな作品をちょこちょこだす感じです Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/m1yA/js"></script> application art&design css html5_elements&api library&test rss smartphones&tablets Discussion Questions on this code? Tags application art&design css html5_elements&api library&test rss smartphones&tablets Forked sort by latest page views favorite forked RSS取得テスト その4 Kakushi 10 1045 90/7/109 application art&design css html5_elements&api library&test rss smartphones&tablets
