add more UI tunning

2026-08-09 04:56:25 +10:00 · 2011-05-24 22:02:00 +08:00
parent 5d3e306155
commit 10b6f5f548
2 changed files with 66 additions and 18 deletions
@@ -4,14 +4,44 @@ body {
  text-shadow: 0px 1px 1px #111;
  color: #fff;
  font-family: "Lucida Grande";
+  overflow: hidden;
+}
+
+a {
+  text-decoration: none;
+  color: #fff;
 }

 #container {
  margin: 0 auto;
  width: 70%;
-  margin-top: 10%;
+  margin-top: 6%;
+  position: relative;
 }

 article {
-  font-size: 40px;
+  font-size: 36px;
+  width: 100%;
+  position: absolute;
+  -webkit-box-reflect: below 1px 
+  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to(white));
+}
+
+article img {
+  float: left;
+}
+
+.hide {
+  left: -3000px;
+  -webkit-transition-property: left;
+  -webkit-transition-duration: 2s;
+}
+
+.right {
+  margin-left: 500px;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
 }
@@ -11,11 +11,17 @@
  <body>
    
    <div id="container">
-      <header></header>
      <div id="main" role="main">
        
-        <article>
-          <h2>正在加载⋯⋯</h2>
+        <article id="a1">
+          <span class="from"></span>
+          <h2></h2>
+          <div class="content"></div>
+        </article>
+        
+        <article id="a2" class="hide">
+          <span class="from"></span>
+          <h2></h2>
          <div class="content"></div>
        </article>
        
@@ -32,31 +38,43 @@
      google.load("feeds", 1);
      var entries = [];
      var lastIndex = 0;
-      $(function(){
-        var feed = new google.feeds.Feed("http://cn.engadget.com/rss.xml");
-        feed.setNumEntries(250);
+      var lastShow = "#a0";
+      
+      function loadFeeds() {
+        loadFeed("http://cn.engadget.com/rss.xml");
+        loadFeed("http://news.ycombinator.com/rss");
+      }
+      
+      function loadFeed(url) {
+        var feed = new google.feeds.Feed(url);
+        feed.setNumEntries(50);
        feed.includeHistoricalEntries();
        feed.load(function(result) {
          if (!result.error) {
-            entries = result.feed.entries;
-            /* var container = $("#feed");
-            for (var i = 0; i < result.feed.entries.length; i++) {
-              var entry = result.feed.entries[i];
-              $(container).append("<div>"+entry.title+"</div>");
-              $(container).append("<div>"+entry.content.substring(0, 100)+"...</div>");
-              
-            }*/
+            es = result.feed.entries;
+            for (var i = 0; i < es.length; i++) {
+              entries.push(es[i]);
+            }
          }
        });
+      }
+      
+      $(function(){
+        loadFeeds();
      })
+      
      setInterval(function() {
        if (entries.length > 0) {
          if (lastIndex >= entries.length) {
            lastIndex = 0;
          }
          var e = entries[lastIndex++];
-          $("article").children("h2").text(e.title);
-          $(".content").html(e.content);
+          $(lastShow).addClass("hide");
+          var thisShow = (lastShow == "#a1" ? "#a2" : "#a1");
+          $(thisShow).children("h2").text(e.title);
+          $(thisShow).children(".content").html(e.content.substring(0, 250) + "...");
+          $(thisShow).removeClass("hide");
+          lastShow = thisShow;
        }
      }, 1000*5)
    </script>