|
|
|
@@ -0,0 +1,517 @@ |
|
|
|
<!doctype html> |
|
|
|
<html lang="en"> |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8" /> |
|
|
|
<meta name="keywords" content="蜘蛛出行,蜘蛛行,出行,安全,舒适,便捷,旅行"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> |
|
|
|
<title>蜘蛛出行 安全、舒适、便捷</title> |
|
|
|
<link rel="shortcut icon" href="images/Artboard.png"> |
|
|
|
<link rel="stylesheet" href="css/swiper.min.css"> |
|
|
|
<link rel="stylesheet" href="css/animate.min.css"> |
|
|
|
<style> |
|
|
|
html,body{ |
|
|
|
position:relative; |
|
|
|
height:100%; |
|
|
|
} |
|
|
|
body{ |
|
|
|
background:#eee; |
|
|
|
font-family:Helvetica Neue,Helvetica,Arial,sans-serif; |
|
|
|
font-size:14px; |
|
|
|
color:#000;margin:0; |
|
|
|
padding:0; |
|
|
|
min-width:1160px; |
|
|
|
} |
|
|
|
input[type="text"], |
|
|
|
input[type="password"], |
|
|
|
input[type="button"], |
|
|
|
textarea{ |
|
|
|
outline-style:none; |
|
|
|
-webkit-appearance:none; |
|
|
|
} |
|
|
|
|
|
|
|
.swiper-container{ |
|
|
|
width:100%; |
|
|
|
height:100%; |
|
|
|
} |
|
|
|
.swiper-slide{ |
|
|
|
font-size:18px; |
|
|
|
-webkit-box-pack:center; |
|
|
|
-ms-flex-pack:center; |
|
|
|
-webkit-justify-content:center; |
|
|
|
justify-content:center; |
|
|
|
-webkit-box-align:center; |
|
|
|
-ms-flex-align:center; |
|
|
|
} |
|
|
|
.swiper-wrapper{ |
|
|
|
width:100%; |
|
|
|
height:100%; |
|
|
|
overflow:visible; |
|
|
|
transition:transform 1s cubic-bezier(0.86,0,0.03,1); |
|
|
|
-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1); |
|
|
|
} |
|
|
|
|
|
|
|
#s1{ |
|
|
|
background-image:url(images/img_bg.png); |
|
|
|
background-size:cover; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
#s2{ |
|
|
|
background-image:url(images/p2_img_bg_1.png); |
|
|
|
background-size:cover; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
#s3{ |
|
|
|
background-image:url(images/p2_img_bg_1.png); |
|
|
|
background-size:cover; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
#s4{ |
|
|
|
background-image:url(images/p2_img_bg_1.png); |
|
|
|
background-size:cover; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
|
|
|
|
.login_pic{ |
|
|
|
width: 28px; |
|
|
|
height: 42px; |
|
|
|
margin-top: 0.90rem; |
|
|
|
margin-left: 0.76rem; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
.navigation_bar{ |
|
|
|
width: 400px; |
|
|
|
height: 50px; |
|
|
|
position: relative; |
|
|
|
text-align: right; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
.pic2_box{ |
|
|
|
display: inline-block; |
|
|
|
width: 150px; |
|
|
|
height: 300px; |
|
|
|
text-align: left; |
|
|
|
font-family: "微软雅黑"; |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
.pic2_box_span1{ |
|
|
|
margin-top: 0.38rem; |
|
|
|
font-size: 18px; |
|
|
|
color: #353866; |
|
|
|
} |
|
|
|
.pic2_box_span2{ |
|
|
|
margin-top: 5px; |
|
|
|
margin-bottom: 20px; |
|
|
|
font-size: 28px; |
|
|
|
color: #58c9b9; |
|
|
|
} |
|
|
|
.pic4_box_span2{ |
|
|
|
margin-top: 5px; |
|
|
|
font-size: 28px; |
|
|
|
color: #58c9b9; |
|
|
|
} |
|
|
|
.pic2_box_span3{ |
|
|
|
border: 1px solid #aaabd3; |
|
|
|
margin-top: 5px; |
|
|
|
font-size: 12px; |
|
|
|
width: 45px; |
|
|
|
border-radius: 3px; |
|
|
|
text-align: center; |
|
|
|
color: #aaabd3; |
|
|
|
height: 17px; |
|
|
|
line-height: 17px; |
|
|
|
} |
|
|
|
|
|
|
|
.pic2_box_span5{ |
|
|
|
border: 1px solid #353866; |
|
|
|
margin-top: 8px; |
|
|
|
font-size: 12px; |
|
|
|
width: 68px; |
|
|
|
border-radius: 3px; |
|
|
|
text-align: center; |
|
|
|
color: #353866; |
|
|
|
height: 20px; |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.pic3_box{ |
|
|
|
display: inline-block; |
|
|
|
width: 300px; |
|
|
|
height: 400px; |
|
|
|
text-align: left; |
|
|
|
font-family: "微软雅黑"; |
|
|
|
margin-left: 1rem; |
|
|
|
} |
|
|
|
.pic3_box_span3{ |
|
|
|
margin-top: 0.4rem; |
|
|
|
font-size: 12px; |
|
|
|
color: #aaabd3; |
|
|
|
height: 17px; |
|
|
|
line-height: 17px; |
|
|
|
} |
|
|
|
.pic3_box_span4{ |
|
|
|
display: inline-block; |
|
|
|
border: 1px solid #94dcd4; |
|
|
|
margin-top: 0.25rem; |
|
|
|
} |
|
|
|
.pic4_box_span3{ |
|
|
|
margin-top: 0.4rem; |
|
|
|
font-size: 12px; |
|
|
|
color: #aaabd3; |
|
|
|
height: 17px; |
|
|
|
line-height: 17px; |
|
|
|
} |
|
|
|
.pic4_box_span4{ |
|
|
|
font-size: 12px; |
|
|
|
color: #353866; |
|
|
|
height: 17px; |
|
|
|
line-height: 17px; |
|
|
|
} |
|
|
|
.pic4_box_span5{ |
|
|
|
margin-top: 0.3rem; |
|
|
|
} |
|
|
|
.footer{ |
|
|
|
height: 1.04rem; |
|
|
|
min-height: 100px; |
|
|
|
min-width: 1024px; |
|
|
|
width: 100%; |
|
|
|
opacity: 0.2; |
|
|
|
background-image: linear-gradient(to bottom, rgba(52, 55, 102, 0.0), rgba(255, 255, 255, 0.77)), linear-gradient(rgba(53, 56, 102, 0.3), rgba(53, 56, 102, 0.3)); |
|
|
|
box-shadow: inset 0 -10px 29px 0 #ffffff; |
|
|
|
position: absolute; |
|
|
|
bottom: 0.23rem; |
|
|
|
text-align: left; |
|
|
|
margin: 0 auto; |
|
|
|
z-index: 0; |
|
|
|
overflow: hidden; |
|
|
|
clear:both; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
.footer_div1{ |
|
|
|
width: 49%; |
|
|
|
display: inline-block; |
|
|
|
text-align: right; |
|
|
|
margin-top: 0.5rem; |
|
|
|
border-right: 1px solid #494949; |
|
|
|
} |
|
|
|
.footer_div2{ |
|
|
|
width: 49%; |
|
|
|
display: inline-block; |
|
|
|
text-align: left; |
|
|
|
margin-top: 0.5rem; |
|
|
|
} |
|
|
|
.width1{ |
|
|
|
width: 1.35rem; |
|
|
|
min-height: 80px; |
|
|
|
min-width: 100px; |
|
|
|
} |
|
|
|
.width2{ |
|
|
|
width: 1.75rem; |
|
|
|
min-height: 100px; |
|
|
|
min-width: 130px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
<script> |
|
|
|
(function (doc, win){ |
|
|
|
var docEl = doc.documentElement, |
|
|
|
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', |
|
|
|
recalc = function () { |
|
|
|
var clientWidth = docEl.clientWidth; |
|
|
|
if (!clientWidth) return; |
|
|
|
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
if (!doc.addEventListener) return; |
|
|
|
win.addEventListener(resizeEvt, recalc, false); |
|
|
|
doc.addEventListener('DOMContentLoaded', recalc, false); |
|
|
|
})(document, window); |
|
|
|
</script> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div class="swiper-container"> |
|
|
|
<div id="swiper-wrapper" class="swiper-wrapper"> |
|
|
|
<div style="" class="swiper-slide s1" id="s1"> |
|
|
|
<div style="width: 100%;height: 20%;min-width: 1024px;"> |
|
|
|
<div style="width: 47%;" class="login_pic" id=""><img src="images/img_logo.png"></div> |
|
|
|
<div style="width: 48%;" class="navigation_bar" id=""> |
|
|
|
<div class="ani" id="nav-bar1" style="width: 400px;height: 50px;float: right;"> |
|
|
|
<span swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" class="ani" style="display: block; border: 1px solid #4A5266;height: 0px;width: 300px;position: relative;top:14px;left: 49px;" id=""></span> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 16px;height: 16px;border-radius: 50%;background-color: #141c39;margin: 5px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">首页</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #4A5266;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">服务</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #4A5266;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">预订</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #4A5266;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">加入我们</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 100%;height: 60%;min-width: 1024px;text-align: center;"> |
|
|
|
<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" style="margin-top: 2.4rem;" src="images/t1.png"/><br> |
|
|
|
<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" style="margin-top: 15px;" src="images/t2.png"/><br> |
|
|
|
</div> |
|
|
|
<div style="width: 100%;height: 20%;min-width: 1024px;text-align: center;"> |
|
|
|
<img style="position: fixed;bottom: 0;" src="images/ic_pulldown.png"/><br> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="swiper-slide s2" id="s2"> |
|
|
|
<div style="width: 100%;height: 20%;min-width: 1024px;"> |
|
|
|
<div style="width: 47%;" class="login_pic" id=""><img src="images/img_logo_gr.png"></div> |
|
|
|
<div style="width: 48%;" class="navigation_bar" id=""> |
|
|
|
<div id="nav-bar2" style="width: 400px;height: 50px;float: right;"> |
|
|
|
<span swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" class="ani" style="display: block;border: 1px solid #898d9c;height: 0px;width: 300px;position: relative;top:14px;left: 49px;;" id=""></span> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">首页</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 16px;height: 16px;border-radius: 50%;background-color: #141c39;margin: 5px auto;position: relative;z-index: 1;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">服务</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">预订</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">加入我们</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 100%;height: 40%;min-height: 3.7rem;min-width: 10.24rem;text-align: center;margin-top: 1rem;margin-left: -1rem;"> |
|
|
|
<img style="vertical-align: top;margin-top: 1.6rem;margin-right: 20px;" src="images/p3_t1.png"> |
|
|
|
<img id="img_4" style="vertical-align: top;width: 4.5rem;min-height: 250px;min-width: 310px;" src="images/img_3.png"> |
|
|
|
<div id="textAll" class="pic2_box" style=""> |
|
|
|
<span id="text_mame" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="pic2_box_span1 ani" style="display: block;">深度抵达 游运结合</span> |
|
|
|
<span id="text0" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s" class="pic2_box_span2 ani" style="display: block;">便捷</span> |
|
|
|
<div onmouseover="cutImg('img_1')" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s" class="pic2_box_span3 ani img_1" style="cursor: pointer;">安全</div> |
|
|
|
<div onmouseover="cutImg('img_2')" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s" class="pic2_box_span3 ani img_2" style="cursor: pointer;">舒适</div> |
|
|
|
<div onmouseover="cutImg('img_3')" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" class="pic2_box_span5 ani img_3" style="cursor: pointer;">便捷</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="imgs" style="width: 100%;height: 20%;min-width: 1024px;text-align: center;"> |
|
|
|
<img class="width1" id="img_1" onmouseover="cutImg(this.id)" style="vertical-align: bottom;margin-left: 3.50rem;cursor: pointer;min-height: 80px;min-width: 100px;" src="images/img_1.png"> |
|
|
|
<img class="width1" id="img_2" onmouseover="cutImg(this.id)" style="vertical-align: bottom;cursor: pointer;min-height: 80px;min-width: 100px;" src="images/img_2.png"> |
|
|
|
<img class="width2" id="img_3" onmouseover="cutImg(this.id)" style="vertical-align: bottom;cursor: pointer;min-height: 80px;min-width: 100px;" src="images/img_3.png"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="swiper-slide s3" id="s3"> |
|
|
|
<div style="width: 100%;height: 20%;min-width: 1024px;"> |
|
|
|
<div style="width: 47%;" class="login_pic" id=""><img src="images/img_logo_gr.png"></div> |
|
|
|
<div style="width: 48%;" class="navigation_bar" id=""> |
|
|
|
<div id="nav-bar3" style="width: 400px;height: 50px;float: right;"> |
|
|
|
<span swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" class="ani" style="display: block;border: 1px solid #898d9c;height: 0px;width: 300px;position: relative;top:14px;left: 49px;" id=""></span> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">首页</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">服务</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 16px;height: 16px;border-radius: 50%;background-color: #141c39;margin: 5px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">预订</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">加入我们</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 100%;height: 50%;min-width: 1024px;text-align: center;margin-top: 1rem;"> |
|
|
|
<img style="vertical-align: top;margin-top: 0.8rem;margin-right: 20px;" src="images/p2_t1.png"> |
|
|
|
<img style="vertical-align: top;width: 3.6rem;height: 4.1rem;min-height: 3.1rem;min-width: 2.6rem;" src="images/img_p3.png"> |
|
|
|
<div class="pic3_box" style=""> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="pic2_box_span1 ani">关注微信服务号“蜘蛛出行”</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s" class="pic2_box_span2 ani">出行预订</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s" class="pic3_box_span3 ani">扫一扫 关注微信服务号“蜘蛛出行”</div> |
|
|
|
<div class="pic3_box_span4"><img style="width: 1.5rem;height: 1.5rem;min-width: 110px;min-height: 105px;" src="images/qrcode.jpg"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="swiper-slide s4" id="s4"> |
|
|
|
<div style="width: 100%;height: 20%;min-width: 1024px;min-width: 868px;"> |
|
|
|
<div style="width: 47%;" class="login_pic" id=""><img src="images/img_logo_gr.png"></div> |
|
|
|
<div style="width: 48%;" class="navigation_bar" id=""> |
|
|
|
<div id="nav-bar4" style="width: 400px;height: 50px;float: right;"> |
|
|
|
<span swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" class="ani" style="display: block; border: 1px solid #898d9c;height: 0px;width: 300px;position: relative;top:14px;left: 49px;"></span> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">首页</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">服务</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">预订</div> |
|
|
|
</div> |
|
|
|
<div swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="ani" style="float: left;text-align: center;width: 100px;cursor: pointer;"> |
|
|
|
<div style="width: 16px;height: 16px;border-radius: 50%;background-color: #141c39;margin: 5px auto;" id=""></div> |
|
|
|
<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">加入我们</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 100%;height: 50%;min-width: 1024px;text-align: center;margin-top: 1rem;"> |
|
|
|
<img style="margin-right: 20px;margin-bottom: 0.5rem;" src="images/p3_t1.png"> |
|
|
|
<div style="width: 4.3rem;height: 3.4rem;display: inline-block;min-width: 320px;min-height: 240px;"> |
|
|
|
<img style="margin-right: 0.1rem;margin-bottom: 0.1rem;width: 2rem;height: 1.5rem;min-height: 110px;min-width: 150px;" src="images/img_office1.png"/> |
|
|
|
<img style="margin-bottom: 0.1rem;width: 2rem;height: 1.5rem;min-height: 110px;min-width: 150px;" src="images/img_office2.png"/> |
|
|
|
<img style="margin-right: 0.1rem;width: 2rem;height: 1.5rem;min-height: 110px;min-width: 150px;" src="images/img_office3.png"/> |
|
|
|
<img style="width: 2rem;height: 1.5rem;min-height: 110px;min-width: 150px;" src="images/img_office4.png"/> |
|
|
|
</div> |
|
|
|
<div class="pic3_box" style="vertical-align: top;"> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="pic2_box_span1 ani">加入蜘蛛出行，成就更好的自己！</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s" class="pic4_box_span2 ani">加入我们</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s" class="pic4_box_span3 ani">职位介绍:</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s" style="margin-top: 0.15rem;" class="pic4_box_span4 ani">产品经理</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s" class="pic4_box_span4 ani">前端工程师</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.0s" class="pic4_box_span4 ani">管理培训生</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s" class="pic4_box_span4 ani">PHP开发工程师</div> |
|
|
|
<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s" class="pic4_box_span5 ani"><span>邮箱投递：</span><span style="color: #58c9b9">HR@zhizhuchuxing.com</span></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="footer"> |
|
|
|
<div class="footer_div1"> |
|
|
|
<div style="margin-right: 10px;">021-33280184 : 传真</div> |
|
|
|
<div style="margin-right: 10px;">蜘蛛行网络科技有限公司版权所有，@2016 <a href="http://www.miitbeian.gov.cn">沪ICP备16006417</a> : 版权所有</div> |
|
|
|
</div><div class="footer_div2"> |
|
|
|
<div style="margin-left: 10px;">联系电话 : 021-52218088</div> |
|
|
|
<div style="margin-left: 10px;">公司地址 : 上海市闵行区申长路988弄虹桥万科中心1号楼701</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="swiper-pagination"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
<script src="js/jquery-1.8.3.min.js"></script> |
|
|
|
<script src="js/swiper.min.js"></script> |
|
|
|
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script> |
|
|
|
<script> |
|
|
|
$(document).ready(function(){ |
|
|
|
console.log("一张网页，要经历怎样的过程，才能抵达用户面前？"); |
|
|
|
console.log("一位新人，要经历怎样的成长，才能站在技术之巅？"); |
|
|
|
console.log("探寻这里的秘密"); |
|
|
|
console.log("体验这里的挑战"); |
|
|
|
console.log("成为这里的主人"); |
|
|
|
console.log("加入蜘蛛出行，你，可以影响世界。"); |
|
|
|
console.log("请将简历发送至 HR@zhizhuchuxing.com"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
var myswiper = new Swiper('.swiper-container', { |
|
|
|
pagination: '.swiper-pagination', |
|
|
|
direction: 'vertical', |
|
|
|
slidesPerView: "auto", |
|
|
|
paginationClickable: true, |
|
|
|
mousewheelControl: true, |
|
|
|
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit |
|
|
|
//swiperAnimateCache(swiper); //隐藏动画元素 |
|
|
|
swiperAnimate(swiper); //初始化完成开始动画 |
|
|
|
}, |
|
|
|
|
|
|
|
onTransitionStart: function(swiper){ |
|
|
|
swiperAnimate(swiper); |
|
|
|
}, |
|
|
|
onSlideChangeEnd: function(swiper){ |
|
|
|
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画 |
|
|
|
} |
|
|
|
}); |
|
|
|
// |
|
|
|
var spanIndex1 = $("#nav-bar1").children("div"); |
|
|
|
var spanIndex2 = $("#nav-bar2").children("div"); |
|
|
|
var spanIndex3 = $("#nav-bar3").children("div"); |
|
|
|
var spanIndex4 = $("#nav-bar4").children("div"); |
|
|
|
|
|
|
|
for (var i = 0; i < spanIndex1.length; i++) { |
|
|
|
spanIndex1[i].onclick = function(){ |
|
|
|
for (var i = 0; i < spanIndex1.length; i++) { |
|
|
|
if(this == spanIndex1[i]){ |
|
|
|
$(".swiper-pagination span").eq(i).trigger("click"); |
|
|
|
}else{ |
|
|
|
//spanIndex[i].className = ""; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
}; |
|
|
|
for (var i = 0; i < spanIndex2.length; i++) { |
|
|
|
spanIndex2[i].onclick = function(){ |
|
|
|
for (var i = 0; i < spanIndex2.length; i++) { |
|
|
|
if(this == spanIndex2[i]){ |
|
|
|
$(".swiper-pagination span").eq(i).trigger("click"); |
|
|
|
}else{ |
|
|
|
//spanIndex[i].className = ""; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
}; |
|
|
|
for (var i = 0; i < spanIndex3.length; i++) { |
|
|
|
spanIndex3[i].onclick = function(){ |
|
|
|
for (var i = 0; i < spanIndex3.length; i++) { |
|
|
|
if(this == spanIndex3[i]){ |
|
|
|
$(".swiper-pagination span").eq(i).trigger("click"); |
|
|
|
}else{ |
|
|
|
//spanIndex[i].className = ""; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
}; |
|
|
|
for (var i = 0; i < spanIndex4.length; i++) { |
|
|
|
spanIndex4[i].onclick = function(){ |
|
|
|
for (var i = 0; i < spanIndex4.length; i++) { |
|
|
|
if(this == spanIndex4[i]){ |
|
|
|
$(".swiper-pagination span").eq(i).trigger("click"); |
|
|
|
}else{ |
|
|
|
//spanIndex[i].className = ""; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
function cutImg(index){ |
|
|
|
var text_mame = "深度抵达 游运结合"; |
|
|
|
if(index=="img_1"){ |
|
|
|
text_mame = "正规车辆 专业驾乘"; |
|
|
|
}else if(index=="img_2"){ |
|
|
|
text_mame = "宽敞空间 身心放松"; |
|
|
|
}else{ |
|
|
|
text_mame = "深度抵达 游运结合"; |
|
|
|
} |
|
|
|
var text1 = $("."+index).text(); |
|
|
|
$("#imgs").children().css("width","1.35rem"); |
|
|
|
$("#"+index).css("width","1.75rem"); |
|
|
|
$("#img_4").attr("src","images/"+index+".png"); |
|
|
|
$("#textAll").children("div").removeClass("pic2_box_span5"); |
|
|
|
$("#textAll").children("div").addClass("pic2_box_span3"); |
|
|
|
$("."+index).addClass("pic2_box_span5"); |
|
|
|
$("#text0").text(text1); |
|
|
|
$("#text_mame").text(text_mame); |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
</html> |
v-Brocloni
3 years ago
