nizongfeng
/
WWW
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
2.3 MiB
 
 
 
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
WWW/index.html

517 lines
24 KiB
Raw Permalink Blame History 

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4. 	<meta charset="UTF-8" />

  5. 	<meta name="keywords" content="蜘蛛出行,蜘蛛行,出行,安全,舒适,便捷,旅行">

  6. 	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  7. 	<title>蜘蛛出行 安全、舒适、便捷</title>

  8. 	<link rel="shortcut icon" href="images/Artboard.png">

  9. 	<link rel="stylesheet" href="css/swiper.min.css">

  10. 	<link rel="stylesheet" href="css/animate.min.css">

  11. 	<style>

  12. html,body{

  13. 	position:relative;

  14. 	height:100%;

  15. }

  16. body{

  17. 	background:#eee;

  18. 	font-family:Helvetica Neue,Helvetica,Arial,sans-serif;

  19. 	font-size:14px;

  20. 	color:#000;margin:0;

  21. 	padding:0;

  22. 	min-width:1160px;

  23. }

  24. input[type="text"],

  25. input[type="password"],

  26. input[type="button"],

  27. textarea{

  28. 	outline-style:none;

  29. 	-webkit-appearance:none;

  30. }

  31. 	

  32. .swiper-container{

  33. 	width:100%;

  34. 	height:100%;

  35. }

  36. .swiper-slide{

  37. 	font-size:18px;

  38. 	-webkit-box-pack:center;

  39. 	-ms-flex-pack:center;

  40. 	-webkit-justify-content:center;

  41. 	justify-content:center;

  42. 	-webkit-box-align:center;

  43. 	-ms-flex-align:center;

  44. }

  45. .swiper-wrapper{

  46. 	width:100%;

  47. 	height:100%;

  48. 	overflow:visible;

  49. 	transition:transform 1s cubic-bezier(0.86,0,0.03,1);

  50. 	-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);

  51. }

  52. 	

  53. #s1{ 

  54. 	background-image:url(images/img_bg.png);

  55. 	background-size:cover;

  56. 	background-position: center;

  57. }

  58. #s2{

  59. 	background-image:url(images/p2_img_bg_1.png);

  60. 	background-size:cover;

  61. 	background-position: center;

  62. }

  63. #s3{

  64. 	background-image:url(images/p2_img_bg_1.png);

  65. 	background-size:cover;

  66. 	background-position: center;

  67. }

  68. #s4{

  69. 	background-image:url(images/p2_img_bg_1.png);

  70. 	background-size:cover;

  71. 	background-position: center;

  72. }

  73. 

  74. .login_pic{

  75. 	width: 28px;

  76. 	height: 42px;

  77. 	margin-top: 0.90rem;

  78. 	margin-left: 0.76rem;

  79. 	display: inline-block;

  80. }

  81. .navigation_bar{

  82. 	width: 400px;

  83. 	height: 50px;

  84. 	position: relative;

  85. 	text-align: right;

  86. 	display: inline-block;

  87. }

  88. .pic2_box{

  89. 	display: inline-block;

  90. 	width: 150px;

  91. 	height: 300px;

  92. 	text-align: left;

  93.     font-family: "微软雅黑";

  94.     margin-left: 10px;

  95. }

  96. .pic2_box_span1{

  97. 	margin-top: 0.38rem;

  98.     font-size: 18px;

  99.     color: #353866;

  100. }

  101. .pic2_box_span2{

  102. 	margin-top: 5px;

  103. 	margin-bottom: 20px;

  104.     font-size: 28px;

  105.     color: #58c9b9;

  106. }

  107. .pic4_box_span2{

  108. 	margin-top: 5px;

  109.     font-size: 28px;

  110.     color: #58c9b9;

  111. }

  112. .pic2_box_span3{

  113. 	border: 1px solid #aaabd3;

  114.     margin-top: 5px;

  115.     font-size: 12px;

  116.     width: 45px;

  117.     border-radius: 3px;

  118.     text-align: center;

  119.     color: #aaabd3;

  120.     height: 17px;

  121.     line-height: 17px;

  122. }

  123. 

  124. .pic2_box_span5{

  125. 	border: 1px solid #353866;

  126.     margin-top: 8px;

  127.     font-size: 12px;

  128.     width: 68px;

  129.     border-radius: 3px;

  130.     text-align: center;

  131.     color: #353866;

  132.     height: 20px;

  133.     line-height: 20px;

  134. }

  135. 

  136. .pic3_box{

  137. 	display: inline-block;

  138. 	width: 300px;

  139. 	height: 400px;

  140. 	text-align: left;

  141.     font-family: "微软雅黑";

  142.     margin-left: 1rem;

  143. }

  144. .pic3_box_span3{

  145.     margin-top: 0.4rem;

  146.     font-size: 12px;

  147.     color: #aaabd3;

  148.     height: 17px;

  149.     line-height: 17px;

  150. }

  151. .pic3_box_span4{

  152. 	display: inline-block;

  153.     border: 1px solid #94dcd4;

  154.     margin-top: 0.25rem;

  155. }

  156. .pic4_box_span3{

  157.     margin-top: 0.4rem;

  158.     font-size: 12px;

  159.     color: #aaabd3;

  160.     height: 17px;

  161.     line-height: 17px;

  162. }

  163. .pic4_box_span4{

  164.     font-size: 12px;

  165.     color: #353866;

  166.     height: 17px;

  167.     line-height: 17px;

  168. }

  169. .pic4_box_span5{

  170. 	margin-top: 0.3rem;

  171. }

  172. .footer{

  173. 	height: 1.04rem;

  174. 	min-height: 100px;

  175. 	min-width: 1024px;

  176. 	width: 100%;

  177. 	opacity: 0.2;

  178. 	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));

  179. 	box-shadow: inset 0 -10px 29px 0 #ffffff;

  180. 	position: absolute;

  181.     bottom: 0.23rem;

  182.     text-align: left;

  183.     margin: 0 auto;

  184.     z-index: 0;

  185.     overflow: hidden;

  186.     clear:both;

  187.     font-size: 12px;

  188. }

  189. .footer_div1{

  190. 	width: 49%;

  191. 	display: inline-block;

  192. 	text-align: right;

  193. 	margin-top: 0.5rem;

  194. 	border-right: 1px solid #494949;

  195. }

  196. .footer_div2{

  197. 	width: 49%;

  198. 	display: inline-block;

  199. 	text-align: left;

  200. 	margin-top: 0.5rem;

  201. }

  202. .width1{

  203. 	width: 1.35rem;

  204. 	min-height: 80px;

  205. 	min-width: 100px;

  206. }

  207. .width2{

  208. 	width: 1.75rem;

  209. 	min-height: 100px;

  210. 	min-width: 130px;

  211. }

  212. 

  213. </style>

  214. 

  215. <script>

  216. 	(function (doc, win){

  217. 		var docEl = doc.documentElement,

  218. 		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

  219. 		recalc = function () {

  220. 		var clientWidth = docEl.clientWidth;

  221. 		if (!clientWidth) return;

  222. 		docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';

  223. 		};

  224. 		

  225. 		

  226. 		if (!doc.addEventListener) return;

  227. 		win.addEventListener(resizeEvt, recalc, false);

  228. 		doc.addEventListener('DOMContentLoaded', recalc, false);

  229. 	})(document, window);

  230. </script>

  231. </head>

  232. <body>

  233. 	<div class="swiper-container">

  234. 	    <div id="swiper-wrapper" class="swiper-wrapper">

  235. 	        <div style="" class="swiper-slide s1" id="s1">

  236. 	        	<div style="width: 100%;height: 20%;min-width: 1024px;">

  237. 	        		<div style="width: 47%;" class="login_pic" id=""><img src="images/img_logo.png"></div>

  238. 	        		<div style="width: 48%;" class="navigation_bar" id="">

  239. 	        			<div class="ani" id="nav-bar1" style="width: 400px;height: 50px;float: right;">

  240. 	        				<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>

  241. 		        			<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;">

  242. 		        				<div style="width: 16px;height: 16px;border-radius: 50%;background-color: #141c39;margin: 5px auto;" id=""></div>

  243. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">首页</div>

  244. 		        			</div>

  245. 		        			<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;">

  246. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #4A5266;margin: 8px auto;" id=""></div>

  247. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">服务</div>

  248. 		        			</div>

  249. 		        			<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;">

  250. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #4A5266;margin: 8px auto;" id=""></div>

  251. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">预订</div>

  252. 		        			</div>

  253. 		        			<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;">

  254. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #4A5266;margin: 8px auto;" id=""></div>

  255. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">加入我们</div>

  256. 		        			</div>

  257. 	        			</div>

  258. 	        		</div>

  259. 	        	</div>

  260. 	        	<div style="width: 100%;height: 60%;min-width: 1024px;text-align: center;">

  261. 	        		<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>

  262. 	        		<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>

  263. 	        	</div>

  264. 	        	<div style="width: 100%;height: 20%;min-width: 1024px;text-align: center;">

  265. 	        		<img style="position: fixed;bottom: 0;" src="images/ic_pulldown.png"/><br>

  266. 	        	</div>

  267. 	        </div>

  268. 	        <div class="swiper-slide s2" id="s2">

  269. 	        	<div style="width: 100%;height: 20%;min-width: 1024px;">

  270. 	        		<div style="width: 47%;" class="login_pic" id=""><img src="images/img_logo_gr.png"></div>

  271. 	        		<div style="width: 48%;" class="navigation_bar" id="">

  272. 	        			<div  id="nav-bar2" style="width: 400px;height: 50px;float: right;">

  273. 	        				<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>

  274. 		        			<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;">

  275. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  276. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">首页</div>

  277. 		        			</div>

  278. 		        			<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;">

  279. 		        				<div style="width: 16px;height: 16px;border-radius: 50%;background-color: #141c39;margin: 5px auto;position: relative;z-index: 1;" id=""></div>

  280. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">服务</div>

  281. 		        			</div>

  282. 		        			<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;">

  283. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  284. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">预订</div>

  285. 		        			</div>

  286. 		        			<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;">

  287. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  288. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">加入我们</div>

  289. 		        			</div>

  290. 	        			</div>

  291. 	        		</div>

  292. 	        	</div>

  293. 	        	<div style="width: 100%;height: 40%;min-height: 3.7rem;min-width: 10.24rem;text-align: center;margin-top: 1rem;margin-left: -1rem;">

  294. 	        		<img style="vertical-align: top;margin-top: 1.6rem;margin-right: 20px;" src="images/p3_t1.png">

  295. 	        		<img id="img_4" style="vertical-align: top;width: 4.5rem;min-height: 250px;min-width: 310px;" src="images/img_3.png">

  296. 	        		<div id="textAll" class="pic2_box" style="">

  297. 	        			<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>

  298. 	        			<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>

  299. 	        			<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>

  300. 	        			<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>

  301. 	        			<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>

  302. 	        		</div>

  303. 	        	</div>

  304. 	        	<div id="imgs" style="width: 100%;height: 20%;min-width: 1024px;text-align: center;">

  305. 	        		<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">

  306. 	        		<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">

  307. 	        		<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">

  308. 	        	</div>

  309. 	        </div>

  310. 	        <div class="swiper-slide s3" id="s3">

  311. 	        	<div style="width: 100%;height: 20%;min-width: 1024px;">

  312. 	        		<div style="width: 47%;" class="login_pic" id=""><img src="images/img_logo_gr.png"></div>

  313. 	        		<div style="width: 48%;" class="navigation_bar" id="">

  314. 	        			<div id="nav-bar3" style="width: 400px;height: 50px;float: right;">

  315. 	        				<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>

  316. 		        			<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;">

  317. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  318. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">首页</div>

  319. 		        			</div>

  320. 		        			<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;">

  321. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  322. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">服务</div>

  323. 		        			</div>

  324. 		        			<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;">

  325. 		        				<div style="width: 16px;height: 16px;border-radius: 50%;background-color: #141c39;margin: 5px auto;" id=""></div>

  326. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">预订</div>

  327. 		        			</div>

  328. 		        			<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;">

  329. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  330. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">加入我们</div>

  331. 		        			</div>

  332. 	        			</div>

  333. 	        		</div>

  334. 	        	</div>

  335. 	        	<div style="width: 100%;height: 50%;min-width: 1024px;text-align: center;margin-top: 1rem;">

  336. 	        		<img style="vertical-align: top;margin-top: 0.8rem;margin-right: 20px;" src="images/p2_t1.png">

  337. 	        		<img style="vertical-align: top;width: 3.6rem;height: 4.1rem;min-height: 3.1rem;min-width: 2.6rem;" src="images/img_p3.png">

  338. 	        		<div class="pic3_box" style="">

  339. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="pic2_box_span1 ani">关注微信服务号“蜘蛛出行”</div>

  340. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s" class="pic2_box_span2 ani">出行预订</div>

  341. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s" class="pic3_box_span3 ani">扫一扫 关注微信服务号“蜘蛛出行”</div>

  342. 	        			<div class="pic3_box_span4"><img style="width: 1.5rem;height: 1.5rem;min-width: 110px;min-height: 105px;" src="images/qrcode.jpg"></div>

  343. 	        		</div>

  344. 	        	</div>

  345. 	        </div>

  346. 	        <div class="swiper-slide s4" id="s4">

  347. 	        	<div style="width: 100%;height: 20%;min-width: 1024px;min-width: 868px;">

  348. 	        		<div style="width: 47%;" class="login_pic" id=""><img src="images/img_logo_gr.png"></div>

  349. 	        		<div style="width: 48%;" class="navigation_bar" id="">

  350. 	        			<div id="nav-bar4" style="width: 400px;height: 50px;float: right;">

  351. 	        				<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>

  352. 		        			<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;">

  353. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  354. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">首页</div>

  355. 		        			</div>

  356. 		        			<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;">

  357. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  358. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">服务</div>

  359. 		        			</div>

  360. 		        			<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;">

  361. 		        				<div style="width: 10px;height: 10px;border-radius: 50%;background-color: #898d9c;margin: 8px auto;" id=""></div>

  362. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">预订</div>

  363. 		        			</div>

  364. 		        			<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;">

  365. 		        				<div style="width: 16px;height: 16px;border-radius: 50%;background-color: #141c39;margin: 5px auto;" id=""></div>

  366. 		        				<div style="font-size: 16px;color: rgba(0,0,0,0.5);font-weight: bold;" id="">加入我们</div>

  367. 		        			</div>

  368. 	        			</div>

  369. 	        		</div>

  370. 	        	</div>

  371. 	        	<div style="width: 100%;height: 50%;min-width: 1024px;text-align: center;margin-top: 1rem;">

  372. 	        		<img style="margin-right: 20px;margin-bottom: 0.5rem;" src="images/p3_t1.png">

  373. 	        		<div style="width: 4.3rem;height: 3.4rem;display: inline-block;min-width: 320px;min-height: 240px;">

  374. 	        			<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"/>

  375. 	        			<img style="margin-bottom: 0.1rem;width: 2rem;height: 1.5rem;min-height: 110px;min-width: 150px;" src="images/img_office2.png"/>

  376. 	        			<img style="margin-right: 0.1rem;width: 2rem;height: 1.5rem;min-height: 110px;min-width: 150px;" src="images/img_office3.png"/>

  377. 	        			<img style="width: 2rem;height: 1.5rem;min-height: 110px;min-width: 150px;" src="images/img_office4.png"/>

  378. 	        		</div>

  379. 	        		<div class="pic3_box" style="vertical-align: top;">

  380. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" class="pic2_box_span1 ani">加入蜘蛛出行，成就更好的自己！</div>

  381. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s" class="pic4_box_span2 ani">加入我们</div>

  382. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s" class="pic4_box_span3 ani">职位介绍:</div>

  383. 	        			<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>

  384. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s" class="pic4_box_span4 ani">前端工程师</div>

  385. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.0s" class="pic4_box_span4 ani">管理培训生</div>

  386. 	        			<div swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s" class="pic4_box_span4 ani">PHP开发工程师</div>

  387. 	        			<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>

  388. 	        		</div>

  389. 	        	</div>

  390. 	        	<div class="footer">

  391. 	        		<div class="footer_div1">

  392. 	        			<div style="margin-right: 10px;">021-33280184 : 传真</div>

  393. 	        			<div style="margin-right: 10px;">蜘蛛行网络科技有限公司版权所有，@2016 <a href="http://www.miitbeian.gov.cn">沪ICP备16006417</a> : 版权所有</div>

  394. 	        		</div><div class="footer_div2">

  395. 	        			<div style="margin-left: 10px;">联系电话 : 021-52218088</div>

  396. 	        			<div style="margin-left: 10px;">公司地址 : 上海市闵行区申长路988弄虹桥万科中心1号楼701</div>

  397. 	        		</div>

  398. 	        	</div>

  399. 	        	

  400. 	        </div>

  401.     	</div>

  402.     	<div class="swiper-pagination"></div>

  403. 	</div>

  404. 	

  405. </body>

  406. 

  407. <script src="js/jquery-1.8.3.min.js"></script>

  408. <script src="js/swiper.min.js"></script>

  409. <script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>

  410. <script>

  411. $(document).ready(function(){

  412. 	console.log("一张网页，要经历怎样的过程，才能抵达用户面前？");

  413. 	console.log("一位新人，要经历怎样的成长，才能站在技术之巅？");

  414. 	console.log("探寻这里的秘密");

  415. 	console.log("体验这里的挑战");

  416. 	console.log("成为这里的主人");

  417. 	console.log("加入蜘蛛出行，你，可以影响世界。");

  418. 	console.log("请将简历发送至  HR@zhizhuchuxing.com");

  419. 	

  420. 

  421. 

  422. })

  423. 

  424. 

  425.     var myswiper = new Swiper('.swiper-container', {

  426. 		pagination: '.swiper-pagination',

  427.         direction: 'vertical',

  428.         slidesPerView: "auto",

  429.         paginationClickable: true,

  430.         mousewheelControl: true,

  431.         onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

  432. 		    //swiperAnimateCache(swiper); //隐藏动画元素 

  433. 		    swiperAnimate(swiper); //初始化完成开始动画

  434. 		}, 

  435. 		

  436. 		onTransitionStart: function(swiper){

  437.            	swiperAnimate(swiper);

  438.         },

  439. 		onSlideChangeEnd: function(swiper){ 

  440. 		    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

  441. 		} 

  442.     });

  443.     //

  444.     var spanIndex1 = $("#nav-bar1").children("div");

  445.     var spanIndex2 = $("#nav-bar2").children("div");

  446.     var spanIndex3 = $("#nav-bar3").children("div");

  447.     var spanIndex4 = $("#nav-bar4").children("div");

  448. 

  449. 	for (var i = 0; i < spanIndex1.length; i++) {

  450. 		spanIndex1[i].onclick = function(){

  451. 			for (var i = 0; i < spanIndex1.length; i++) {

  452. 				if(this == spanIndex1[i]){

  453. 					$(".swiper-pagination span").eq(i).trigger("click");

  454. 				}else{

  455. 					//spanIndex[i].className = "";

  456. 				}

  457. 			};

  458. 		}

  459. 	};

  460. 	for (var i = 0; i < spanIndex2.length; i++) {

  461. 		spanIndex2[i].onclick = function(){

  462. 			for (var i = 0; i < spanIndex2.length; i++) {

  463. 				if(this == spanIndex2[i]){

  464. 					$(".swiper-pagination span").eq(i).trigger("click");

  465. 				}else{

  466. 					//spanIndex[i].className = "";

  467. 				}

  468. 			};

  469. 		}

  470. 	};

  471. 	for (var i = 0; i < spanIndex3.length; i++) {

  472. 		spanIndex3[i].onclick = function(){

  473. 			for (var i = 0; i < spanIndex3.length; i++) {

  474. 				if(this == spanIndex3[i]){

  475. 					$(".swiper-pagination span").eq(i).trigger("click");

  476. 				}else{

  477. 					//spanIndex[i].className = "";

  478. 				}

  479. 			};

  480. 		}

  481. 	};

  482. 	for (var i = 0; i < spanIndex4.length; i++) {

  483. 		spanIndex4[i].onclick = function(){

  484. 			for (var i = 0; i < spanIndex4.length; i++) {

  485. 				if(this == spanIndex4[i]){

  486. 					$(".swiper-pagination span").eq(i).trigger("click");

  487. 				}else{

  488. 					//spanIndex[i].className = "";

  489. 				}

  490. 			};

  491. 		}

  492. 	};

  493. 	

  494. 	

  495. 	function cutImg(index){

  496. 		var text_mame = "深度抵达 游运结合";

  497. 		if(index=="img_1"){

  498. 			text_mame = "正规车辆 专业驾乘";

  499. 		}else if(index=="img_2"){

  500. 			text_mame = "宽敞空间 身心放松";

  501. 		}else{

  502. 			text_mame = "深度抵达 游运结合";

  503. 		}

  504. 		var text1 = $("."+index).text();

  505. 		$("#imgs").children().css("width","1.35rem");

  506. 		$("#"+index).css("width","1.75rem");

  507. 		$("#img_4").attr("src","images/"+index+".png");

  508. 		$("#textAll").children("div").removeClass("pic2_box_span5");

  509. 		$("#textAll").children("div").addClass("pic2_box_span3");

  510. 		$("."+index).addClass("pic2_box_span5");

  511. 		$("#text0").text(text1);

  512. 		$("#text_mame").text(text_mame);

  513. 		

  514. 	}

  515. </script>

  516. 

  517. </html>