Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
T
test
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
提交
问题看板
Open sidebar
王南南
test
Commits
fd48ca39
提交
fd48ca39
authored
7月 02, 2018
作者:
刘贵生
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更改导航样式
上级
6854e4bb
显示空白字符变更
内嵌
并排
正在显示
10 个修改的文件
包含
372 行增加
和
188 行删除
+372
-188
index.css
css/index.css
+1
-1
join_us.css
css/join_us.css
+4
-3
qj_show.css
css/qj_show.css
+42
-16
reset.css
css/reset.css
+0
-13
index.html
index.html
+8
-11
join_us.html
join_us.html
+32
-10
banner.js
js/banner.js
+0
-101
index.js
js/index.js
+87
-0
qj_show.js
js/qj_show.js
+114
-5
qj_show.html
qj_show.html
+84
-28
没有找到文件。
css/index.css
浏览文件 @
fd48ca39
...
...
@@ -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
浏览文件 @
fd48ca39
...
...
@@ -221,14 +221,14 @@
width
:
760px
;
height
:
2px
;
border-bottom
:
1px
dotted
#cecdcd
;
z-index
:
9
99
;
z-index
:
9
8
;
}
.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
浏览文件 @
fd48ca39
@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
:
38
px
;
margin-bottom
:
27
px
;
border-radius
:
50%
;
background
:
#808080
;
}
#show_sidebar
div
::after
{
position
:
absolute
;
top
:
0
px
;
top
:
7
px
;
left
:
4.5px
;
content
:
""
;
width
:
2
px
;
width
:
1
px
;
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
rgb
a
(
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
:
107
px
;
margin
:
0px
107px
0px
0
px
;
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
浏览文件 @
fd48ca39
...
...
@@ -266,15 +266,3 @@ button {
font-family: 'DIN Black';
src: url('../font/DIN-Black.otf')
} */
\ No newline at end of file
/* 去掉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
index.html
浏览文件 @
fd48ca39
...
...
@@ -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
浏览文件 @
fd48ca39
...
...
@@ -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
浏览文件 @
fd48ca39
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
];
...
...
@@ -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
浏览文件 @
fd48ca39
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
浏览文件 @
fd48ca39
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"
;
// 视差滚动
...
...
@@ -10,10 +33,10 @@ window.onload = function () {
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_b
anner
.
onmouseover
=
function
(){
video_b
ox
.
onmouseover
=
function
(){
clearInterval
(
timer
);
};
video_b
anner
.
onmouseout
=
function
(){
video_b
ox
.
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
qj_show.html
浏览文件 @
fd48ca39
...
...
@@ -5,19 +5,20 @@
<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=
"./iconfont/iconfont.css"
>
<link
rel=
"stylesheet"
href=
"./css/reset.css"
>
<link
rel=
"stylesheet"
href=
"./css/qj_show.css"
>
<link
rel=
"stylesheet"
href=
"./css/index.css"
>
<script
type=
"text/javascript"
src=
"./js/qj_show.js"
></script>
<!-- <script type="text/javascript" src="./js/banner.js"></script> -->
<script
type=
"text/javascript"
src=
"./js/jquery-1.11.1.js"
></script>
<script
type=
"text/javascript"
src=
"./js/jquery.stellar.min.js"
></script>
</head>
<body>
<!-- 固定导航 -->
<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"
>
...
...
@@ -25,16 +26,16 @@
</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"
>
品牌加盟
</a>
<a
class=
"nav_last choosed"
href=
"qj_show.html"
>
千家风采
</a>
</div>
</div>
</div>
<!-- 右侧边栏 -->
<!-- 右
侧边栏 -->
<nav
id=
"sidebar"
>
<ul>
<li
class=
"qr_code"
>
...
...
@@ -62,31 +63,28 @@
</nav>
<!-- 左侧边栏 锚点点击 -->
<div
id=
"show_sidebar"
>
<ul>
<div></div>
<li>
团队风采
</li>
<li>
个人风采
</li>
<li>
校园招聘--
</li>
<li>
精彩短片
</li>
</ul>
<a
href=
"#team_mien"
>
团队风采
</a>
<a
href=
"#people_mien"
>
个人风采
</a>
<a
href=
"#school_for"
>
校园招聘
</a>
<a
href=
"#splendid_video"
>
精彩短片
</a>
</div>
<!-- 公司宣传视频 -->
<div
class=
"first_video"
>
<video
id=
"company_video"
src=
"https://qjvideo.oss-cn-beijing.aliyuncs.com/2018%E5%8D%83%E5%AE%B6%E5%AE%A3%E4%BC%A0%E7%89%87.mp4"
autoplay
preload=
"preload"
controls=
"controls"
></video>
<video
id=
"company_video"
src=
"https://qjvideo.oss-cn-beijing.aliyuncs.com/2018%E5%8D%83%E5%AE%B6%E5%AE%A3%E4%BC%A0%E7%89%87.mp4"
autoplay
preload=
"preload"
controls=
"controls"
></video>
</div>
<!-- 视差滚动 -->
<div
class=
"main"
id=
"main"
>
<!-- 团队风采 -->
<div
id=
"scroll_one"
>
<a
id=
"team_mien"
name=
"team_mien"
></a>
<div
class=
"content model_top"
id=
"content1"
data-stellar-background-ratio=
"1"
>
<h1>
团队风采
</h1>
<span>
TEAM
</span>
</div>
<!-- 视差背景图1 -->
<div
class=
"content main-body"
id=
"content2"
data-stellar-background-ratio=
"0.5"
></div>
<!-- 视差内容1 团队风采
-->
<!-- 视差内容1
-->
<div
class=
"content"
id=
"content3"
data-stellar-background-ratio=
"1"
>
<div
class=
"team team1 main_body"
>
<div
class=
"top_words"
>
...
...
@@ -155,8 +153,60 @@
</div>
</div>
</div>
<div
class=
"team team4 main_body"
>
<div
class=
"en_words"
>
<div
class=
"top_words"
>
<span
class=
"left_words"
>
NIRVANA
</span><span
class=
"right_words"
>
REBIRTH
</span>
</div>
</div>
<div
class=
"team_content clear"
>
<div
class=
"team_msg right"
>
<h1>
未来城店H组
</h1>
<div
class=
"team_int"
>
<div
class=
"line"
></div>
<p>
主要荣誉
</p>
<span>
第三季度公司级团队销售业绩亚军
</span>
<span>
2015年 年度公司级个人销售业绩亚军
</span>
<span>
2017年 第一季度公司级团队销售业绩第五名
</span>
<span>
2017年 第二季度公司级团队销售业绩第四名
</span>
<span>
2017年 年度公司级团队销售业绩亚军
</span>
<span>
2018年 第一季度公司级团队销售业绩第五名
</span>
</div>
</div>
<div
class=
"team1_video left"
>
<video
src=
"./第一高峰.mp4"
controls
></video>
</div>
</div>
</div>
<div
class=
"team team5 main_body"
>
<div
class=
"en_words"
>
<div
class=
"top_words"
>
<span
class=
"right_words"
>
I CAN
</span><span
class=
"left_words"
>
DO IT
</span>
</div>
</div>
<div
class=
"team_content clear"
>
<div
class=
"team_msg left"
>
<h1>
鹭港一期店B组
</h1>
<div
class=
"team_int"
>
<div
class=
"line"
></div>
<p>
主要荣誉
</p>
<span>
2017年第一季度公司级团队销售业绩第十名
</span>
<span>
2017年第二季度公司级团队销售业绩第九名
</span>
<span>
2017年第三季度公司级团队销售业绩第一名
</span>
<span>
2017年度公司级团队销售业绩第三名
</span>
<span>
2018年第一季公司级团队销售业绩度第六名
</span>
</div>
</div>
<div
class=
"team1_video right"
>
<video
src=
"./第一高峰.mp4"
controls
></video>
</div>
</div>
</div>
</div>
</div>
<!-- 个人风采 -->
<div
id=
"scroll_two"
>
<a
id=
"people_mien"
name=
"people_mien"
></a>
<div
id=
"person_mien"
class=
"main_body"
>
<div
class=
"content model_top"
data-stellar-background-ratio=
"1"
>
<h1>
个人风采
</h1>
...
...
@@ -183,7 +233,7 @@
</div>
<div
class=
"team_msg left"
>
<h1>
<span
class=
"person_name"
>
董左
锦
</span><span
class=
"preson_store"
>
/友谊购物店
</span>
<span
class=
"person_name"
>
董
锦
</span><span
class=
"preson_store"
>
/友谊购物店
</span>
</h1>
<div
class=
"team_int"
>
<div
class=
"line"
></div>
...
...
@@ -234,6 +284,10 @@
</div>
</div>
</div>
</div>
<!-- 校园招聘 -->
<div
id=
"scroll_three"
>
<a
id=
"school_for"
></a>
<div
class=
"content model_top"
data-stellar-background-ratio=
"1"
>
<h1>
校园招聘
</h1>
<span>
CAMPUS
</span>
...
...
@@ -246,11 +300,14 @@
<video
src=
"./第一高峰.mp4"
controls
></video>
</div>
</div>
</div>
<!-- 精彩短片 -->
<div
id=
"scroll_four"
>
<a
id=
"splendid_video"
name=
"splendid_video"
></a>
<div
id=
"video_banner"
class=
"main_body"
>
<div
class=
"content model_top"
data-stellar-background-ratio=
"1"
>
<h1>
精彩短片
</h1>
<span>
SHORP
FILM
</span>
<span>
SHORT
FILM
</span>
</div>
<div
class=
"box_show"
>
<ul
class=
"video_box clear"
>
...
...
@@ -270,6 +327,7 @@
</div>
</div>
</div>
</div>
<!-- 底部 -->
<footer
id=
"footer"
>
<div
class=
"service_img"
>
...
...
@@ -278,8 +336,5 @@
<p>
千家网络科技提供技术支持
</p>
</footer>
</body>
<script
src=
"./js/jquery-1.11.1.js"
></script>
<script
src=
"./js/jquery.stellar.min.js"
></script>
<script
src=
"./js/banner.js"
></script>
<script
src=
"./js/qj_show.js"
></script>
</html>
\ No newline at end of file
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论