Skip to content

T
test
提交 fd48ca39 作者: 刘贵生
操作

更改导航样式

上级 6854e4bb
正在显示 包含 292 行增加 和 163 行删除
css/index.css
......@@ -943,11 +943,11 @@
/* 发展历程 */
#cours{
height:800px;
margin-top:120px;
background: url('../images/cours_img.jpg') no-repeat center;
}
#cours .cours_content{
position: relative;
margin-top:120px;
}
#cours .cours_content div{
position: absolute;
......
css/join_us.css
......@@ -221,14 +221,14 @@
width:760px;
height:2px;
border-bottom:1px dotted #cecdcd;
z-index: 999;
z-index: 98;
}
.partner_flow div{
position: absolute;
left:50%;
margin-left:-413px;
z-index: 1000;
z-index: 99;
}
.partner_flow .flow_number{
width:778px;
......@@ -264,9 +264,10 @@
#qj_map .map {
margin-top: 60px;
width: 100%;
overflow: hidden;
}
#qj_map .map img {
width: 100%;
display: block;
}
/* 底部 */
footer {
......
css/qj_show.css
@charset "utf-8";
/* 固定锚点导航 */
#show_sidebar{
position: fixed;
left:87px;
left:40px;
bottom:250px;
height:30%;
z-index:999;
}
#show_sidebar div{
position: relative;
width:11px;
height:11px;
margin-bottom:38px;
margin-bottom:27px;
border-radius: 50%;
background:#808080;
}
#show_sidebar div::after{
position: absolute;
top:0px;
top:7px;
left:4.5px;
content:"";
width: 2px;
width: 1px;
height:195px;
padding-bottom:11px;
background: #808080;
}
#show_sidebar li{
#show_sidebar a{
position: relative;
display: block;
text-decoration: none;
font-size: 12px;
color:#808080;
margin:0px 0px 27px 34px;
}
#show_sidebar li::before{
#show_sidebar a::before{
position: absolute;
left:-32px;
top:50%;
margin-top:-3.5px;
content:'';
display: block;
display: inline-block;
width:7px;
height:7px;
border-radius: 50%;
......@@ -39,9 +52,13 @@
background:#b3b3b3;
}
#show_sidebar .li_click{
color:#24b298;
}
#show_sidebar .li_click::before{
left:-33px;
width:9px;
height:9px;
color:#24b298;
background:#24b298;
}
#show_sidebar div{
width:11px;
......@@ -92,7 +109,7 @@ header {
/* 视差内容1 */
#content3 .team {
background-color: #fff;
box-shadow: 0 0 20px rgb(228, 219, 219);
box-shadow: 0 0 20px rgba(0, 0, 0 , .15);
position: relative;
}
#content3 .team1{
......@@ -197,18 +214,22 @@ header {
#content3 .team2 .team_msg h1 {
margin-top:175px;
}
#content3 .team4 .team_msg,
#content3 .team2 .team_msg {
margin-right: 107px;
margin: 0px 107px 0px 0px;
text-align: right;
}
/* 团队介绍 */
#content3 .team2 .team_msg .team_int{
#content3 .team2 .team_msg .team_int,
#content3 .team4 .team_msg .team_int{
margin: 40px 42px 0px 0px;
}
#content3 .team2 .team_int span::before{
#content3 .team2 .team_int span::before,
#content3 .team4 .team_int span::before{
display: none;
}
#content3 .team2 .team_int span::after {
#content3 .team2 .team_int span::after,
#content3 .team4 .team_int span::after{
position: absolute;
top:0px;
right:-34px;
......@@ -223,9 +244,14 @@ header {
#content3 .team2 .team_msg .line {
left: 227px;
}
#content3 .team2,
#content3 .team3{
margin-top:135px;
#content3 .team4 .team_msg .line {
left: 301px;
}
#content3 .team{
margin-bottom:135px;
}
#content3 .team:last-of-type{
margin-bottom:0px;
}
/* 新一中团队 */
#content3 .team3 .top_words .left_words {
......
css/reset.css
......@@ -265,16 +265,4 @@ button {
/* @font-face{
font-family: 'DIN Black';
src: url('../font/DIN-Black.otf')
} */
/* 去掉video controls的下载按钮 */
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
\ No newline at end of file
} */
\ No newline at end of file
index.html
......@@ -5,14 +5,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>唐山千家房产网</title>
<meta name="keywords" content="唐山房产,唐山房产网，唐山千家房地产"/>
<meta name="description" content="唐山千家房产网由唐山千家房地产经纪有限公司投资创办，是唐山最大的房地产企业,提供优质的购房体验.200多家线下门店,3000多位经纪人,强大的技术后台支撑,只为给您找到一个温暖的家." />
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<title>千家地产--企业站</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.3.1.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/banner.js"></script>
<script src='./js/index.js'></script>
</head>
<body>
......@@ -20,14 +22,14 @@
<a id="top" name="top"></a>
<header id="header">
<!-- 固定顶部导航 -->
<div id="top_nav">
<div id="top_nav" class="header_scroll">
<div class="main_body clear">
<a class="logo left" href="./index.html#top">
<img src="./images/brand_first.png" alt="" class="left">
<p class="left">千家地产</p>
</a>
<div class="nav right">
<a class="nav_first choosed" href="./index.html#top">首页</a>
<a class="nav_first" href="./index.html#top">首页</a>
<a href="#to_company">公司介绍</a>
<a href="#to_department">招贤纳士</a>
<a href="#to_cours">发展历程</a>
......@@ -688,11 +690,6 @@
<p>千家网络科技提供技术支持</p>
</footer>
</body>
<script src="./js/jquery-3.3.1.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/scroll_top.js"></script>
<script src="./js/banner.js"></script>
<script type="text/javascript" src="./js/wow.min.js"></script>
<script>
new WOW().init()
......
join_us.html
......@@ -4,14 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>唐山千家房产网--品牌加盟</title>
<meta name="keywords" content="唐山房产,唐山房产网，唐山千家房地产"/>
<meta name="description" content="唐山千家房产网由唐山千家房地产经纪有限公司投资创办，是唐山最大的房地产企业,提供优质的购房体验.200多家线下门店,3000多位经纪人,强大的技术后台支撑,只为给您找到一个温暖的家." />
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<title>品牌加盟</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/join_us.css">
<script type="text/javascript" src="./js/join_us.js"></script>
</head>
<body>
<!-- 固定导航 -->
......@@ -23,15 +21,41 @@
</a>
<div class="nav right">
<a class="nav_first" href="./index.html#top">首页</a>
<a href="#to_company">公司介绍</a>
<a href="#to_department">招贤纳士</a>
<a href="#to_cours">发展历程</a>
<a href="#to_product">产品服务</a>
<a href="./index.html#to_company">公司介绍</a>
<a href="./index.html#to_department">招贤纳士</a>
<a href="./index.html#to_cours">发展历程</a>
<a href="./index.html#to_product">产品服务</a>
<a href="./join_us.html" class="choosed">品牌加盟</a>
<a class="nav_last" href="qj_show.html">千家风采</a>
</div>
</div>
</div>
<!-- 侧边导航 -->
<nav id="sidebar">
<ul>
<li class="qr_code">
<span class="iconfont icon-erweima"></span>
</li>
<div class="sidebar_content code_img">
<img src="./images/office_accounts.jpg" alt="">
</div>
<li class="tel">
<span class="iconfont icon-37"></span>
<div class="sidebar_content">
<span class="iconfont icon-37"></span><span class="sidebar_num">0315-8080081</span>
</div>
</li>
<li class="qq">
<span class="iconfont icon-qq"></span>
<div class="sidebar_content">
<span class="iconfont icon-qq"></span><span class="sidebar_num">1536887725</span>
</div>
</li>
<li class="go_top">
<span class="iconfont icon-shangjiantouxiangshangxianxing"></span>
</li>
</ul>
</nav>
<!-- 海报 -->
<div id="poster">
<div class="poster_banner">
......@@ -155,5 +179,4 @@
<div class="support">千家网络科技提供技术</div>
</footer>
</body>
<script src="./js/join_us.js"></script>
</html>
\ No newline at end of file
js/banner.js
window.onload = function(){
// 刷新回到顶部
// setTimeout(() => window.scrollTo(0,0), 14)
// 鼠标滑动显示对应hash
function mouse_scroll( now_dom , now_hash ,last_dom){
var _dom = document.getElementById(now_dom);
var __dom= document.getElementById(last_dom);
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
let height = _dom.offsetTop - scrollTop
if (scrollTop > _dom.offsetTop && scrollTop < __dom.offsetTop){
window.location.hash = now_hash
}
}
// 导航点击
var nav = document.getElementsByClassName("nav")[0];
var click_a = nav.getElementsByTagName("a");
for(let i = 0 ; i < click_a.length ; i++){
click_a[i].index = i;
click_a[i].onclick = function(){
for(let a = 0 ; a < click_a.length ; a++){
click_a[a].classList.remove("choosed")
}
click_a[this.index].classList.add("choosed")
}
}
// 固定导航的显示隐藏
var scroll = function(){
let nav_height = document.getElementById("top_nav")
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
if(scrollTop > 0){
nav_height.classList.add('header_scroll')
}else{
nav_height.classList.remove('header_scroll')
window.location.hash="#top"
}
}
scroll()
window.onscroll = function(){
scroll()
}
// window.onscroll = function(){
// // 滚动条滚动 导航样式
// let nav = document.getElementsByClassName("nav")[0];
// let click_a = nav.getElementsByTagName("a");
// for(let i = 0 ; i < click_a.length ; i++){
// click_a[i].classList.remove("choosed")
// switch(window.location.hash){
// case '#top':
// click_a[0].classList.add("choosed")
// break;
// case '#to_company':
// click_a[1].classList.add("choosed")
// break;
// case '#to_department':
// click_a[2].classList.add("choosed")
// break;
// case '#to_cours':
// click_a[3].classList.add("choosed")
// break;
// case '#to_product':
// click_a[4].classList.add("choosed")
// break;
// }
// }
// scroll()
// switch(window.location.hash){
// case '#top':
// mouse_scroll('introduce','#to_company','department')
// break;
// case '#to_company':
// mouse_scroll('department','#to_department','cours')
// break;
// case '#to_department':
// mouse_scroll('cours','#to_cours','product_service')
// break;
// case '#to_cours':
// mouse_scroll('product_service','#to_product','footer')
// break;
// }
// }
// 侧边二维码
var qr_code = document.getElementsByClassName("qr_code")[0];
var code_img = this.document.getElementsByClassName("code_img")[0];
......@@ -118,23 +37,4 @@ window.onload = function(){
}
}
// 公司介绍品牌切换
// var first = document.getElementsByClassName("first_introduce")[0];
// var second = document.getElementsByClassName("second_introduce")[0];
// second.onclick = function () {
// this.style.right = "30px";
// this.style.animation = "smallBig .6s ease forwards";
// this.style.zIndex = "5";
// first.style.left = "-30px";
// first.style.zIndex = "4";
// first.style.animation = "bigSmall .6s ease forwards";
// }
// first.onclick = function () {
// this.style.left = 0;
// this.style.animation = "toInit2 .6s ease forwards";
// this.style.zIndex = "5";
// second.style.right = 0;
// second.style.zIndex = "4";
// second.style.animation = "toInit .6s ease forwards";
// }
}
\ No newline at end of file
js/index.js 0 → 100644
window.onload =function(){
var nav = document.getElementsByClassName("nav")[0];
var click_a = nav.getElementsByTagName("a");
for(let i = 0 ; i < click_a.length ; i++){
click_a[i].index = i;
click_a[i].onclick = function(){
for(let a = 0 ; a < click_a.length ; a++){
click_a[a].classList.remove("choosed")
}
click_a[this.index].classList.add("choosed")
}
}
// 固定导航的显示隐藏
var scroll = function(){
let nav_height = document.getElementById("top_nav")
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
if(scrollTop > 0){
nav_height.classList.add('header_scroll')
}else{
nav_height.classList.remove('header_scroll')
}
}
scroll()
window.onscroll = function(){
scroll()
}
function home_scroll(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let home_one = document.getElementById("top").offsetTop - 90
let home_two = document.getElementById("introduce").offsetTop - 90
let home_three = document.getElementById("department").offsetTop - 90
let home_four = document.getElementById("cours").offsetTop - 90
let home_five = document.getElementById("product_service").offsetTop - 90
let nav = document.getElementsByClassName("nav")[0];
let click_a = nav.getElementsByTagName("a");
for(let i = 0 ; i < click_a.length ; i++){
click_a[i].classList.remove("choosed")
switch(true){
case scrollTop<home_two:
click_a[0].classList.add("choosed")
break;
case scrollTop>=home_two && scrollTop<home_three:
click_a[1].classList.add("choosed")
break;
case scrollTop>=home_three && scrollTop<home_four:
click_a[2].classList.add("choosed")
break;
case scrollTop>=home_four && scrollTop<home_five:
click_a[3].classList.add("choosed")
break;
case scrollTop>=home_five:
click_a[4].classList.add("choosed")
break;
}
}
}
home_scroll()
window.onscroll = function(){
home_scroll()
}
// 公司介绍品牌切换
var first = document.getElementsByClassName("first_introduce")[0];
var second = document.getElementsByClassName("second_introduce")[0];
second.onclick = function () {
this.style.right = "30px";
this.style.animation = "smallBig .6s ease forwards";
this.style.zIndex = "5";
first.style.left = "-30px";
first.style.zIndex = "4";
first.style.animation = "bigSmall .6s ease forwards";
}
first.onclick = function () {
this.style.left = 0;
this.style.animation = "toInit2 .6s ease forwards";
this.style.zIndex = "5";
second.style.right = 0;
second.style.zIndex = "4";
second.style.animation = "toInit .6s ease forwards";
}
}
\ No newline at end of file
js/qj_show.js
window.onload = function () {
// 左侧固定导航样式
var show_sidebar = document.getElementById("show_sidebar")
var sidebar_li = show_sidebar.getElementsByTagName("a")
for(var k = 0;k < sidebar_li.length ; k++){
sidebar_li[k].index = k;
sidebar_li[k].onmouseover = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_mouseover")
}
sidebar_li[this.index].classList.add("li_mouseover")
}
sidebar_li[k].onmouseout = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_mouseover")
}
}
sidebar_li[k].onclick = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_click")
}
sidebar_li[this.index].classList.add("li_click")
}
}
// 公司宣传视频
var company_video = document.getElementById("company_video")
// company_video.style.width = window.screen.width + "px";
company_video.style.height = window.screen.height - 170 + "px";
// 视差滚动
$.stellar({
horizontalScrolling: false,
responsive: true
responsive: true
});
// 个人风采效果
var photo = document.getElementById("person_photo");
var photo_single = photo.getElementsByTagName("li")
var content_single = document.getElementsByClassName("personage")
for(var i = 0;i < photo_single.length ; i++){
photo_single[i].index = i;
photo_single[i].onmouseover = function(){
......@@ -34,7 +57,6 @@ window.onload = function () {
var speed=-2;
video_box.innerHTML+=video_box.innerHTML;
video_box.style.width=(video_single[0].offsetWidth+25)*video_single.length+"px"
function autoPlay(){
timer=setInterval(function(){
video_box.style.left=video_box.offsetLeft+speed+"px";
......@@ -46,10 +68,96 @@ window.onload = function () {
},14);
}
autoPlay();
video_banner.onmouseover=function(){
video_box.onmouseover=function(){
clearInterval(timer);
};
video_banner.onmouseout=function(){
video_box.onmouseout=function(){
autoPlay();
}
// // 侧边二维码
// var qr_code = document.getElementsByClassName("qr_code")[0];
// var code_img = this.document.getElementsByClassName("code_img")[0];
// qr_code.onmouseover = function () {
// code_img.style.opacity = 1;
// code_img.style.animation = "rightLeft .8s ease-in-out forwards"
// }
// qr_code.onmouseout = function () {
// code_img.style.opacity = 0;
// code_img.style.animation = ""
// }
// // 返回顶部
// var go_top = document.getElementsByClassName("go_top")[0];
// go_top.onclick = function backTop () {
// clearInterval(timer);
// var timer = setInterval(function() {
// let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
// let now = scrollHeight;
// let speed = (2 - now) / 15;
// speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// if (scrollHeight === 0) {
// clearInterval(timer);
// }
// document.documentElement.scrollTop = scrollHeight + speed;
// document.body.scrollTop = scrollHeight + speed;
// }, 14);
// window.onmousewheel = function(){
// clearInterval(timer);
// }
// go_top.onmouseout = function(){
// clearInterval(timer)
// }
// }
// // 固定导航的显示隐藏
// var scroll = function(){
// let nav_height = document.getElementById("top_nav")
// let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
// if(scrollTop > 0){
// nav_height.classList.add('header_scroll')
// }else{
// nav_height.classList.remove('header_scroll')
// }
// }
// scroll()
window.onscroll = function(){
// scroll()
show_scroll()
}
// 滚轮 左导航样式
function show_scroll(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let scroll_one = document.getElementById("scroll_one").offsetTop - 90
let scroll_two = document.getElementById("scroll_two").offsetTop - 90
let scroll_three = document.getElementById("scroll_three").offsetTop - 90
let scroll_four = document.getElementById("scroll_four").offsetTop - 90
let show_sidebar = document.getElementById("show_sidebar")
let sidebar_li = show_sidebar.getElementsByTagName("a")
let show_top = show_sidebar.getElementsByTagName("div")[0]
for(var k = 0;k < sidebar_li.length ; k++){
sidebar_li[k].classList.remove("li_click")
show_top.style.background="#808080";
switch(true){
case scrollTop<scroll_one:
show_top.style.background="#24b298";
break;
case scrollTop>=scroll_one && scrollTop<scroll_two:
sidebar_li[0].classList.add("li_click");
break;
case scrollTop>=scroll_two && scrollTop<scroll_three:
sidebar_li[1].classList.add("li_click");
break;
case scrollTop>=scroll_three && scrollTop<scroll_four:
sidebar_li[2].classList.add("li_click");
break;
case scrollTop>=scroll_four:
sidebar_li[3].classList.add("li_click");
break;
}
}
}
show_scroll()
// 滚动样式
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论