作者 景龙
1 个管道 的构建 通过 耗费 2 秒

修改首页星球奇境下滑效果

@@ -20,12 +20,18 @@ @@ -20,12 +20,18 @@
20 </head> 20 </head>
21 21
22 <body> 22 <body>
  23 + <!-- 侧边 -->
  24 + <div class="index_sidebar">
  25 + <img src="__TMPL__/public/assets/starImg/aicon_24.png" alt="">
  26 + <img class="index_scrollTop" src="__TMPL__/public/assets/starImg/aicon_25.png" alt="">
  27 + </div>
23 <!-- 头部 --> 28 <!-- 头部 -->
24 <include file="public@header"/> 29 <include file="public@header"/>
25 <!-- banner --> 30 <!-- banner -->
26 <div id="banner"> 31 <div id="banner">
27 <img src="__TMPL__/public/assets/starImg/aicon_01.png" alt=""> 32 <img src="__TMPL__/public/assets/starImg/aicon_01.png" alt="">
28 </div> 33 </div>
  34 +
29 <!-- 首页主体内容 --> 35 <!-- 首页主体内容 -->
30 <div id="star_main"> 36 <div id="star_main">
31 <!-- 星球奇境 --> 37 <!-- 星球奇境 -->
@@ -717,14 +723,28 @@ @@ -717,14 +723,28 @@
717 <script src="__TMPL__/public/assets/js/swiper4/swiper.min.js"></script> 723 <script src="__TMPL__/public/assets/js/swiper4/swiper.min.js"></script>
718 <script src="__TMPL__/public/assets/js/public.js"></script> 724 <script src="__TMPL__/public/assets/js/public.js"></script>
719 <script> 725 <script>
  726 + // 点击返回头部
  727 + $(window).scroll(function() {
  728 + if ($(window).scrollTop() > 2000) {
  729 + $('.index_scrollTop').fadeIn();
  730 + } else {
  731 + $('.index_scrollTop').fadeOut();
  732 + }
  733 + })
  734 + $('.index_scrollTop').click(function() {
  735 + $('html,body').animate({
  736 + scrollTop: 0
  737 + }, 'slow')
  738 + });
  739 +
720 // 星球奇景 740 // 星球奇景
721 - $('.africa p,.asia p,.north p,.south p,.antarctica p,.europe p,.oceania p').click(function() {  
722 - if ($(this).prev('img').attr('src') == "__TMPL__/public/assets/starImg/aicon_41.png") {  
723 - $(this).prev('img').attr('src', "__TMPL__/public/assets/starImg/aicon_42.png");  
724 - $(this).next('ul').show(); 741 + $('.star_happy em').hover(function() {
  742 + if ($(this).children('img').attr('src') == "__TMPL__/public/assets/starImg/aicon_41.png") {
  743 + $(this).children('img').attr('src', "__TMPL__/public/assets/starImg/aicon_42.png");
  744 + $(this).children('.star_happy_box').show();
725 } else { 745 } else {
726 - $(this).prev('img').attr('src', "__TMPL__/public/assets/starImg/aicon_41.png");  
727 - $(this).next('ul').hide(); 746 + $(this).children('img').attr('src', "__TMPL__/public/assets/starImg/aicon_41.png");
  747 + $(this).children('.star_happy_box').hide();
728 } 748 }
729 }); 749 });
730 // tab切换 750 // tab切换
@@ -94,7 +94,23 @@ p { @@ -94,7 +94,23 @@ p {
94 } 94 }
95 } 95 }
96 96
  97 +.index_sidebar {
  98 + width: 80px;
  99 + z-index: 10;
  100 + position: fixed;
  101 + right: 59px;
  102 + top: 500px;
  103 +}
97 104
  105 +.index_sidebar img {
  106 + width: 80px;
  107 + cursor: pointer;
  108 + margin-bottom: 40px;
  109 +}
  110 +
  111 +.index_scrollTop {
  112 + display: none;
  113 +}
98 /* 主体内容 */ 114 /* 主体内容 */
99 115
100 #star_main { 116 #star_main {
@@ -158,12 +174,14 @@ p { @@ -158,12 +174,14 @@ p {
158 font-size: 14px; 174 font-size: 14px;
159 font-weight: bold; 175 font-weight: bold;
160 width: 66px; 176 width: 66px;
161 - height: 20px; 177 + height:32px;
162 cursor: pointer; 178 cursor: pointer;
163 display: inline-block; 179 display: inline-block;
164 position: absolute; 180 position: absolute;
165 } 181 }
166 - 182 +/*#star_main .star_happy em:hover .star_happy_box{*/
  183 + /*display: block;*/
  184 +/*}*/
167 #star_main .star_happy em img, 185 #star_main .star_happy em img,
168 #star_main .star_happy em p { 186 #star_main .star_happy em p {
169 float: left 187 float: left
@@ -220,10 +238,10 @@ p { @@ -220,10 +238,10 @@ p {
220 } 238 }
221 239
222 .star_happy_box { 240 .star_happy_box {
223 - position: relative; 241 + position: absolute;
224 z-index: 1; 242 z-index: 1;
225 width: 125px; 243 width: 125px;
226 - margin-top: 32px; 244 + top: 32px;
227 display: none; 245 display: none;
228 text-align: left; 246 text-align: left;
229 font-size: 14px; 247 font-size: 14px;