Merge pull request #4 from TopVitamin/master

fetch upstream force
TopVitamin · Mar 15, 2022 · cd7c65e · cd7c65e
2 parents 6c5e6f8 + 735e776
commit cd7c65e
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -63,7 +63,7 @@
         </ul>
         <!--  搜索结果 end -->
       </div>
-      <input class="search-submit" value="" id="search_submit" type="submit">
+      <input class="search-submit" value="寻一下" id="search_submit" type="submit">
     </div>
     <!-- 搜索框 end -->
 
@@ -94,7 +94,7 @@
           <li><a href="https://www.douban.com/" class="jj-list-link" target="_blank">豆瓣</a></li>
           <li><a href="http://www.woshipm.com/" class="jj-list-link" target="_blank">产品经理</a></li>
           <li><a href="http://www.chanpin100.com/" class="jj-list-link" target="_blank">产品壹佰</a></li>
-          <li><a href="http://someword.me/" class="jj-list-link" target="_blank">只言片语</a></li>
+          <li><a href="http://pm.budong.me/" class="jj-list-link" target="_blank">只言片语</a></li>
         </ul>
       </div>
       <div class="jj-list">
@@ -121,7 +121,7 @@
           <li><a href="https://www.163.com/" class="jj-list-link" target="_blank">网易</a></li>						
           <li><a href="https://sspai.com/" class="jj-list-link" target="_blank">少数派</a></li>
           <li><a href="http://ac.scmor.com/" class="jj-list-link" target="_blank">谷歌镜像</a></li>
-          <li><a href="https://youquhome.com/" class="jj-list-link" target="_blank">GitHub</a></li>
+          <li><a href="http://crud.budong.me/" class="jj-list-link" target="_blank">小仙女博客</a></li>
           <li><a href="https://coding.net/" class="jj-list-link" target="_blank">Coding</a></li>
           <li><a href="https://www.coolist.net/" class="jj-list-link" target="_blank">酷软清单</a></li>
         </ul>
@@ -166,7 +166,7 @@
   <p>
    <a href="https://github.com/TopVitamin/static-nav" target="_blank"> <img src="./static/css/img/github.png" alt="" height="20" width="20"></a>
   </p>
-  <p style="margin-top:8px;"> <a href="http://someword.me" style="color:#8C8C8C;" target="_blank">Copyright © 2019 Hosted by 只言片语</a></p>
+  <p style="margin-top:8px;"> <a href="http://pm.budong.me/" style="color:#8C8C8C;" target="_blank">Copyright © 2019 Hosted by 只言片语</a></p>
 
 </footer>
 <script src="./static/js/jquery.min.js"></script>

diff --git a/static/css/style.css b/static/css/style.css
@@ -226,15 +226,22 @@ textarea {
     width: 123px;
     height: 54px;
     line-height: 26px;
-    background: url("./img/search.png") #1890ff 48px center no-repeat;
+    /* background: url("./img/search.png") #1890ff 48px center no-repeat; */
+    background-color: #1890FF;
+    /* background-image: url("./img/search.png"); 
+    background-size: 48px; */
+    background-repeat: no-repeat;
+    background-position: center;
     -webkit-background-size: 35px 35px;
     background-size: 35px 35px;
     color: #fff;
     font-size: 18px;
+    font-weight: 500;
     text-align: center;
     font-family: Roboto;
     border: 1px solid #1890ff;
     cursor: pointer;
+    background: linear-gradient(90deg,#1890FF,#455bfb);
 }
 
 /* 搜索框 end */
@@ -274,8 +281,41 @@ textarea {
     padding: 1px 1px; /*设置div的内边距*/
     width: 33.33%; /*div等分成4部分*/
     float: left;
+    transform-origin: center top;
 }
 
+.jj-list-con li:hover {
+    animation: swing 2s linear 0s 1 forwards
+}
+@keyframes swing {
+    0%, 100% {
+        transform: perspective(200px) rotateX(0);
+    }
+    20% {
+        transform: perspective(200px) rotateX(-45deg);
+    }
+    40% {
+        transform: perspective(200px) rotateX(45deg);
+    }
+    50% {
+        transform: perspective(200px) rotateX(-25deg);
+    }
+    60% {
+        transform: perspective(200px) rotateX(25deg);
+    }
+    70% {
+        transform: perspective(200px) rotateX(-5deg);
+    }
+    80% {
+        transform: perspective(200px) rotateX(5deg);
+    }
+    90% {
+        transform: perspective(200px) rotateX(-3deg);
+    }
+    95% {
+        transform: perspective(200px) rotateX(3deg);
+    }
+}
 
 .jj-list-link {
     display: block;

diff --git a/static/js/keyword.js b/static/js/keyword.js
@@ -47,8 +47,7 @@ $(function () {
   var EVENT_SEARCH = 'search';
   // 关键词搜索输入
   $('#search_keyword').on('keyup', function (event) {
-    var $keyword = $(this);
-    var keyword = $keyword.val();
+    var keyword = $(this).val();
     if(event.which==13){
     	if($('#search_result .active').length>0){
     		keyword = $('#search_result .active').eq(0).text();
@@ -61,8 +60,18 @@ $(function () {
     if(bl){
     	keywordChange(keyword);
     }
-  }).on('blur', function () {
+  }).on('blur', function () { 
+  // 推荐结果跳转
+  $('#search_result').on('click', 'li', function () {
+    var word = $(this).text();
+    $('#search_keyword').val(word);
+    openSearch(word);
+    $('#search_result').hide();
+  });
+  // 解决失焦和点击事件冲突问题
+  setTimeout(function() {
     $('#search_result').hide();
+  }, 100)
   }).on('focus', function () {
     var keyword = $(this).val();
     keywordChange(keyword);
@@ -105,7 +114,8 @@ $(function () {
 	  	}
   	}
   	search_result.find('.active').removeClass('active');
-  	search_result.find('.result-item').eq(hove_li).addClass('active');
+    search_result.find('.result-item').eq(hove_li).addClass('active');
+    $('#search_keyword').val(search_result.find('.result-item').eq(hove_li).addClass('active').text());
   }
 
   function keywordChange(keyword) {
@@ -148,15 +158,6 @@ $(function () {
     }
   });
 
-
-  // 推荐结果跳转
-  $('#search_result').on('click', 'li', function () {
-    var word = $(this).text();
-    $('#search_keyword').val(word);
-    openSearch(word);
-    $('#search_result').hide();
-  });
-
   $(document).on(EVENT_CLEAR_KEYWORD, function () {
     $('#clear_keyword').hide();
     $('#search_result').hide();
@@ -256,7 +257,7 @@ $(function () {
       return item.type === type;
     });
     if (baseUrl && keyword) {
-      window.open(baseUrl.url + keyword);
+      window.open(baseUrl.url + keyword, keyword);
     }
   }
 });