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

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

... ... @@ -20,12 +20,18 @@
</head>
<body>
<!-- 侧边 -->
<div class="index_sidebar">
<img src="__TMPL__/public/assets/starImg/aicon_24.png" alt="">
<img class="index_scrollTop" src="__TMPL__/public/assets/starImg/aicon_25.png" alt="">
</div>
<!-- 头部 -->
<include file="public@header"/>
<!-- banner -->
<div id="banner">
<img src="__TMPL__/public/assets/starImg/aicon_01.png" alt="">
</div>
<!-- 首页主体内容 -->
<div id="star_main">
<!-- 星球奇境 -->
... ... @@ -717,14 +723,28 @@
<script src="__TMPL__/public/assets/js/swiper4/swiper.min.js"></script>
<script src="__TMPL__/public/assets/js/public.js"></script>
<script>
// 点击返回头部
$(window).scroll(function() {
if ($(window).scrollTop() > 2000) {
$('.index_scrollTop').fadeIn();
} else {
$('.index_scrollTop').fadeOut();
}
})
$('.index_scrollTop').click(function() {
$('html,body').animate({
scrollTop: 0
}, 'slow')
});
// 星球奇景
$('.africa p,.asia p,.north p,.south p,.antarctica p,.europe p,.oceania p').click(function() {
if ($(this).prev('img').attr('src') == "__TMPL__/public/assets/starImg/aicon_41.png") {
$(this).prev('img').attr('src', "__TMPL__/public/assets/starImg/aicon_42.png");
$(this).next('ul').show();
$('.star_happy em').hover(function() {
if ($(this).children('img').attr('src') == "__TMPL__/public/assets/starImg/aicon_41.png") {
$(this).children('img').attr('src', "__TMPL__/public/assets/starImg/aicon_42.png");
$(this).children('.star_happy_box').show();
} else {
$(this).prev('img').attr('src', "__TMPL__/public/assets/starImg/aicon_41.png");
$(this).next('ul').hide();
$(this).children('img').attr('src', "__TMPL__/public/assets/starImg/aicon_41.png");
$(this).children('.star_happy_box').hide();
}
});
// tab切换
... ...
... ... @@ -94,7 +94,23 @@ p {
}
}
.index_sidebar {
width: 80px;
z-index: 10;
position: fixed;
right: 59px;
top: 500px;
}
.index_sidebar img {
width: 80px;
cursor: pointer;
margin-bottom: 40px;
}
.index_scrollTop {
display: none;
}
/* 主体内容 */
#star_main {
... ... @@ -158,12 +174,14 @@ p {
font-size: 14px;
font-weight: bold;
width: 66px;
height: 20px;
height:32px;
cursor: pointer;
display: inline-block;
position: absolute;
}
/*#star_main .star_happy em:hover .star_happy_box{*/
/*display: block;*/
/*}*/
#star_main .star_happy em img,
#star_main .star_happy em p {
float: left
... ... @@ -220,10 +238,10 @@ p {
}
.star_happy_box {
position: relative;
position: absolute;
z-index: 1;
width: 125px;
margin-top: 32px;
top: 32px;
display: none;
text-align: left;
font-size: 14px;
... ...