删除：删除imageview，存在bug;修改：CSS样式，js变量名称;新增：js注释。

Lruihao · Nov 25, 2019 · 1bb8405 · 1bb8405
1 parent ce339bc
commit 1bb8405
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/cos-album.css b/cos-album.css
@@ -1,4 +1,4 @@
-/**
+/**
  * album
  */
 .photoBox{
@@ -25,10 +25,15 @@
   height: 300px;
   margin-top: 15px;
 }
-.photo img{
+.photo>img{
   width: 100%;
   height: 216.3px;
   margin-bottom: 15px;
+  border-radius: 10px;
+}
+.photo img:hover{
+  transform: scale(1.05);
+  transition: all 1s;
 }
 .photo>span{
   display: block;
@@ -78,24 +83,36 @@
   margin: auto;
 }
 .btn-more:hover{
+  background: rgba(255,255,255,0.15);
+}
+.btn-more:active{
   background: rgba(255,255,255,0.05);
   transform: scale(0.99);
   transition: all 0.15s;
 }
 
+/**
+ * common
+ */
 body{
   margin: 0;
   padding: 0;
   background: #121212;
 }
-
-/**
- * common
- */
 .album-comments{
   width: 60%;
   margin: auto;
 }
+footer{
+  color: #999;
+  text-align: center;
+  margin: 20px;
+}
+footer>a{
+  color: #555;
+  text-decoration: none;
+}
+
 
 /**
  * mobile
@@ -108,13 +125,13 @@ body{
   .cover{
     height: 250px;
   }
-  .title {
+  .title{
     padding: 15px;
     font-size: 2rem;
   }
-  .btn-more {
+  .btn-more{
     width: 130px;
     padding: 10px;
     font-size: 1.5rem;
   }
-}
+}
diff --git a/cos-album.js b/cos-album.js
@@ -1,19 +1,20 @@
-//需要解析的騰訊云COS桶XML鏈接
-let xmlLink = "https://img-xxxxxx.cos.ap-chengdu.myqcloud.com";
-//添加相册到指定节点下，如: ".myalbum","#myalbum"，默认"body"
-let appendTo = "";
+//需要解析的騰訊云COS桶XML鏈接
+let xmlLink = "https://img-xxxxxxxx.cos.ap-chengdu.myqcloud.com";
+//可選解析相冊到某個節點,e.g. ".myalbum","#myalbum",默认"body"
+let prependTo = "";
 //顯示數目,整數
 let showNum = 8; 
-renderDom(xmlLink,appendTo);
+renderDom(xmlLink,prependTo);
 
 /**
  * 渲染DOM
  * @param {String} xmlLink 需要解析的騰訊云COS桶XML鏈接
+ * @param {String} prependTo 可選解析相冊到某個節點
  */
-function renderDom(xmlLink, appendTo){
+function renderDom(xmlLink, prependTo){
   let content = getContent(xmlLink);
   let cosAlbum = document.createElement("div");
-  let insert = document.querySelector(appendTo || "body");
+  let insert = document.querySelector(prependTo || "body");
   cosAlbum.className = "cos-album";
   for (let i = 0; i < content.length; i++) {
     //相册与封面
@@ -163,4 +164,4 @@ function moreClick(obj, contentX, xmlLink) {
   if(contentX.length  > num + showNum){
     photoBox.appendChild(obj.parentNode);
   }
-}
+}
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html>
   <head>
@@ -10,20 +11,24 @@
   </head>
   <body>
     <div class="album-comments"></div>
+    <footer>
+      © 2019
+      <a href="https://lruihao.cn" target="_blank">lruihao.cn</a> -
+      <a href="https://github.com/Lruihao/cos-album" target="_blank">Github</a>
+    </footer>
     <script>
       new Valine({
         el: '.album-comments',
         verify: false,
         notify: false,
-        appId: 'xxxxxxxxxxxxxxx',
-        appKey: 'xxxxxxxxxxxxxxx',
+        appId: 'xxxxxxxxxxxxxxxxxxxxxx',
+        appKey: 'xxxxxxxxxxxxxxxxxxxxxx',
         placeholder: 'just go go',
         avatar: 'wavatar',
         pageSize: 10,
         lang: 'zh-cn'
       });
     </script>
     <script type="text/javascript" src="cos-album.js"></script>
-    <script type="text/javascript" src="https://image.idealli.com/photoshow.js"></script>
   </body>
 </html>