Lee
/
lwwlgw
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

前端样式完成

master
Lee-1203 2022-03-31 14:01:07 +08:00
parent ed395e61ef
commit c0ee887915
6 changed files with 84 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
about.html
View File

@ -66,22 +66,22 @@
</div> </div>
</div> </div>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="pull-current-bg w100">
<div class="pull-current w1280"> <div class="pull-current w1280">
<div class="point"> <div class="point">
<img src="images/home.png" alt="当前位置"> <img src="images/home.png" alt="当前位置">
<p>当前位置：<a href="/">首页</a>-关于我们</p> <p>当前位置：<a href="/">首页</a>-关于我们</p>
</div> </div>
<div class="nav-item"> <div class="nav-item about-nav">
<a href="" class="active">公司简介</a> <a href="javascript:void(0);" rel="nofollow" class="about-btn active">公司简介</a>
<a href="">大事件</a> <a href="javascript:void(0);" rel="nofollow" class="memorabilia-btn">大事件</a>
<a href="">加入我们</a> <a href="javascript:void(0);" rel="nofollow" class="join-btn">加入我们</a>
<a href="">联系我们</a> <a href="javascript:void(0);" rel="nofollow" class="contact-btn">联系我们</a>
</div> </div>
</div> </div>
</div> </div>
<!-- 公司介绍 --> <!-- 公司介绍 -->
<div class="about-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="about-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0" id="about">
<div class="about w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="about w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
<div class="about-txt wow fadeInLeft" data-wow-duration=".8s" data-wow-delay="0"> <div class="about-txt wow fadeInLeft" data-wow-duration=".8s" data-wow-delay="0">
<strong>公司介绍</strong> <strong>公司介绍</strong>
@ -95,9 +95,9 @@
</div> </div>
<!-- 大事件 --> <!-- 大事件 -->
<div class="memorabilia-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="memorabilia-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0" id="memorabilia">
<div class="index-title pull-title w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="index-title pull-title w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
<h2>产品中心</h2> <h2>公司大事件</h2>
<span>科技创新<ins></ins>引领数据</span> <span>科技创新<ins></ins>引领数据</span>
</div> </div>
<div class="memorabilia w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="memorabilia w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
@ -231,7 +231,7 @@
</div> </div>
<!-- 加入我们 --> <!-- 加入我们 -->
<div class="join-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="join-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0" id="join">
<div class="join-list wow fadeInLeft" data-wow-duration=".8s" data-wow-delay="0"> <div class="join-list wow fadeInLeft" data-wow-duration=".8s" data-wow-delay="0">
<!-- 职位列表 --> <!-- 职位列表 -->
<div class="join-thumbnail-bg"> <div class="join-thumbnail-bg">
@ -471,7 +471,7 @@
</div> </div>
</div> </div>
<!-- 联系我们 --> <!-- 联系我们 -->
<div class="contact-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="contact-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0" id="contact">
<div class="contact w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="contact w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
<ul class="contact-list"> <ul class="contact-list">
<li class="wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <li class="wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
@ -582,4 +582,29 @@
</div> </div>
</div> </div>
</body> </body>
<script type="text/javascript">
let aboutTop = $(".about-bg").offset().top-85;
let memorabiliaTop = $(".memorabilia-bg").offset().top-85;
let joinTop = $(".join-bg").offset().top-85;
let contactTop = $(".contact-bg").offset().top-85;
$(window).bind("scroll",function(){
let topScroll=$(this).scrollTop();//当前窗口的滚动距离
if(topScroll > aboutTop){
$(".about-nav>a").removeClass("active");
$(".about-btn").addClass("active");
}
if(topScroll > aboutTop && topScroll > memorabiliaTop){
$(".about-nav>a").removeClass("active");
$(".memorabilia-btn").addClass("active");
}
if(topScroll > aboutTop && topScroll > memorabiliaTop && topScroll > joinTop){
$(".about-nav>a").removeClass("active");
$(".join-btn").addClass("active");
}
if(topScroll > aboutTop && topScroll > memorabiliaTop && topScroll > joinTop && topScroll > contactTop){
$(".about-nav>a").removeClass("active");
$(".contact-btn").addClass("active");
}
});
</script>
</html> </html>

21
js/javascript.js
View File

@ -116,6 +116,27 @@ jQuery(function($){
$(this).addClass("active"); $(this).addClass("active");
}); });
// 关于我们锚点
$('.about-btn').click(function(){
$('html,body').animate({scrollTop:$('.about-bg').offset().top - 85}, 1000);
$('.about-nav>a').removeClass("active");
$(this).addClass("active");
});
$('.memorabilia-btn').click(function(){
$('html,body').animate({scrollTop:$('.memorabilia-bg').offset().top - 85}, 1000);
$('.about-nav>a').removeClass("active");
$(this).addClass("active");
});
$('.join-btn').click(function(){
$('html,body').animate({scrollTop:$('.join-bg').offset().top - 85}, 1000);
$('.about-nav>a').removeClass("active");
$(this).addClass("active");
});
$('.contact-btn').click(function(){
$('html,body').animate({scrollTop:$('.contact-bg').offset().top - 85}, 1000);
$('.about-nav>a').removeClass("active");
$(this).addClass("active");
});
// 大事件滚动 // 大事件滚动
var memorabiliaThumbnailSwiper = new Swiper('.memorabilia-thumbnail-swiper',{ var memorabiliaThumbnailSwiper = new Swiper('.memorabilia-thumbnail-swiper',{

28
product.html
View File

@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="pull-current-bg w100">
<div class="pull-current w1280"> <div class="pull-current w1280">
<div class="point"> <div class="point">
<img src="images/home.png" alt="当前位置"> <img src="images/home.png" alt="当前位置">
@ -94,9 +94,9 @@
</div> </div>
<!-- 左侧边栏 --> <!-- 左侧边栏 -->
<div class="side-left"> <div class="side-left">
<a href="#introduce" class="introduce-btn active">产品简介</a> <a href="javascript:void(0);" rel="nofollow" class="introduce-btn active">产品简介</a>
<a href="#scene" class="scene-btn">应用场景</a> <a href="javascript:void(0);" rel="nofollow" class="scene-btn">应用场景</a>
<a href="#case" class="case-btn">案例展示</a> <a href="javascript:void(0);" rel="nofollow" class="case-btn">案例展示</a>
</div> </div>
</div> </div>
@ -462,4 +462,24 @@
</div> </div>
</div> </div>
</body> </body>
<script type="text/javascript">
let introduceTop = $(".product-introduce-bg").offset().top-85;
let sceneTop = $(".product-scene-bg").offset().top-85;
let caseTop = $(".product-case-bg").offset().top-85;
$(window).bind("scroll",function(){
let topScroll=$(this).scrollTop();//当前窗口的滚动距离
if(topScroll > introduceTop){
$(".side-left>a").removeClass("active");
$(".introduce-btn").addClass("active");
}
if(topScroll > introduceTop && topScroll > sceneTop){
$(".side-left>a").removeClass("active");
$(".scene-btn").addClass("active");
}
if(topScroll > introduceTop && topScroll > sceneTop && topScroll > caseTop){
$(".side-left>a").removeClass("active");
$(".case-btn").addClass("active");
}
});
</script>
</html> </html>

2
service-yfw.html
View File

@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="pull-current-bg w100">
<div class="pull-current w1280"> <div class="pull-current w1280">
<div class="point"> <div class="point">
<img src="images/home.png" alt="当前位置"> <img src="images/home.png" alt="当前位置">

2
service-ywfw.html
View File

@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="pull-current-bg w100">
<div class="pull-current w1280"> <div class="pull-current w1280">
<div class="point"> <div class="point">
<img src="images/home.png" alt="当前位置"> <img src="images/home.png" alt="当前位置">

2
service-zxfw.html
View File

@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0"> <div class="pull-current-bg w100">
<div class="pull-current w1280"> <div class="pull-current w1280">
<div class="point"> <div class="point">
<img src="images/home.png" alt="当前位置"> <img src="images/home.png" alt="当前位置">