├── README.md ├── images.zip ├── imgs.zip ├── index.css ├── index.html ├── index.js ├── mask01.png ├── mask02.png ├── reset.css └── zhong.ico /README.md: -------------------------------------------------------------------------------- 1 | # Hometown-travel-website 2 | 这是一个有关自己家乡的个人旅游网站的设计与制作，我来自重庆忠县，然后制作了多个页面，以及动画效果文字信息。通过HTML，css，JavaScript等语言进行完整的制作整个网站 3 | 4 | -------------------------------------------------------------------------------- /images.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qiqy17/Hometown-travel-website/291ad0e147bc58f5abe426311d4d4607e35f145e/images.zip -------------------------------------------------------------------------------- /imgs.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qiqy17/Hometown-travel-website/291ad0e147bc58f5abe426311d4d4607e35f145e/imgs.zip -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | ul.mydiv{ 2 | margin:auto; 3 | padding:0; 4 | list-style: none; 5 | } 6 | ul.mydiv li{ 7 | position: absolute; 8 | width:300px; 9 | -webkit-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 10 | -moz-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 11 | -o-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 12 | } 13 | ul.mydiv li:hover{ 14 | margin:-5px 0 0 -5px; 15 | width:600px; 16 | opacity: 1; 17 | z-index:2; 18 | cursor: pointer; 19 | } 20 | .mydiv-info{ 21 | position: absolute; 22 | top:20px; 23 | left:0; 24 | padding:10px 20px; 25 | background-color:rgba(255,255,255,0.3); 26 | border-top:1px solid rgba(255,255,255,0.6); 27 | border-bottom:1px solid #f1f1f1; 28 | z-index:1; 29 | } 30 | .mydiv-title{ 31 | font-family: "微软雅黑","黑体"; 32 | font-size:24px; 33 | font-weight: bold; 34 | padding:5px 0; 35 | } 36 | .mydiv-label{ 37 | padding:12px 0; 38 | } 39 | .mydiv-label span{ 40 | margin:0 4px; 41 | } 42 | .mydiv-detail{ 43 | text-indent: 24px; 44 | } 45 | /* 46 | */ 47 | ul.mydiva{ 48 | margin-top: 0px; 49 | padding:0; 50 | list-style: none; 51 | } 52 | ul.mydiva li{ 53 | position: absolute; 54 | width:600px; 55 | -webkit-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 56 | -moz-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 57 | -o-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 58 | } 59 | ul.mydiva li:hover{ 60 | margin:-5px 0 0 -5px; 61 | width:600px; 62 | opacity: 1; 63 | z-index:2; 64 | cursor: pointer; 65 | } 66 | .mydiva-info{ 67 | position: absolute; 68 | top:30px; 69 | left:0; 70 | padding:0px 0px; 71 | background-color:rgba(255,255,255,0.9); 72 | border-top:1px solid rgba(255,255,255,0.6); 73 | border-bottom:1px solid #f1f1f1; 74 | z-index:1; 75 | } 76 | .mydiva-title{ 77 | font-family: "微软雅黑","黑体"; 78 | font-size:24px; 79 | font-weight: bold; 80 | padding:5px 0; 81 | } 82 | .mydiva-label{ 83 | padding:12px 0; 84 | } 85 | .mydiva-label span{ 86 | margin:0 4px; 87 | } 88 | .mydiva-detail{ 89 | text-indent: 24px; 90 | } 91 | /**/ 92 | ul.mydivb{ 93 | margin:auto; 94 | padding:0; 95 | list-style: none; 96 | } 97 | ul.mydivb li{ 98 | position: absolute; 99 | width: 400px; 100 | height:300px; 101 | -webkit-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 102 | -moz-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 103 | -o-transition: width 0.3s ease,margin 0.3s ease,opacity 0.3s ease; 104 | } 105 | ul.mydivb li:hover{ 106 | margin:-5px 0 0 -5px; 107 | width: 400px; 108 | height:600px; 109 | opacity: 1; 110 | z-index:2; 111 | cursor: pointer; 112 | } 113 | .mydivb-info{ 114 | position: absolute; 115 | top:20px; 116 | left:0; 117 | padding:10px 20px; 118 | background-color:rgba(255,255,255,0.3); 119 | border-top:1px solid rgba(255,255,255,0.6); 120 | border-bottom:1px solid #f1f1f1; 121 | z-index:1; 122 | } 123 | .mydivb-title{ 124 | font-family: "微软雅黑","黑体"; 125 | font-size:24px; 126 | font-weight: bold; 127 | padding:5px 0; 128 | } 129 | .mydivb-label{ 130 | padding:12px 0; 131 | } 132 | .mydivb-label span{ 133 | margin:0 4px; 134 | } 135 | .mydivb-detail{ 136 | text-indent: 24px; 137 | } 138 | #tour figure{ 139 | color: white; 140 | display: inline-block; 141 | width: 380px; 142 | border:1px solid #ddd; 143 | border-radius:4px; 144 | margin:200px 50px 100px ; 145 | padding:4px; 146 | position: relative; 147 | } 148 | #tour figure img{ 149 | vertical-align: middle; 150 | } 151 | 152 | /* 头部样式 */ 153 | #head .headMain { 154 | width: 1100px; 155 | height: 80px; 156 | margin: 0 auto; 157 | position: relative; 158 | } 159 | 160 | #wrap { 161 | width: 100%; 162 | } 163 | 164 | #head { 165 | width: 100%; 166 | background-color: #fff !important; 167 | } 168 | 169 | #head .headMain .logo { 170 | float: left; 171 | margin-top: 30px; 172 | } 173 | 174 | #head .headMain .nav { 175 | float: right; 176 | margin-top: 50px; 177 | } 178 | 179 | #head .headMain .nav li { 180 | float: left; 181 | margin-left: 40px; 182 | position: relative; 183 | list-style: none; 184 | } 185 | 186 | #head .headMain .nav li .up { 187 | color: black; 188 | position: absolute; 189 | width: 0; 190 | overflow: hidden; 191 | transition: width 0.8s; 192 | white-space: nowrap; 193 | } 194 | 195 | #head .headMain .nav li .down { 196 | color: #c90606; 197 | } 198 | 199 | #head .headMain .nav li:hover .up { 200 | width: 100%; 201 | } 202 | 203 | /* 箭头样式 */ 204 | #head .headMain .arrow { 205 | width: 21px; 206 | height: 11px; 207 | background: url(./imgs/menuIndicator.png); 208 | position: absolute; 209 | left: 50%; 210 | bottom: -11px; 211 | z-index: 2; 212 | transition: left .8s; 213 | } 214 | 215 | #content { 216 | position: relative; 217 | overflow: hidden; 218 | width: 100%; 219 | } 220 | 221 | #content>.list { 222 | position: absolute; 223 | left: 0; 224 | top: 0; 225 | width: 100%; 226 | transition: top .8s; 227 | } 228 | 229 | #content>.list>li { 230 | position: relative; 231 | overflow: hidden; 232 | background-position: 50% 50% !important; 233 | } 234 | 235 | #content>.list>li>section { 236 | width: 1300px; 237 | height: 720px; 238 | position: absolute; 239 | left: 0px; 240 | right: 0px; 241 | top: 0; 242 | bottom: 0; 243 | margin: auto; 244 | } 245 | 246 | /* 第一屏 */ 247 | #content>.list>.home { 248 | background: url(imgs/bg1.jpg) no-repeat; 249 | } 250 | 251 | #content>.list>.home .home1 { 252 | width: 100%; 253 | height: 100%; 254 | perspective: 800px; 255 | transform-style: preserve-3d; 256 | } 257 | 258 | #content>.list>.home .home1>li { 259 | position: absolute; 260 | left: 0; 261 | right: 0; 262 | top: 0; 263 | bottom: 0; 264 | visibility: hidden; 265 | } 266 | 267 | #content>.list>.home .home1>li>div { 268 | color: white; 269 | text-align: center; 270 | margin-top: 200px; 271 | } 272 | 273 | #content>.list>.home .home1>li:nth-child(1) { 274 | background: url("./imgs/banner01.png"); 275 | } 276 | 277 | #content>.list>.home .home1>li:nth-child(2) { 278 | background: url("./imgs/banner02.png"); 279 | } 280 | 281 | #content>.list>.home .home1>li:nth-child(3) { 282 | background: url("./imgs/banner03.png"); 283 | } 284 | 285 | #content>.list>.home .home1>li:nth-child(4) { 286 | background: url("./imgs/banner04.png"); 287 | } 288 | #content>.list>.home .home1>li:nth-child(5) { 289 | background: url("./imgs/banner05.png"); 290 | } 291 | #content>.list>.home .home1>li:nth-child(6) { 292 | background: url("./imgs/banner06.png"); 293 | } 294 | /* 圆点布局 */ 295 | #content>.list>.home .home2 { 296 | position: absolute; 297 | left: 0; 298 | right: 0; 299 | bottom: 0; 300 | text-align: center; 301 | } 302 | 303 | #content>.list>.home .home2>li { 304 | width: 20px; 305 | height: 20px; 306 | border-radius: 50%; 307 | margin: 0 2px; 308 | background-color: rgba(255, 255, 255, .5); 309 | display: inline-block; 310 | box-shadow: 0 0 4px rgba(25, 25, 25, 0.8); 311 | cursor: pointer; 312 | } 313 | 314 | #content>.list>.home .home1>li.active { 315 | visibility: visible; 316 | } 317 | 318 | #content>.list>.home .home2>li.active { 319 | background-color: #fff; 320 | cursor: default; 321 | } 322 | 323 | /*从左往右 leftHide rightShow*/ 324 | #content>.list>.home .home1>li.leftHide { 325 | visibility: hidden; 326 | animation: 1s leftHide 1 linear; 327 | } 328 | 329 | #content>.list>.home .home1>li.rightShow { 330 | visibility: visible; 331 | animation: 1s rightShow 1 linear; 332 | } 333 | 334 | @keyframes leftHide { 335 | 0% { 336 | visibility: visible; 337 | } 338 | 339 | 50% { 340 | transform: translateX(-40%) rotateY(30deg) scale(.8); 341 | } 342 | 343 | 100% { 344 | transform: translateZ(-200px); 345 | } 346 | } 347 | 348 | @keyframes rightShow { 349 | 0% { 350 | visibility: hidden; 351 | transform: translateZ(-200px); 352 | } 353 | 354 | 50% { 355 | transform: translateX(40%) rotateY(-30deg) scale(.8); 356 | } 357 | } 358 | 359 | /*从右往左 leftShow rightHide*/ 360 | #content>.list>.home .home1>li.leftShow { 361 | visibility: visible; 362 | animation: 1s leftShow 1 linear; 363 | } 364 | 365 | #content>.list>.home .home1>li.rightHide { 366 | visibility: hidden; 367 | animation: 1s rightHide 1 linear; 368 | } 369 | 370 | @keyframes leftShow { 371 | 0% { 372 | visibility: hidden; 373 | transform: translateZ(-200px); 374 | } 375 | 376 | 50% { 377 | transform: translateX(-40%) rotateY(30deg) scale(.8); 378 | } 379 | } 380 | 381 | @keyframes rightHide { 382 | 0% { 383 | visibility: visible; 384 | } 385 | 386 | 50% { 387 | transform: translateX(40%) rotateY(-30deg) scale(.8); 388 | } 389 | 390 | 100% { 391 | transform: translateZ(-200px); 392 | } 393 | } 394 | 395 | /* 第二屏 */ 396 | #content>.list .course { 397 | background: url(imgs/bg2.png) no-repeat; 398 | } 399 | .course1{ 400 | margin-left: 700px; 401 | } 402 | .course1_text{ 403 | align-content: center; 404 | font-family: "微软雅黑", "黑体"; 405 | font-size: 36px; 406 | } 407 | .course1_text1{ 408 | align-content: flex-start; 409 | font-family: "微软雅黑", "黑体"; 410 | font-size: 18px; 411 | } 412 | #content>.list>.course .course3 { 413 | width: 680px; 414 | position: absolute; 415 | right: 200px; 416 | top: 520px; 417 | z-index: 2; 418 | } 419 | 420 | #content>.list>.course .course3 .item { 421 | float: left; 422 | width: 120px; 423 | height: 132px; 424 | position: relative; 425 | perspective: 800px; 426 | transform-style: preserve-3d; 427 | cursor: pointer; 428 | } 429 | 430 | #content>.list>.course .course3 .item .face, 431 | #content>.list>.course .course3 .item .backFace { 432 | position: absolute; 433 | top: 0; 434 | left: 0; 435 | width: 100%; 436 | height: 100%; 437 | box-sizing: border-box; 438 | padding: 15px; 439 | transition: transform 1s; 440 | } 441 | 442 | #content>.list>.course .course3 .item .backFace { 443 | background-position: 50% 50% !important; 444 | } 445 | 446 | #content>.list>.course .course3 .item:nth-of-type(1) .backFace { 447 | background: url(./imgs/bks.png) no-repeat; 448 | } 449 | 450 | #content>.list>.course .course3 .item:nth-of-type(2) .backFace { 451 | background: url(./imgs/binoli.png) no-repeat; 452 | } 453 | 454 | #content>.list>.course .course3 .item:nth-of-type(3) .backFace { 455 | background: url(./imgs/gu.png) no-repeat; 456 | } 457 | 458 | #content>.list>.course .course3 .item:nth-of-type(4) .backFace { 459 | background: url(./imgs/lbs.png) no-repeat; 460 | } 461 | 462 | #content>.list>.course .course3 .item:nth-of-type(5) .backFace { 463 | background: url(./imgs/apcoa.png) no-repeat; 464 | } 465 | 466 | #content>.list>.course .course3 .item:nth-of-type(6) .backFace { 467 | background: url(./imgs/hlx.png) no-repeat; 468 | } 469 | 470 | #content>.list>.course .course3 .item:nth-of-type(7) .backFace { 471 | background: url(./imgs/bks.png) no-repeat; 472 | } 473 | 474 | #content>.list>.course .course3 .item:nth-of-type(8) .backFace { 475 | background: url(./imgs/leonberg.png) no-repeat; 476 | } 477 | 478 | #content>.list>.course .course3 .item:nth-of-type(9) .backFace { 479 | background: url(./imgs/tata.png) no-repeat; 480 | } 481 | 482 | #content>.list>.course .course3 .item:nth-of-type(10) .backFace { 483 | background: url(./imgs/bks.png) no-repeat; 484 | } 485 | 486 | #content>.list>.course .course3 .item:nth-of-type(11) .backFace { 487 | background: url(./imgs/pcwelt.png) no-repeat; 488 | } 489 | 490 | #content>.list>.course .course3 .item:nth-of-type(12) .backFace { 491 | background: url(./imgs/bks.png) no-repeat; 492 | } 493 | 494 | #content>.list>.course .course3 .item .face { 495 | transform: rotateY(180deg); 496 | backface-visibility: hidden; 497 | background-color: darkseagreen; 498 | color: #fff; 499 | } 500 | 501 | #content>.list>.course .course3 .item:hover .face { 502 | transform: rotateY(360deg); 503 | } 504 | 505 | #content>.list>.course .course3 .item:hover .backFace { 506 | transform: rotateY(180deg); 507 | } 508 | 509 | #content>.list>.course .course3 .line { 510 | width: 9px; 511 | height: 410px; 512 | position: absolute; 513 | background: url(./imgs/plus_row.png) no-repeat; 514 | top: -7px; 515 | } 516 | 517 | #content>.list>.course .course3 .line:nth-of-type(1) { 518 | left: -5px; 519 | } 520 | 521 | #content>.list>.course .course3 .line:nth-of-type(2) { 522 | left: 115px; 523 | } 524 | 525 | #content>.list>.course .course3 .line:nth-of-type(3) { 526 | left: 235px; 527 | } 528 | 529 | #content>.list>.course .course3 .line:nth-of-type(4) { 530 | left: 355px; 531 | } 532 | 533 | #content>.list>.course .course3 .line:nth-of-type(5) { 534 | left: 475px; 535 | } 536 | 537 | /* 第三屏 */ 538 | #content>.list .works { 539 | background: url(imgs/bg3.jpg) no-repeat; 540 | background-size: cover; 541 | } 542 | 543 | #content>.list>.works .works1 { 544 | margin: 50px 0 100px 50px; 545 | position: relative; 546 | z-index: 2; 547 | } 548 | 549 | #content>.list>.works .works2 { 550 | margin-left: 50px; 551 | position: relative; 552 | z-index: 2; 553 | } 554 | 555 | #content>.list>.works .works2 .item { 556 | float: left; 557 | width: 220px; 558 | height: 133px; 559 | margin: 0 1px; 560 | position: relative; 561 | overflow: hidden; 562 | } 563 | 564 | #content>.list>.works .works2 .item .mask { 565 | position: absolute; 566 | left: 0; 567 | top: 0; 568 | bottom: 0; 569 | right: 0; 570 | background-color: black; 571 | box-sizing: border-box; 572 | padding: 10px; 573 | opacity: 0; 574 | color: #fff; 575 | transition: opacity 1.2s; 576 | } 577 | 578 | #content>.list>.works .works2 .item .mask .icon { 579 | width: 32px; 580 | height: 34px; 581 | /* background-color: burlywood; */ 582 | margin: 0 auto; 583 | margin-top: 10px; 584 | background: url(./imgs/zoomico.png); 585 | transition: background-position 1.2s; 586 | } 587 | 588 | #content>.list>.works .works2 .item .mask .icon:hover { 589 | background-position: 0 -35px; 590 | transition: background-position 1.2s; 591 | } 592 | 593 | #content>.list>.works .works2 .item:hover .mask { 594 | opacity: 0.8; 595 | } 596 | 597 | #content>.list>.works .works2 img { 598 | transition: transform 1s; 599 | } 600 | 601 | #content>.list>.works .works2 .item:hover img { 602 | transform: rotate(30deg) scale(1.5); 603 | } 604 | 605 | #content>.list>.works .works2 .item:last-of-type { 606 | width: 332px; 607 | } 608 | 609 | #content>.list>.works .works3 { 610 | width: 167px; 611 | height: 191px; 612 | background: url(./imgs/robot.png) no-repeat; 613 | position: absolute; 614 | z-index: 2; 615 | left: 900px; 616 | top: 170px; 617 | animation: works3Move 5s linear infinite; 618 | } 619 | 620 | @keyframes works3Move { 621 | 49% { 622 | transform: translateX(-500px) rotateY(0) 623 | } 624 | 625 | 50% { 626 | transform: translateX(-500px) rotateY(180deg) 627 | } 628 | 629 | 100% { 630 | transform: translateX(0) rotateY(180deg) 631 | } 632 | } 633 | 634 | #content>.list .about { 635 | background: url(imgs/bg4.jpg) no-repeat; 636 | } 637 | 638 | #content>.list .about .about1 { 639 | margin: 50px 0 100px 50px; 640 | } 641 | 642 | #content>.list .about .about2 { 643 | margin-left: 50px; 644 | width: 400px; 645 | } 646 | 647 | #content>.list .about .about4 { 648 | width: 357px; 649 | height: 998px; 650 | position: absolute; 651 | left: 50%; 652 | top: -100px; 653 | background: url(./imgs/greenLine.png); 654 | } 655 | 656 | #content>.list .about .about3>.item { 657 | width: 260px; 658 | height: 200px; 659 | border: 5px solid rgba(255, 255, 255, .5); 660 | border-radius: 8px; 661 | position: absolute; 662 | z-index: 2; 663 | overflow: hidden; 664 | cursor: pointer; 665 | } 666 | 667 | #content>.list .about .about3>.item:nth-child(1) { 668 | left: 750px; 669 | top: 50px; 670 | } 671 | 672 | #content>.list .about .about3>.item:nth-child(2) { 673 | left: 600px; 674 | top: 290px; 675 | } 676 | 677 | #content>.list .about .about3>.item>span, 678 | #content>.list .about .about3>.item>ul { 679 | position: absolute; 680 | left: 0; 681 | top: 0; 682 | right: 0; 683 | bottom: 0; 684 | } 685 | 686 | #content>.list .about .about3>.item>ul>li { 687 | float: left; 688 | position: relative; 689 | overflow: hidden; 690 | } 691 | 692 | #content>.list .about .about3>.item>ul>li>img { 693 | position: absolute; 694 | transition: top .5s, left .5s; 695 | } 696 | 697 | #content>.list .about .about3>.item:nth-child(1)>span { 698 | background: url(./imgs/about2.jpg) no-repeat; 699 | transform: scale(1.5); 700 | transition: transform 1s; 701 | } 702 | 703 | #content>.list .about .about3>.item:nth-child(2)>span { 704 | background: url(./imgs/about4.jpg) no-repeat; 705 | transform: scale(1.5); 706 | transition: transform 1s; 707 | 708 | } 709 | 710 | #content>.list .about .about3>.item:hover span { 711 | transform: scale(1); 712 | } 713 | 714 | /* 第五屏 */ 715 | #content>.list>.team { 716 | background: url(imgs/bg5.jpg) no-repeat; 717 | } 718 | 719 | #content>.list>.team .team1 { 720 | width: 400px; 721 | margin: 50px; 722 | float: left; 723 | } 724 | 725 | #content>.list .team .team2 { 726 | width: 400px; 727 | margin: 50px; 728 | float: right; 729 | } 730 | 731 | #content>.list>.team .team3 { 732 | width: 944px; 733 | height: 448px; 734 | position: absolute; 735 | top: 240px; 736 | left: 50%; 737 | transform: translateX(-50%); 738 | } 739 | 740 | #content>.list>.team .team3 ul { 741 | position: relative; 742 | height: 100%; 743 | } 744 | 745 | #content>.list>.team .team3 ul>li { 746 | width: 118px; 747 | height: 100%; 748 | background: url("./imgs/team.png") no-repeat; 749 | float: left; 750 | transition: opacity 1s; 751 | } 752 | 753 | #content>.list>.team .team3 ul>li:nth-child(1) { 754 | background-position: 0 0; 755 | } 756 | 757 | #content>.list>.team .team3 ul>li:nth-child(2) { 758 | background-position: -118px 0; 759 | } 760 | 761 | #content>.list>.team .team3 ul>li:nth-child(3) { 762 | background-position: -236px 0; 763 | } 764 | 765 | #content>.list>.team .team3 ul>li:nth-child(4) { 766 | background-position: -354px 0; 767 | } 768 | 769 | #content>.list>.team .team3 ul>li:nth-child(5) { 770 | background-position: -472px 0; 771 | } 772 | 773 | #content>.list>.team .team3 ul>li:nth-child(6) { 774 | background-position: -590px 0; 775 | } 776 | 777 | #content>.list>.team .team3 ul>li:nth-child(7) { 778 | background-position: -708px 0; 779 | } 780 | 781 | #content>.list>.team .team3 ul>li:nth-child(8) { 782 | background-position: -826px 0; 783 | } 784 | 785 | 786 | /*第六屏*/ 787 | #content>.list>.ad { 788 | background: url(imgs/bg6.jpg) no-repeat; 789 | } 790 | /*第七屏*/ 791 | #content>.list>.add { 792 | background: url(imgs/bg7.jpg) no-repeat; 793 | } 794 | /* 圆点 */ 795 | #content>.dot { 796 | position: fixed; 797 | right: 10px; 798 | top: 50%; 799 | } 800 | 801 | #content>.dot>li { 802 | width: 8px; 803 | height: 8px; 804 | border: 2px solid #c90606; 805 | margin-top: 10px; 806 | border-radius: 50%; 807 | cursor: pointer; 808 | } 809 | 810 | #content>.dot>li:hover { 811 | background-color: #fff; 812 | } 813 | 814 | #content>.dot>li.active { 815 | background-color: #fff; 816 | } 817 | 818 | /* 出入场 */ 819 | #content>.list>.home .home1, 820 | #content>.list>.home .home2 { 821 | transition: transform 1s, opacity 1s; 822 | } 823 | 824 | /*#content .course .plane1 {*/ 825 | /*width: 359px;*/ 826 | /*height: 283px;*/ 827 | /*background: url(./imgs/plane1.png) no-repeat;*/ 828 | /*position: absolute;*/ 829 | /*left: 300px;*/ 830 | /*top: -100px;*/ 831 | /*transition: 1s;*/ 832 | /*}*/ 833 | 834 | /*#content .course .plane2 {*/ 835 | /*width: 309px;*/ 836 | /*height: 249px;*/ 837 | /*background: url(./imgs/plane2.png) no-repeat;*/ 838 | /*position: absolute;*/ 839 | /*left: -100px;*/ 840 | /*top: 200px;*/ 841 | /*transition: 1s;*/ 842 | /*}*/ 843 | 844 | /*#content .course .plane3 {*/ 845 | /*width: 230px;*/ 846 | /*height: 182px;*/ 847 | /*background: url(./imgs/plane3.png) no-repeat;*/ 848 | /*position: absolute;*/ 849 | /*left: 300px;*/ 850 | /*top: 400px;*/ 851 | /*transition: 1s;*/ 852 | /*}*/ 853 | 854 | #content .works .pencel1 { 855 | width: 180px; 856 | height: 97px; 857 | background: url(./imgs/pencel1.png) no-repeat; 858 | position: absolute; 859 | transition: 1s; 860 | left: 500px; 861 | top: 0; 862 | } 863 | 864 | #content .works .pencel2 { 865 | width: 268px; 866 | height: 38px; 867 | background: url(./imgs/pencel2.png) no-repeat; 868 | position: absolute; 869 | transition: 1s; 870 | left: 300px; 871 | top: 250px; 872 | } 873 | 874 | #content .works .pencel3 { 875 | width: 441px; 876 | height: 231px; 877 | background: url(./imgs/pencel3.png) no-repeat; 878 | position: absolute; 879 | transition: 1s; 880 | left: 650px; 881 | top: 300px; 882 | } 883 | 884 | #content>.list>.about .about3>.item, 885 | #content>.list>.team .team1, 886 | #content>.list>.team .team2 { 887 | transition: 1s transform; 888 | } 889 | 890 | /* 音频 */ 891 | #head>.headMain .music { 892 | width: 14px; 893 | height: 14px; 894 | background: url(./imgs/musicon.gif); 895 | float: left; 896 | margin: 50px 0 0 5px; 897 | cursor: pointer; 898 | } 899 | 900 | /* 开机动画 */ 901 | #mask { 902 | height: 100%; 903 | width: 100%; 904 | position: absolute; 905 | z-index: 99; 906 | margin: auto; 907 | } 908 | 909 | #mask .up { 910 | /*margin: auto;*/ 911 | width: 100%; 912 | height: 100%; 913 | background: url(./imgs/mask01.png); 914 | transition: 2s height; 915 | } 916 | 917 | #mask .down { 918 | /*margin: auto;*/ 919 | width: 100%; 920 | height: 50%; 921 | background: url(./imgs/mask02.png); 922 | transition: 2s height; 923 | position: absolute; 924 | bottom: 0; 925 | } 926 | 927 | #mask .line { 928 | height: 8px; 929 | width: 0; 930 | background-color: #c90606; 931 | position: absolute; 932 | left: 0; 933 | top: 50%; 934 | margin-top: -2px; 935 | z-index: 111; 936 | transition: width 2s; 937 | } 938 | 939 | /*.playBtn, .muntedBtn, .soundBtn, .pause, .nextBtn {*/ 940 | /*width: 119px;*/ 941 | /*height: 119px;*/ 942 | /*margin-top: 10px;*/ 943 | /*}*/ 944 | 945 | /*.playBtn {*/ 946 | /*display: inline-block;*/ 947 | /*background: url(img/pause.png) no-repeat;*/ 948 | /*}*/ 949 | 950 | /*.muntedBtn {*/ 951 | /*display: inline-block;*/ 952 | /*background: url(img/sound.png) no-repeat;*/ 953 | /*}*/ 954 | 955 | /*.soundBtn {*/ 956 | /*display: inline-block;*/ 957 | /*background: url(img/mute.png) no-repeat;*/ 958 | /*}*/ 959 | 960 | /*.pause {*/ 961 | /*display: inline-block;*/ 962 | /*background: url(img/play.png) no-repeat;*/ 963 | /*}*/ 964 | 965 | /*.nextBtn {*/ 966 | /*display: inline-block;*/ 967 | /*float: right;*/ 968 | /*background: url(img/prev.jpg) no-repeat;*/ 969 | /*}*/ 970 | 971 | /*.range {*/ 972 | /*width: 100%;*/ 973 | /*height: 5px;*/ 974 | /*border-radius: 5px;*/ 975 | /*border: 1px solid #CCCCCC;*/ 976 | /*}*/ 977 | 978 | /*.range:hover {*/ 979 | /*!*border: 2px solid green;*!*/ 980 | /*box-shadow: 2px 2px 10px #ccc, -2px -4px 10px #ccc;*/ 981 | /*}*/ 982 | 983 | /*.rangem {*/ 984 | /*display: block;*/ 985 | /*height: 100%;*/ 986 | /*width: 0%;*/ 987 | /*border-radius: 5px;*/ 988 | /*background: #e7a2a2;*/ 989 | /*}*/ 990 | 991 | /*input {*/ 992 | /*float: right;*/ 993 | /*margin-top: 20px;*/ 994 | /*margin-left: 20px;*/ 995 | /*}*/ 996 | 997 | /*#player1 {*/ 998 | /*float: left;*/ 999 | /*}*/ 1000 | 1001 | video{ 1002 | margin-top: 0px; 1003 | } 1004 | footer{ 1005 | margin-top: 100px; 1006 | width: 100%; 1007 | background: #e7a2a2; 1008 | color: white; 1009 | 1010 | } 1011 | 1012 | .container-footer-all{ 1013 | width: 100%; 1014 | max-width: 1200px; 1015 | margin: auto; 1016 | padding: 40px; 1017 | } 1018 | 1019 | .container-body{ 1020 | display: flex; 1021 | justify-content: space-between; 1022 | } 1023 | 1024 | .colum1{ 1025 | max-width: 400px; 1026 | } 1027 | 1028 | .colum1 h1{ 1029 | font-size: 22px; 1030 | } 1031 | 1032 | .colum1 p{ 1033 | font-size: 14px; 1034 | color: #C7C7C7; 1035 | margin-top: 20px; 1036 | } 1037 | 1038 | .colum2{ 1039 | max-width: 400px; 1040 | 1041 | } 1042 | 1043 | .colum2 h1{ 1044 | font-size: 22px; 1045 | } 1046 | 1047 | .row{ 1048 | margin-top: 20px; 1049 | display: flex; 1050 | } 1051 | 1052 | .row img{ 1053 | width: 36px; 1054 | height: 36px; 1055 | } 1056 | 1057 | .row label{ 1058 | margin-top: 10px; 1059 | margin-left: 20px; 1060 | color: #C7C7C7; 1061 | } 1062 | 1063 | .colum3{ 1064 | max-width: 400px; 1065 | } 1066 | 1067 | .colum3 h1{ 1068 | font-size: 22px; 1069 | } 1070 | 1071 | .row2{ 1072 | margin-top: 20px; 1073 | display: flex; 1074 | } 1075 | 1076 | .row2 img{ 1077 | width: 36px; 1078 | height: 36px; 1079 | } 1080 | 1081 | .row2 label{ 1082 | margin-top: 10px; 1083 | margin-left: 20px; 1084 | max-width: 140px; 1085 | } 1086 | 1087 | .container-footer{ 1088 | width: 100%; 1089 | background: #c90606; 1090 | } 1091 | 1092 | .footer{ 1093 | max-width: 1200px; 1094 | margin: auto; 1095 | display: flex; 1096 | justify-content: space-between; 1097 | padding: 20px; 1098 | } 1099 | 1100 | .copyright{ 1101 | color: #e7a2a2; 1102 | } 1103 | 1104 | .copyright a{ 1105 | text-decoration: none; 1106 | color: white; 1107 | font-weight: bold; 1108 | } 1109 | 1110 | .information a{ 1111 | text-decoration: none; 1112 | color: #e7a2a2; 1113 | } 1114 | 1115 | 1116 | @media screen and (max-width: 1100px){ 1117 | 1118 | .container-body{ 1119 | flex-wrap: wrap; 1120 | } 1121 | 1122 | .colum1{ 1123 | max-width: 100%; 1124 | } 1125 | 1126 | .colum2, 1127 | .colum3{ 1128 | margin-top: 40px; 1129 | } 1130 | } 1131 | #roll{width:100%;height:300px;position:relative;overflow: hidden;margin-bottom: 70px;} 1132 | #roll ul{width:220%;height:100%;overflow: hidden;position: absolute;left:-9px;transition: all 1s linear;} 1133 | #roll ul li{float:left;width:7%;height:300px;margin-left:0.57%;} 1134 | #roll ul li p{font-size:0.8rem;color:gray;text-align: left;width:100%;}/*===设置图片标题===*/ 1135 | #roll ul li p .figure{width:30px;height:30px;border-radius:50%;margin-top:10px;}/*===设置小图片===*/ 1136 | #roll ul li p .figure:hover{transform:rotate(360deg);transition: all 1s linear;width:50px;height:50px;} 1137 | #roll ul li p .figure:before{width:0;height:0;}/*===清除大图片中设置before，after带来的影响===*/ 1138 | #roll ul li p .figure:after{width:0;height:0;}/*===清除大图片中设置before，after带来的影响===*/ 1139 | #roll ul li p .figure img{width:100%;height:100%;}/*===设置小图片===*/ 1140 | 1141 | #roll ul li a{display:inline-block;width:100%;height:193px;position: relative;overflow: hidden;border-radius: 5px;}/*====设置图片====*/ 1142 | #roll ul li a img{width:100%;height:100%;}/*====设置图片参数====*/ 1143 | #roll ul li a span{ 1144 | position:absolute; 1145 | width:100px;height:30px; 1146 | /*border:1px solid red;*/ 1147 | z-index: 10; 1148 | left:50%;top:50%; 1149 | transform: translateX(-50%) translateY(-50%); 1150 | font-size:1.5rem; 1151 | color:white; 1152 | }/*====设置图片备注====*/ 1153 | #roll ul li a:before{ 1154 | content:''; 1155 | width:100%; 1156 | height:25%; 1157 | position:absolute; 1158 | left:0;top:25%; 1159 | /*background:rgba(0,0,15,0.1);*/ 1160 | /*box-shadow: 0 0 10px black;*/ 1161 | z-index:9; 1162 | transition: all 1s linear; 1163 | background:linear-gradient(to top,transparent ,rgba(0,0,15,0.2),transparent); 1164 | }/*===设置图片阴影样式===*/ 1165 | #roll ul li a:hover:before{top:-20%;}/*===设置图片鼠标事件阴影样式变化===*/ 1166 | #roll ul li a:hover:after{bottom:-20%;}/*===设置图片鼠标事件阴影样式变化===*/ 1167 | #roll ul li a:after{ 1168 | content:''; 1169 | width:100%;height:25%; 1170 | position:absolute; 1171 | left:0;bottom:25%; 1172 | /*background:rgba(0,0,15,0.1);*/ 1173 | z-index:9; 1174 | transition: all 1s linear; 1175 | background:linear-gradient(to bottom,transparent,rgba(0,0,15,0.2) ,transparent); 1176 | }/*===设置图片阴影样式===*/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 忠县风景区旅游官网 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 |
20 |
21 | 22 |
23 | 110 |
111 | 626 | 635 |
636 |
637 | 638 | 639 | 640 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | var arrow = document.getElementsByClassName("arrow")[0]; 3 | var liNodes = document.querySelectorAll("#head .headMain .nav li"); 4 | var upNodes = document.querySelectorAll("#head .headMain .nav li .up"); 5 | var firstLiNode = liNodes[0]; 6 | var fistUpNode = firstLiNode.querySelector(".up"); 7 | var head = document.getElementById('head'); 8 | var content = document.getElementById('content'); 9 | var cliNodes = document.querySelectorAll("#content .list > li"); 10 | var cList = document.querySelector('#content .list'); 11 | var home2LiNodes = document.querySelectorAll("#content>.list>.home .home2>li"); 12 | var home1LiNodes = document.querySelectorAll("#content>.list>.home .home1>li"); 13 | var home1 = document.querySelector("#content>.list>.home .home1"); 14 | var aboutUls = document.querySelectorAll("#content>.list .about .about3 > .item > ul") 15 | var dotLis = document.querySelectorAll("#content> .dot > li") 16 | var team3 = document.querySelector("#content > .list > .team .team3") 17 | var team3Lis = document.querySelectorAll("#content > .list > .team .team3 ul > li"); 18 | var mask = document.querySelector("#mask"); 19 | var line = document.querySelector("#mask .line"); 20 | var mians = document.querySelectorAll("#mask div"); 21 | var now = 0; 22 | var timer = 0; 23 | var oldIndex = 0; 24 | var timer3D = 0; 25 | var autoIndex = 0; 26 | var preIndex = 0; 27 | // 开机动画 28 | loadingAn(); 29 | 30 | function loadingAn() { 31 | var arr = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg', 'about1.jpg', 'about2.jpg', 32 | 'about3.jpg', 'about4.jpg', 'worksimg1.jpg', 'worksimg2.jpg', 'worksimg3.jpg', 'worksimg4.jpg', 33 | 'team.png', 'greenLine.png' 34 | ]; 35 | var flag = 0; 36 | for (var i = 0; i < arr.length; i++) { 37 | var img = new Image(); 38 | img.src = "imgs/" + arr[i]; 39 | img.onload = function () { 40 | flag++; 41 | line.style.width = flag / arr.length * 100 + "%"; 42 | } 43 | } 44 | line.addEventListener("transitionend", function () { 45 | if (flag === arr.length) { 46 | for (var i = 0; i < mians.length; i++) { 47 | mians[i].style.height = 0 + "px"; 48 | } 49 | this.style.display = "none"; 50 | } 51 | }) 52 | mians[0].addEventListener("transitionend", function () { 53 | mask.remove(); 54 | audio.play(); 55 | home3D(); 56 | }) 57 | } 58 | // 音频 59 | var music = document.querySelector("#head > .headMain .music"); 60 | var audio = document.querySelector("#head > .headMain .music audio"); 61 | music.onclick = function () { 62 | if (audio.paused) { 63 | audio.play(); 64 | music.style.background = "url(./imgs/musicon.gif)" 65 | } else { 66 | audio.pause(); 67 | music.style.background = "url(./imgs/musicoff.gif)" 68 | } 69 | } 70 | // 出入场动画 71 | var anArr = [{ 72 | inAn: function () { 73 | var home1 = document.querySelector("#content>.list>.home .home1"); 74 | var home2 = document.querySelector("#content>.list>.home .home2"); 75 | home1.style.transform = "translateY(0)"; 76 | home2.style.transform = "translateY(0)"; 77 | home1.style.opacity = 1; 78 | home2.style.opacity = 1; 79 | }, 80 | outAn: function () { 81 | var home1 = document.querySelector("#content>.list>.home .home1"); 82 | var home2 = document.querySelector("#content>.list>.home .home2"); 83 | home1.style.transform = "translateY(-400px)"; 84 | home2.style.transform = "translateY(100px)"; 85 | home1.style.opacity = 0; 86 | home2.style.opacity = 0; 87 | }, 88 | }, 89 | { 90 | inAn: function () { 91 | var plane1 = document.querySelector("#content .course .plane1"); 92 | var plane2 = document.querySelector("#content .course .plane2"); 93 | var plane3 = document.querySelector("#content .course .plane3"); 94 | plane1.style.transform = "translate(0,0)"; 95 | plane2.style.transform = "translate(0,0)"; 96 | plane3.style.transform = "translate(0,0)"; 97 | }, 98 | outAn: function () { 99 | var plane1 = document.querySelector("#content .course .plane1"); 100 | var plane2 = document.querySelector("#content .course .plane2"); 101 | var plane3 = document.querySelector("#content .course .plane3"); 102 | plane1.style.transform = "translate(-200px,-200px)"; 103 | plane2.style.transform = "translate(-200px,200px)"; 104 | plane3.style.transform = "translate(200px,-200px)"; 105 | } 106 | }, 107 | { 108 | inAn: function () { 109 | var pencel1 = document.querySelector("#content .works .pencel1"); 110 | var pencel2 = document.querySelector("#content .works .pencel2"); 111 | var pencel3 = document.querySelector("#content .works .pencel3"); 112 | pencel1.style.transform = "translateY(0)"; 113 | pencel2.style.transform = "translateY(0)"; 114 | pencel3.style.transform = "translateY(0)"; 115 | }, 116 | outAn: function () { 117 | var pencel1 = document.querySelector("#content .works .pencel1"); 118 | var pencel2 = document.querySelector("#content .works .pencel2"); 119 | var pencel3 = document.querySelector("#content .works .pencel3"); 120 | pencel1.style.transform = "translateY(-100px)"; 121 | pencel2.style.transform = "translateY(100px)"; 122 | pencel3.style.transform = "translateY(100px)"; 123 | }, 124 | }, 125 | { 126 | inAn: function () { 127 | var Rect1 = document.querySelector( 128 | "#content > .list > .about .about3 > .item:nth-child(1)"); 129 | var Rect2 = document.querySelector( 130 | "#content > .list > .about .about3 > .item:nth-child(2)"); 131 | Rect1.style.transform = "rotate(0)"; 132 | Rect2.style.transform = "rotate(0)"; 133 | }, 134 | outAn: function () { 135 | var Rect1 = document.querySelector( 136 | "#content > .list > .about .about3 > .item:nth-child(1)"); 137 | var Rect2 = document.querySelector( 138 | "#content > .list > .about .about3 > .item:nth-child(2)"); 139 | Rect1.style.transform = "rotate(45deg)"; 140 | Rect2.style.transform = "rotate(-45deg)"; 141 | }, 142 | }, 143 | { 144 | inAn: function () { 145 | var Rect1 = document.querySelector("#content>.list>.team .team1"); 146 | var Rect2 = document.querySelector("#content>.list>.team .team2"); 147 | Rect1.style.transform = "translateX(0)"; 148 | Rect2.style.transform = "translateX(0)"; 149 | }, 150 | outAn: function () { 151 | var Rect1 = document.querySelector("#content>.list>.team .team1"); 152 | var Rect2 = document.querySelector("#content>.list>.team .team2"); 153 | 154 | Rect1.style.transform = "translateX(-200px)"; 155 | Rect2.style.transform = "translateX(200px)"; 156 | } 157 | } 158 | ] 159 | for (var i = 0; i < anArr.length; i++) { 160 | anArr[i]["outAn"](); 161 | } 162 | setTimeout(function () { 163 | anArr[0].inAn(); 164 | }, 2000) 165 | //第四屏图片效果 166 | picBoom(); 167 | 168 | function picBoom() { 169 | for (var i = 0; i < aboutUls.length; i++) { 170 | change(aboutUls[i]); 171 | } 172 | 173 | function change(Ul) { 174 | var src = Ul.dataset.src; 175 | var w = Ul.offsetWidth / 2; 176 | var h = Ul.offsetHeight / 2; 177 | for (var i = 0; i < 4; i++) { 178 | var liNode = document.createElement("li"); 179 | liNode.style.width = w + "px"; 180 | liNode.style.height = h + "px"; 181 | var imgNode = document.createElement("img"); 182 | imgNode.style.left = -(i % 2) * w + "px"; 183 | imgNode.style.top = -Math.floor(i / 2) * h + "px"; 184 | imgNode.src = src; 185 | liNode.appendChild(imgNode); 186 | Ul.appendChild(liNode); 187 | } 188 | Ul.onmouseenter = function () { 189 | var imgNodes = this.querySelectorAll("ul>li>img"); 190 | imgNodes[0].style.top = h + "px"; 191 | imgNodes[1].style.left = -2 * w + "px"; 192 | imgNodes[2].style.left = w + "px"; 193 | imgNodes[3].style.top = -2 * h + "px"; 194 | } 195 | Ul.onmouseleave = function () { 196 | var imgNodes = this.querySelectorAll("ul>li>img"); 197 | imgNodes[0].style.top = 0 + "px"; 198 | imgNodes[1].style.left = -w + "px"; 199 | imgNodes[2].style.left = 0 + "px"; 200 | imgNodes[3].style.top = -h + "px"; 201 | } 202 | } 203 | } 204 | 205 | // 第五屏 206 | // buibui(); 207 | // 208 | // function buibui() { 209 | // for (var i = 0; i < team3Lis.length; i++) { 210 | // team3Lis[i].onmouseenter = function () { 211 | // for (var i = 0; i < team3Lis.length; i++) { 212 | // team3Lis[i].style.opacity = .3; 213 | // } 214 | // this.style.opacity = 1; 215 | // } 216 | // team3Lis[i].onmouseleave = function () { 217 | // for (var i = 0; i < team3Lis.length; i++) { 218 | // team3Lis[i].style.opacity = 1; 219 | // } 220 | // } 221 | // } 222 | // } 223 | // 第一屏3D 224 | function home3D() { 225 | for (var i = 0; i < home2LiNodes.length; i++) { 226 | home2LiNodes[i].index = i; 227 | home2LiNodes[i].onclick = function () { 228 | clearInterval(timer3D); 229 | for (var i = 0; i < home2LiNodes.length; i++) { 230 | home2LiNodes[i].classList.remove("active"); 231 | } 232 | this.classList.add("active"); 233 | // 从左往右点 234 | if (this.index > oldIndex) { 235 | home1LiNodes[this.index].classList.remove("rightHide") 236 | home1LiNodes[this.index].classList.remove("leftHide") 237 | home1LiNodes[this.index].classList.remove("leftShow"); 238 | home1LiNodes[this.index].classList.add("rightShow"); 239 | home1LiNodes[oldIndex].classList.remove("rightHide") 240 | home1LiNodes[oldIndex].classList.remove("leftShow") 241 | home1LiNodes[oldIndex].classList.remove("rightShow"); 242 | home1LiNodes[oldIndex].classList.add("leftHide"); 243 | } else if (this.index < oldIndex) { 244 | home1LiNodes[this.index].classList.remove("rightShow"); 245 | home1LiNodes[this.index].classList.remove("leftHide"); 246 | home1LiNodes[this.index].classList.remove("rightHide"); 247 | home1LiNodes[this.index].classList.add("leftShow"); 248 | home1LiNodes[oldIndex].classList.remove("leftShow"); 249 | home1LiNodes[oldIndex].classList.remove("rightShow"); 250 | home1LiNodes[oldIndex].classList.remove("leftHide"); 251 | home1LiNodes[oldIndex].classList.add("rightHide"); 252 | } 253 | oldIndex = this.index; 254 | autoIndex = this.index; 255 | } 256 | } 257 | 258 | // 从左向右自动轮播 259 | move3D(); 260 | 261 | function move3D() { 262 | clearInterval(timer3D); 263 | timer3D = setInterval(() => { 264 | autoIndex++; 265 | // 无缝轮播 266 | if (autoIndex == home1LiNodes.length) { 267 | autoIndex = 0; 268 | } 269 | for (var i = 0; i < home2LiNodes.length; i++) { 270 | home2LiNodes[i].classList.remove("active"); 271 | } 272 | home2LiNodes[autoIndex].classList.add("active"); 273 | home1LiNodes[autoIndex].classList.remove("rightHide"); 274 | home1LiNodes[autoIndex].classList.remove("leftHide"); 275 | home1LiNodes[autoIndex].classList.remove("leftShow"); 276 | home1LiNodes[autoIndex].classList.add("rightShow"); 277 | home1LiNodes[oldIndex].classList.remove("rightHide"); 278 | home1LiNodes[oldIndex].classList.remove("leftShow"); 279 | home1LiNodes[oldIndex].classList.remove("rightShow"); 280 | home1LiNodes[oldIndex].classList.add("leftHide"); 281 | // 自动和手动同步 282 | oldIndex = autoIndex; 283 | }, 2000); 284 | } 285 | 286 | home1.onmouseenter = function () { 287 | clearInterval(timer3D) 288 | } 289 | home1.onmouseleave = function () { 290 | move3D(); 291 | } 292 | } 293 | 294 | //改变视口重置 295 | window.onresize = function () { 296 | contentBind(); 297 | cList.style.top = -now * (document.documentElement.clientHeight - head.offsetHeight) + "px"; 298 | arrow.style.left = liNodes[now].offsetLeft + liNodes[now].offsetWidth / 2 - arrow.offsetWidth / 2 + 299 | "px"; 300 | } 301 | //内容交互 302 | if (content.addEventListener) { 303 | content.addEventListener("DOMMouseScroll", function (event) { 304 | event = event || window.event; 305 | clearTimeout(timer); 306 | timer = setTimeout(() => { 307 | fn(event); 308 | }, 200); 309 | }); 310 | } 311 | content.onmousewheel = function (event) { 312 | event = event || window.event; 313 | clearTimeout(timer); 314 | timer = setTimeout(() => { 315 | fn(event); 316 | }, 200); 317 | }; 318 | 319 | function fn(event) { 320 | event = event || window.event; 321 | var dir = ''; 322 | if (event.wheelDelta) { 323 | dir = event.wheelDelta > 0 ? "up" : "down"; 324 | } 325 | if (event.detail) { 326 | dir = event.detail < 0 ? "up" : "down" 327 | } 328 | preIndex = now; 329 | switch (dir) { 330 | case "up": 331 | if (now > 0) { 332 | now--; 333 | move(now); 334 | } 335 | break; 336 | case "down": 337 | if (now < cliNodes.length - 1) { 338 | now++; 339 | move(now); 340 | } 341 | break; 342 | } 343 | } 344 | contentBind(); 345 | 346 | function contentBind() { 347 | content.style.height = document.documentElement.clientHeight - head.offsetHeight + "px"; 348 | for (var i = 0; i < cliNodes.length; i++) { 349 | cliNodes[i].style.height = document.documentElement.clientHeight - head.offsetHeight + "px"; 350 | } 351 | } 352 | 353 | // 头部交互 354 | headBind(); 355 | 356 | function headBind() { 357 | fistUpNode.style.width = "100%"; 358 | arrow.style.left = firstLiNode.offsetLeft + firstLiNode.offsetWidth / 2 - arrow.offsetWidth / 2 + "px"; 359 | // 箭头随点击事件移动 360 | for (var i = 0; i < liNodes.length; i++) { 361 | liNodes[i].index = i; 362 | liNodes[i].onclick = function () { 363 | preIndex = now; 364 | move(this.index); 365 | now = this.index; 366 | } 367 | } 368 | for (var i = 0; i < dotLis.length; i++) { 369 | dotLis[i].index = i; 370 | dotLis[i].onclick = function () { 371 | preIndex = now; 372 | move(this.index); 373 | now = this.index; 374 | } 375 | } 376 | } 377 | // 动画函数 378 | function move(index) { 379 | for (var i = 0; i < upNodes.length; i++) { 380 | upNodes[i].style.width = ''; 381 | } 382 | upNodes[index].style.width = "100%"; 383 | arrow.style.left = liNodes[index].offsetLeft + liNodes[index].offsetWidth / 2 - arrow.offsetWidth / 2 + 384 | "px"; 385 | cList.style.top = -index * (document.documentElement.clientHeight - head.offsetHeight) + "px"; 386 | for (var i = 0; i < dotLis.length; i++) { 387 | dotLis[i].className = ""; 388 | } 389 | dotLis[index].className = "active"; 390 | //出入场 391 | if (anArr[index] && typeof anArr[index]["inAn"] == "function") { 392 | anArr[index]["inAn"](); 393 | } 394 | if (anArr[preIndex] && typeof anArr[preIndex]["inAn"] == "function") { 395 | anArr[preIndex]["outAn"](); 396 | } 397 | 398 | 399 | } 400 | } 401 | // // 视频的路径 402 | // var arr = ["videos/忠县影视.mp4","videos/忠县影视.mp4"]; 403 | // var Player = function(opt){ 404 | // //接收并获取player这个div 405 | // this.box = document.querySelector(opt.box); 406 | // console.log(this.box); 407 | // //将路径地址付给src 408 | // this.src = opt.src; 409 | // //当前正在播放视频的索引 410 | // this.num = 0; 411 | // // this.playBtn = ""; 412 | // //获取video标签 413 | // this.video = this.box.querySelector("video"); 414 | // //获取视频播放时长 415 | // this.duration = 0; 416 | // this.moveTime =0; 417 | // this.init(); 418 | // this.timer = null; 419 | // 420 | // Player.prototype={ 421 | // init : function(){ 422 | // this.create();//初始化调用执行 423 | // this.random(); 424 | // this.play(); 425 | // this.change(); 426 | // this.mutedFn(); 427 | // this.nextFn(); 428 | // this.end(); 429 | // this.volumeFn(); 430 | // this.dragTiao(); 431 | // }, 432 | // // 创建控件按钮 433 | // create : function () { 434 | // //进度条 435 | // this.range = document.createElement("div"); 436 | // this.rangem = document.createElement("span"); 437 | // this.rangem.className = "rangem"; 438 | // this.range.className = "range"; 439 | // this.range.appendChild(this.rangem); 440 | // this.box.appendChild(this.range); 441 | // //创建播放、暂停按钮 442 | // this.playBtn = document.createElement("div"); 443 | // this.playBtn.className="playBtn"; 444 | // this.box.appendChild(this.playBtn); 445 | // this.muted = document.createElement("div"); 446 | // this.muted.className="muntedBtn"; 447 | // this.box.appendChild(this.muted); 448 | // 449 | // //创建音量条 450 | // this.volumeTiao = document.createElement("input"); 451 | // this.volumeTiao.type = "range"; 452 | // this.volumeTiao.max="100"; 453 | // this.volumeTiao.min="0"; 454 | // this.volumeTiao.step="1"; 455 | // this.box.appendChild(this.volumeTiao); 456 | // //下一曲 457 | // this.nextBtn = document.createElement("div"); 458 | // this.nextBtn.className="nextBtn"; 459 | // this.box.appendChild(this.nextBtn); 460 | // 461 | // }, 462 | // // 随机播放的方法 463 | // random : function(){ 464 | // this.num = Math.floor(Math.random()*this.src.length); 465 | // }, 466 | // // 给video标签添加链接或者改变链接 467 | // change : function(){ 468 | // var that = this; 469 | // this.video.width="800"; 470 | // this.video.src = this.src[this.num]; 471 | // this.video.oncanplay = function(){ 472 | // //当视频加载完毕之后再获取总时长 473 | // that.duration = this.duration; 474 | // //获取初始音量值（0~1） 475 | // that.volumeInit = this.volume*100; 476 | // //获取音量后讲初始值给进度条 477 | // that.volumeTiao.value=that.volumeInit; 478 | // } 479 | // }, 480 | // //点击播放或暂停的方法 481 | // play : function(){ 482 | // //that接收一下this，防止与事件内的this进行冲突 483 | // var that = this; 484 | // this.playBtn.onclick = function(){ 485 | // //判断当前视频是否是暂停状态，进行相应操作 486 | // if(that.video.paused){ 487 | // that.video.play(); 488 | // that.rangeFn(); 489 | // this.className = 'pause'; 490 | // }else{ 491 | // that.video.pause(); 492 | // this.className = 'playBtn'; 493 | // clearInterval(that.timer); 494 | // } 495 | // } 496 | // }, 497 | // //点击静音的方法 498 | // mutedFn : function(){ 499 | // //判断当前是否是静音状态,如果静音，让它有声音，否则就静音 500 | // var that = this; 501 | // this.muted.onclick = function (){ 502 | // if(that.video.muted){ 503 | // //有声音 504 | // that.video.muted=false; 505 | // this.className="muntedBtn"; 506 | // }else{ 507 | // that.video.muted=true; 508 | // this.className="soundBtn"; 509 | // } 510 | // } 511 | // }, 512 | // end : function(){ 513 | // var that = this; 514 | // this.video.onended = function(){ 515 | // // 当视频执行完毕后执行下一曲 516 | // that.nextEvent(); 517 | // } 518 | // }, 519 | // //下一曲 520 | // nextFn : function(){ 521 | // var that = this; 522 | // this.nextBtn.onclick = function (){ 523 | // //点击下一曲按钮的时候执行 524 | // that.nextEvent(); 525 | // } 526 | // }, 527 | // nextEvent : function (){ 528 | // var that = this; 529 | // //当前视频索引+1； 530 | // that.num+=1; 531 | // //然后改变视频 532 | // if(that.num>=that.src.length){ 533 | // that.num = 0; 534 | // that.rangeFn(); //+++++++++++++++++ 535 | // } 536 | // that.change(); 537 | // //让它自动播放 538 | // that.video.autoplay = true; 539 | // }, 540 | // //进度条 541 | // rangeFn : function(){ 542 | // var that = this; 543 | // //添加定时器监控视频播放的位置 544 | // this.timer = setInterval(function(){ 545 | // var times = that.video.currentTime; 546 | // var n = times/that.duration*100; 547 | // that.rangem.style.width = n+"%"; 548 | // },100); 549 | // }, 550 | // //改变音量大小按钮 551 | // volumeFn : function(){ 552 | // var that = this; 553 | // this.volumeTiao.onchange = function(){ 554 | // //音量条值改变时修改声音大小 555 | // console.log(this.value); 556 | // //将修改的声音大小再赋值给视频音量属性 557 | // that.video.volume=this.value/100; 558 | // } 559 | // }, 560 | // //点击进度条跳动播放的方法 561 | // dragTiao : function () { 562 | // var that = this; 563 | // this.range.onclick=function(event){ 564 | // // clearInterval(that.timer); 565 | // //鼠标点击div某位置触发 566 | // //获取鼠标点击的位置 567 | // var celentX=event.offsetX; 568 | // console.log(celentX); 569 | // //获取span本身的宽度 570 | // var DivWidth = this.offsetWidth; 571 | // console.log(DivWidth); 572 | // var spanWidth= celentX/DivWidth*100; 573 | // console.log(spanWidth); 574 | // //让span到当前点击位置 575 | // that.rangem.style.width = spanWidth+"%"; 576 | // that.video.currentTime=that.duration*spanWidth/100; 577 | // } 578 | // 579 | // } 580 | // } 581 | // 582 | // window.onload=function(){ 583 | // var player = new Player({ 584 | // box:"#player1", 585 | // src:arr 586 | // }) 587 | // }} 588 | 589 | 590 | // window.onload=function () { 591 | // var oRoll=document.getElementById('roll'); 592 | // var oLeft=document.getElementById('left'); 593 | // var oRight=document.getElementById('right'); 594 | // var oUl=document.getElementById('ul'); 595 | // var distance=oRoll.offsetWidth-2; 596 | // var num=0; 597 | // oRight.onclick=function(){ 598 | // if(num==(-1)){return;} 599 | // else{ 600 | // num--; 601 | // oUl.style.left=(distance+9)*num+'px'; 602 | // } 603 | // } 604 | // oLeft.onclick=function () { 605 | // if(num=0){return;} 606 | // oUl.style.left=(distance*num-9)+'px'; 607 | // } 608 | // } -------------------------------------------------------------------------------- /mask01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qiqy17/Hometown-travel-website/291ad0e147bc58f5abe426311d4d4607e35f145e/mask01.png -------------------------------------------------------------------------------- /mask02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qiqy17/Hometown-travel-website/291ad0e147bc58f5abe426311d4d4607e35f145e/mask02.png -------------------------------------------------------------------------------- /reset.css: -------------------------------------------------------------------------------- 1 | /* 初始化样式 */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | html, 8 | body, 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6, 15 | p, 16 | ul, 17 | li { 18 | font: 14px "微软雅黑"; 19 | } 20 | 21 | html, 22 | body { 23 | height: 100%; 24 | overflow: hidden; 25 | } 26 | 27 | nav, 28 | section, 29 | a, 30 | img { 31 | display: block; 32 | } 33 | 34 | ul { 35 | list-style: none; 36 | } 37 | 38 | a { 39 | text-decoration: none; 40 | } 41 | 42 | .commonTitle { 43 | color: #c90606; 44 | font-size: 60px; 45 | line-height: 0.8; 46 | font-weight: bold; 47 | letter-spacing: -5px; 48 | } 49 | 50 | .commonText { 51 | color: white; 52 | line-height: 1.5; 53 | font-size: 15px; 54 | } 55 | 56 | .clearfix::before, 57 | .clearfix::after { 58 | content: ""; 59 | display: table; 60 | clear: both; 61 | } 62 | 63 | .clearfix { 64 | *zoom: 1; 65 | } -------------------------------------------------------------------------------- /zhong.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qiqy17/Hometown-travel-website/291ad0e147bc58f5abe426311d4d4607e35f145e/zhong.ico --------------------------------------------------------------------------------