怎么用jQuery+html+css实现王者荣耀官网首页效果

这篇文章主要介绍"怎么用jQuery+html+css实现王者荣耀官网首页效果"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"怎么用jQuery+html+css实现王者荣耀官网首页效果"文章能帮助大家解决问题。

访问地址

reset.css

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe,h2, h3, h4, h5, h6, h7, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  font-weight: normal;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{  display: block;}ol, ul, li{  list-style: none;}blockquote, q{  quotes: none;}blockquote:before, blockquote:after,q:before, q:after{  content: '';  content: none;}table{  border-collapse: collapse;  border-spacing: 0;} /* custom */a{  color: #7e8c8d;  text-decoration: none;  -webkit-backface-visibility: hidden;}::-webkit-scrollbar{  width: 5px;  height: 5px;}::-webkit-scrollbar-track-piece{  background-color: rgba(0, 0, 0, 0.2);  -webkit-border-radius: 6px;}::-webkit-scrollbar-thumb:vertical{  height: 5px;  background-color: rgba(125, 125, 125, 0.7);  -webkit-border-radius: 6px;}::-webkit-scrollbar-thumb:horizontal{  width: 5px;  background-color: rgba(125, 125, 125, 0.7);  -webkit-border-radius: 6px;}html, body{  width: 100%;  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;}body{  line-height: 1;  -webkit-text-size-adjust: none;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}html{  overflow-y: scroll;}

index.css

a {  display: block;  text-decoration: none;}.main_container {  width: 1200px;  margin: 0 auto;}#index {  position: relative;  min-width: max-content;}#index .ost_box {  position: relative;  height: 41px;}#index .ost_box .ost_box_container {  padding: 0 5px;  box-sizing: border-box;  width: 980px;  height: 100%;  display: flex;  justify-content: space-between;  margin: 0 auto;}#index .ost_box .ost_box_container .ost_left {  width: 380px;  height: 100%;  display: flex;}#index .ost_box .ost_box_container .ost_left .l_item_1 {  height: 41px;  width: 150px;  z-index: 999;}#index .ost_box .ost_box_container .ost_left .l_item_2 {  height: 41px;  width: 230px;}#index .ost_box .ost_box_container .ost_right {  width: 300px;  height: 41px;  display: flex;  justify-content: end;}#index .ost_box .ost_box_container .ost_right .r_item_1 {  margin-right: 20px;}#index .ost_box .ost_box_container .ost_right .r_item_1 h4 {  position: relative;}#index .ost_box .ost_box_container .ost_right .r_item_1 h4 a {  width: 88px;  height: 41px;  font-size: 14px;  line-height: 41px;  color: #464646;  padding-left: 30px;}#index .ost_box .ost_box_container .ost_right .r_item_1 h4 a:hover {  color: red;}#index .ost_box .ost_box_container .ost_right .r_item_1 h4::before {  content: "";  background: url(../icon/title_sprite.png);  background-position: -30px 0;  width: 30px;  height: 30px;  top: 5px;  left: 5px;  position: absolute;}#index .ost_box .ost_box_container .ost_right .r_item_2 h4 {  position: relative;}#index .ost_box .ost_box_container .ost_right .r_item_2 h4 a {  width: 127px;  height: 41px;  padding-right: 25px;  box-sizing: border-box;  font-size: 14px;  line-height: 41px;  color: #464646;}#index .ost_box .ost_box_container .ost_right .r_item_2 h4::before {  content: "";  background: url(../icon/title_sprite.png);  background-position: 0 0;  width: 30px;  height: 30px;  top: 5px;  right: 3px;  position: absolute;  opacity: 0.1;  transform: rotate(90deg);}#index .ost_box .ost_box_container .ost_right .ost_pop {  width: 700px;  height: 360px;  position: absolute;  background-color: #fafafa;  right: 280px;  z-index: 99;  top: 41px;  display: none;}#index .ost_box .ost_d {  width: 976px;  height: 189px;  position: absolute;  z-index: 1;  left: 282px;  top: 0px;  display: none;}#index .ost_box .ost_d a img {  width: 970px;  aspect-ratio: auto 970 / 185;  height: 185px;}#index .banner {  position: relative;  width: 100%;  min-width: 1300px;  height: 1100px;  background: url(../img/bg.png) no-repeat;  background-position: center top;}#index .banner .header {  position: absolute;  top: 0px;  width: 100%;  height: 84px;  background-color: rgba(0, 0, 0, 0.8);}#index .banner .header .h_container {  width: 1300px;  height: 100%;  margin: 0 auto;  position: relative;}#index .banner .header .h_container .logo {  position: absolute;  top: 16px;  left: 0px;  width: 230px;  height: 54px;}#index .banner .header .h_container .logo a img {  width: 200px;  height: 100%;}#index .banner .header .h_container .nav {  width: 843px;  height: 84px;  margin: 0 auto;  display: flex;  justify-content: space-between;}#index .banner .header .h_container .nav li {  width: 115px;  height: 84px;  padding-top: 20px;  box-sizing: border-box;}#index .banner .header .h_container .nav li a {  width: 100%;  font-size: 18px;  line-height: 30px;  color: #c9c9dd;  text-align: center;}#index .banner .header .h_container .nav li a em {  display: block;  padding-top: 5px;  transform: scale(0.95);  font-size: 12px;  line-height: 16px;  color: #858792;}#index .banner .header .h_container .nav li:last-child {  padding-top: 0px;  width: 38px;}#index .banner .header .h_container .nav li:last-child a {  width: 27px;  height: 26px;  background: url(../icon/nav_search.png);  margin: 29px auto 0;  padding: 0;}#index .banner .header .h_container .nav .h_active {  background: url(../img/index.png) no-repeat;  display: inline-block;}#index .banner .header .h_container .nav .h_active .f_active {  color: #d9ad50;}#index .banner .header .h_container .search {  position: absolute;  top: 21px;  right: 0;  width: 182px;  height: 44.8px;}#index .banner .header .h_container .search img {  position: relative;  border: 1px solid #d9ad50;  border-radius: 42px;}#index .banner .header .h_container .search .unlogin_info {  position: absolute;  right: 0px;  top: 6px;  width: 130px;  height: 44.8px;  display: flex;  flex-direction: column;}#index .banner .header .h_container .search .unlogin_info a:first-child {  width: 130px;  font-size: 16px;  color: #fff;  margin-bottom: 3px;}#index .banner .header .h_container .search .unlogin_info a:last-child {  width: 130px;  font-size: 14px;  color: #858792;  line-height: 21px;}#index .banner .J_subNav {  position: absolute;  top: 83px;  width: 100%;  height: 285px;  box-sizing: border-box;  background-color: rgba(0, 0, 0, 0.7);  overflow: hidden;  display: none;}#index .banner .J_subNav .sub_container {  width: 890px;  height: 240px;  margin: 0 auto;  margin-top: 15px;  margin-bottom: 30px;  padding-left: 50px;  box-sizing: border-box;  display: flex;  justify-content: space-between;}#index .banner .J_subNav .sub_container .down-nav {  width: 115px;  height: 100%;  padding: 0 2.5px;  box-sizing: border-box;  font-size: 0px;}#index .banner .J_subNav .sub_container .down-nav a {  text-align: center;  height: 30px;  line-height: 30px;  padding: 0;  font-size: 14px;  color: #c9c9dd;}#index .banner .J_subNav .sub_container .down-nav a i {  overflow: hidden;  display: inline-block;  width: 24px;  height: 24px;  vertical-align: middle;  background: url(../img/index.png) no-repeat;}#index .banner .J_subNav .sub_container .down-nav a .icon-fans {  background-position: -137px -68px;}#index .banner .J_subNav .sub_container .down-nav a .icon-guard {  background-position: -136px -5px;}#index .banner .J_subNav .sub_container .down-nav a:hover {  color: #d9ad50;  text-decoration: underline;}#index .banner .J_subNav .sub_container .down-nav:nth-child(6) a i {  width: 22px;  height: 22px;}#index .banner .kv_link {  width: 1200px;  height: 440px;  margin: 0 auto;}#index .r_nav {  pointer-events: none;  position: fixed;  z-index: 3;  top: 50%;  right: 0;  margin-top: -240px;  width: 254px;  height: 494px;  background: url(../img/r_navBg.png) no-repeat top left;}#index .r_nav .r_dj {  position: absolute;  top: 15px;  left: 24px;  z-index: 2;  width: 165px;  height: 145px;  background: url(../img/r_dj.png) no-repeat top center;}#index .r_nav .r_dj span {  display: block;  position: absolute;  top: 37px;  left: 12px;  width: 88px;  height: 36px;  font-size: 14px;  text-indent: 2px;  font-weight: bold;  line-height: 18px;  color: #62401b;  overflow: hidden;}#index .r_nav .r_con {  pointer-events: auto;  position: absolute;  top: 160px;  left: 85px;}#index .r_nav .r_con li:nth-child(n + 2) {  width: 117px;  height: 38px;  margin-top: 1px;  position: relative;  background: url(../img/r_all.png) no-repeat;}#index .r_nav .r_con li:nth-child(n + 2) .r_child {  padding-top: 7px;  position: absolute;  width: 115px;  height: 151px;  top: -66px;  left: -116px;  background-color: rgba(0, 0, 0, 0.8);  display: none;}#index .r_nav .r_con li:nth-child(n + 2) .r_child img {  width: 101px;  height: 100px;  display: block;  margin: 0 auto;  margin-bottom: 6px;  border-radius: 2px 2px 2px 2px;}#index .r_nav .r_con li:nth-child(n + 2) .r_child p {  height: 34px;  line-height: 17px;  color: #dcdcdc;  font-size: 10px;  text-align: center;  overflow: hidden;}#index .r_nav .r_con li:nth-child(n + 2) .r_child p span {  font-size: 12px;  text-align: center;  line-height: 17px;  color: #cd974b;}#index .r_nav .r_con li:hover .r_child {  display: block;}#index .r_nav .r_con .r_code {  position: relative;  width: 117px;  height: 113px;  background: url(../img/r_all.png) no-repeat 0 -3px;  padding-top: 3px;}#index .r_nav .r_con .r_code img {  display: block;  margin: 0 auto;  border-radius: 2px;  width: 110px;  height: 110px;}#index .r_nav .r_con .r_burst {  background-position: -122px -120px !important;}#index .r_nav .r_con .r_burst:hover {  background-position: -122px -240px !important;}#index .r_nav .r_con .wechat {  background-position: -122px -160px !important;}#index .r_nav .r_con .wechat:hover {  background-position: -122px -200px !important;}#index .r_nav .r_con .r_wc_sph {  background-position: -122px 0 !important;}#index .r_nav .r_con .r_wc_sph:hover {  background-position: -122px -42px !important;}#index .wrapper {  position: absolute;  left: 0;  top: 584px;  right: 0;  bottom: 0;  margin: auto;}#index .wrapper .main_top {  height: 342px;  margin: 0 auto;}#index .wrapper .main_top .main_container {  display: flex;  height: 100%;}#index .wrapper .main_top .main_container .rotate {  width: 605px;  height: 100%;  overflow: hidden;  position: relative;}#index .wrapper .main_top .main_container .rotate .swiper_container {  width: 600%;  height: 100%;  display: flex;  justify-content: space-between;  position: absolute;}#index .wrapper .main_top .main_container .rotate .swiper_container li {  width: 605px;  height: 100%;}#index .wrapper .main_top .main_container .rotate .swiper_container li a {  height: 100%;}#index .wrapper .main_top .main_container .rotate .swiper_container li a img {  height: 100%;  width: 100%;}#index .wrapper .main_top .main_container .rotate .adBtn {  position: absolute;  width: 100%;  height: 44px;  display: flex;  bottom: 0px;  z-index: 90;  background-color: #262626;}#index .wrapper .main_top .main_container .rotate .adBtn a {  flex-grow: 1;  height: 100%;  line-height: 44px;  color: #b1b2be;  font-size: 14px;  text-align: center;  cursor: pointer;}#index .wrapper .main_top .main_container .rotate .adBtn .on {  background-color: rgba(255, 255, 255, 0.15);  color: #d9ad50;}#index .wrapper .main_top .main_container .news_center {  position: relative;  width: 359px;  height: 100%;  background-color: #252731;  display: flex;  justify-content: space-between;  overflow: hidden;}#index .wrapper .main_top .main_container .news_center .new_top {  width: 260px;  height: 49px;  display: flex;}#index .wrapper .main_top .main_container .news_center .new_top li {  width: 52px;  height: 100%;  color: #b8b9c5;  font-size: 14px;  line-height: 49px;  text-align: center;}#index .wrapper .main_top .main_container .news_center .new_top .on {  color: #f3c258;  border-bottom: 3px solid #f3c258;}#index .wrapper .main_top .main_container .news_center a {  width: 52px;  height: 20px;  margin-top: 10px;}#index .wrapper .main_top .main_container .news_center .new_center_container {  width: 1795px;  top: 49px;  height: 293px;  position: absolute;  display: flex;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item {  width: 359px;  height: 100%;  padding: 0 17px;  box-sizing: border-box;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item .line-sp {  margin-top: 18px;  padding: 0 15px;  box-sizing: border-box;  height: 36px;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  display: inline-block;  vertical-align: top;  color: #f3c258;  background-color: #414046;  font-size: 18px;  line-height: 36px;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li {  width: 100%;  margin-bottom: 11px;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) {  cursor: pointer;  position: relative;  height: 20.8px;  color: #b8b9c5;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .news-type {  color: #f3c258;  border: 1px solid currentColor;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .hot-type {  color: red;  border: 1px solid currentColor;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .message-type {  color: #1e96ab;  border: 1px solid currentColor;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .type {  margin-right: 5px;  font-size: 12px;  display: inline-block;  line-height: 16px;  vertical-align: top;  margin-top: 2px;  width: 32px;  text-align: center;  border-radius: 2px;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .news-title {  width: 230px;  height: 100%;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  display: inline-block;  vertical-align: top;  color: #b8b9c5;  font-size: 14px;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) em {  position: absolute;  right: 0px;  font-size: 12px;  color: #999;}#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:last-child {  margin-bottom: 0px;}#index .wrapper .main_top .main_container .download_pannel {  width: 236px;  height: 100%;  display: flex;  flex-direction: column;}#index .wrapper .main_top .main_container .download_pannel a {  cursor: pointer;  width: 236px;  background: url("../img/index.png") no-repeat;}#index .wrapper .main_top .main_container .download_pannel .download_btn {  height: 128px;  background-position: 0 -219px;}#index .wrapper .main_top .main_container .download_pannel .guard_btn {  height: 106px;  background-position: 0 -350px;}#index .wrapper .main_top .main_container .download_pannel .tiyan_btn {  height: 108px;  background-position: 0 -461px;}#index .wrapper .quick_entrance {  margin-top: 28px;  margin-bottom: 34px;}#index .wrapper .quick_entrance .main_container {  display: flex;}#index .wrapper .quick_entrance .main_container a {  width: 291px;  height: 134px;  margin-right: 12px;  overflow: hidden;}#index .wrapper .quick_entrance .main_container a img {  width: 100%;  height: 100%;}#index .wrapper .quick_entrance .main_container a img:hover {  transform: scale(1.2);  transition: transform 0.4s ease;}#index .wrapper .quick_entrance .main_container a:last-child {  margin-right: 0;}#index .wrapper .main_item {  margin-bottom: 28px;}#index .wrapper .main_item .main_container {  display: flex;  justify-content: space-between;}#index .wrapper .main_item .main_container .strategy_center {  width: 872px;  margin-right: 33px;}#index .wrapper .main_item .main_container .strategy_center .item_header {  position: relative;  margin-bottom: 16px;}#index .wrapper .main_item .main_container .strategy_center .item_header .item_title {  font-size: 22px;  line-height: 25px;  text-indent: 33px;  font-weight: 600;  letter-spacing: 1px;  display: inline-block;  background: url(../img/index.png) no-repeat;}#index .wrapper .main_item .main_container .strategy_center .item_header .content {  background-position: 0 -106px;}#index .wrapper .main_item .main_container .strategy_center .item_header .saishi {  background-position: 0 -184px;}#index .wrapper .main_item .main_container .strategy_center .item_header .more_btn {  width: 28px;  line-height: 20.8px;  background: url(../img/index.png) no-repeat -252px 4px;  position: absolute;  top: 0;  right: 0;  padding-left: 22px;  color: #999;  font-size: 14px;}#index .wrapper .main_item .main_container .strategy_center .item_subnav {  height: 32px;  background-color: #f5f5f5;  margin-bottom: 5px;  display: flex;  justify-content: space-between;}#index .wrapper .main_item .main_container .strategy_center .item_subnav .split {  width: 1px;  height: 20px;  overflow: hidden;  float: left;  background: #e1e1e1;  margin: 5px 0 0px;}#index .wrapper .main_item .main_container .strategy_center .item_subnav a {  flex-grow: 1;  display: block;  float: left;  font-size: 14px;  color: #999;  text-align: center;  border-bottom: 3px solid #f5f5f5;  line-height: 29px;}#index .wrapper .main_item .main_container .strategy_center .item_subnav .on {  border-bottom: 3px solid #f3c258;  color: #333333;}#index .wrapper .main_item .main_container .strategy_center .title {  height: 26px;  padding-top: 8px;  padding-bottom: 9px;}#index .wrapper .main_item .main_container .strategy_center .title a {  height: 24px;  line-height: 24px;  padding: 0 13px 0 8px;  border: 1px solid #e5e5e5;  border-radius: 10px;  background: #f5f5f5;  font-size: 14px;  color: #333;  margin-right: 8px;  display: block;  float: left;}#index .wrapper .main_item .main_container .strategy_center .title .on {  border-color: #f3c258;  background: #f3c258;  color: #fff;}#index .wrapper .main_item .main_container .strategy_center .match_news {  margin-top: 14px;  height: 260px;  margin-bottom: 15px;  display: flex;  justify-content: space-between;}#index .wrapper .main_item .main_container .strategy_center .match_news .match_news_pic {  width: 211px;  height: 260px;}#index .wrapper .main_item .main_container .strategy_center .match_news .match_news_pic img {  width: 100%;  height: 100%;}#index .wrapper .main_item .main_container .strategy_center .match_news .news-list {  width: 630px;  height: 260px;}#index .wrapper .main_item .main_container .strategy_center .match_news .news-list .line-sp {  background: none;  width: 577px;  margin: 0;  padding: 0;  height: 66px;  line-height: 32px;  text-align: center;  font-size: 28px;  color: #333333;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:nth-child(n + 2) {  position: relative;  width: 630px;  height: 23px;  margin-bottom: 9px;}#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:nth-child(n + 2) .fl {  font-size: 12px;  display: block;  width: 48px;  height: 19px;  line-height: 19px;  margin-right: 12px;  background: #e3e3e3;  border-radius: 10px;  border: 2px solid #e3e3e3;  text-align: center;  color: #999999;  text-indent: 2px;  float: left;}#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:nth-child(n + 2) a {  width: 470px;  height: 20.8px;  line-height: 20.8px;  color: #333;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  font-size: 14px;  float: left;}#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:nth-child(n + 2) em {  font-size: 12px;  color: #b8b9c5;  float: right;}#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:last-child {  margin-bottom: 0px;}#index .wrapper .main_item .main_container .strategy_center .video_list {  height: 410px;  display: flex;  justify-content: space-between;  flex-wrap: wrap;}#index .wrapper .main_item .main_container .strategy_center .video_list li {  width: 209px;  height: 175px;  margin-right: 12px;  margin-bottom: 30px;}#index .wrapper .main_item .main_container .strategy_center .video_list li:nth-child(4n) {  margin-right: 0px;}#index .wrapper .main_item .main_container .strategy_center .video_list li .video {  width: 100%;  height: 125px;  position: relative;}#index .wrapper .main_item .main_container .strategy_center .video_list li .video img {  width: 100%;  height: 100%;}#index .wrapper .main_item .main_container .strategy_center .video_list li .video .play-bar {  width: 100%;  height: 22px;  line-height: 22px;  padding: 0px 10px;  box-sizing: border-box;  position: absolute;  bottom: 0px;  left: 0px;  background: rgba(0, 0, 0, 0.6);  color: #fff;  font-size: 12px;}#index .wrapper .main_item .main_container .strategy_center .video_list li .video .play-bar .ico-play {  padding-left: 15px;  background: url(../img/index.png) no-repeat;  background-position: -256px -59px;  display: inline-block;  height: 22px;}#index .wrapper .main_item .main_container .strategy_center .video_list li .video .play-bar .fr {  height: 22px;  float: right;}#index .wrapper .main_item .main_container .strategy_center .video_list li .video .mask {  width: 209px;  height: 125px;  position: absolute;  top: 0;  left: 0;}#index .wrapper .main_item .main_container .strategy_center .video_list li .video .mask .mask-play-ico {  background: url("../img/index.png") no-repeat;  width: 40px;  height: 40px;  display: block;  margin: 40px auto 0;  background-position: -192px -64px;  opacity: 0;}#index .wrapper .main_item .main_container .strategy_center .video_list li .video-tit {  display: block;  height: 40px;  overflow: hidden;  color: #333333;  margin-top: 10px;  font-size: 14px;  line-height: 21px;}#index .wrapper .main_item .main_container .strategy_center .video_list li:hover .video .mask {  background-color: rgba(0, 0, 0, 0.6);}#index .wrapper .main_item .main_container .strategy_center .video_list li:hover .video .mask .mask-play-ico {  opacity: 1;}#index .wrapper .main_item .main_container .skin_center {  width: 295px;  height: 528px;  overflow: hidden;}#index .wrapper .main_item .main_container .skin_center .item_header {  position: relative;  margin-bottom: 16px;}#index .wrapper .main_item .main_container .skin_center .item_header .item_title {  font-size: 22px;  line-height: 25px;  text-indent: 33px;  font-weight: 600;  letter-spacing: 1px;  display: inline-block;  background: url(../img/index.png) no-repeat;}#index .wrapper .main_item .main_container .skin_center .item_header .yingxiong {  background-position: 0 -144px;}#index .wrapper .main_item .main_container .skin_center .item_header .kpl {  background-position: -157px -106px;}#index .wrapper .main_item .main_container .skin_center .item_header .more_btn {  width: 28px;  line-height: 20.8px;  background: url(../img/index.png) no-repeat -252px 4px;  position: absolute;  top: 0;  right: 0;  padding-left: 22px;  color: #999;  font-size: 14px;}#index .wrapper .main_item .main_container .skin_center .item_subnav {  width: 100%;  height: 32px;  display: flex;  margin-bottom: 19px;}#index .wrapper .main_item .main_container .skin_center .item_subnav a {  flex-grow: 1;  height: 100%;  background: #f5f5f5;  line-height: 29px;  font-size: 14px;  color: #999;  box-sizing: border-box;  text-align: center;  border-bottom: 3px solid #f5f5f5;}#index .wrapper .main_item .main_container .skin_center .item_subnav .on {  border-bottom: 3px solid #f3c258;  color: #333333;}#index .wrapper .main_item .main_container .skin_center .slide-list {  width: 885px;  height: 419px;  display: flex;  justify-content: space-between;  position: relative;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content {  width: 295px;  height: 100%;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero {  display: block;  width: 294px;  height: 224px;  border-radius: 2px;  margin-bottom: 10px;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero img {  height: 156px;  width: 100%;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero .new_hero_bottom {  padding: 10px 15px;  height: 47px;  border: 1px solid #e5e5e5;  border-top: none;  border-radius: 0 0 2px 2px;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero .new_hero_bottom .new_hero_name {  font-size: 18px;  color: #333333;  font-weight: bold;  margin-bottom: 7px;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero .new_hero_bottom .time {  color: #999999;  font-size: 12px;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list {  display: flex;  justify-content: space-between;  flex-wrap: wrap;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li {  position: relative;  margin-right: 7px;  height: 173px;  width: 68px;  margin-bottom: 12px;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li:nth-child(4n) {  margin-right: 0px;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li img {  width: 100%;  height: 100%;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li .hero_mask {  position: absolute;  width: 68px;  height: 100%;  background: rgba(0, 0, 0, 0.88);  top: 0;  left: 0;  opacity: 0;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li span {  cursor: pointer;  overflow: hidden;  display: none;  position: absolute;  top: 0px;  left: 26px;  text-align: center;  color: #f3c258;  font-size: 14px;  width: 34px;  height: 100%;  line-height: 16px;  padding-left: 2px;  -ms-writing-mode: tb-lr;  -webkit-writing-mode: vertical-r;  writing-mode: vertical-lr;  letter-spacing: 0.3em;  word-break: break-all;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li:hover {  background-color: red;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li:hover .hero_mask {  opacity: 1;}#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li:hover span {  display: block;}#index .wrapper .main_item .main_container .skin_center .item_content {  height: 204px;  margin-bottom: 21px;}#index .wrapper .main_item .main_container .skin_center .item_content li {  height: 68px;  line-height: 67px;  border-bottom: 1px solid #e5e5e5;}#index .wrapper .main_item .main_container .skin_center .item_content li span {  display: inline-block;}#index .wrapper .main_item .main_container .skin_center .item_content li .match_time {  width: 80px;  color: #333333;  font-size: 12px;  text-align: center;  vertical-align: top;}#index .wrapper .main_item .main_container .skin_center .item_content li .team_name {  width: 79px;  height: 67px;  color: #333333;  font-size: 14px;  text-align: center;  line-height: 67;}#index .wrapper .main_item .main_container .skin_center .item_content li .team_name .team_name_icon {  overflow: hidden;  display: block;  width: 25px;  height: 25px;  margin: 10px auto 0 auto;  border-radius: 50%;}#index .wrapper .main_item .main_container .skin_center .item_content li .team_name em {  display: inline-block;  font-size: 12px;  line-height: 24px;  vertical-align: top;  text-align: center;}#index .wrapper .main_item .main_container .skin_center .item_content li .vs {  font-size: 14px;  width: 43px;  color: #f3c258;  text-align: center;  vertical-align: top;}#index .wrapper .main_item .main_container .skin_center img {  height: 159px;  width: 100%;}#index .wrapper .foot {  height: 362px;  padding-top: 80px;  box-sizing: border-box;  background: url(../img/bg_footer.jpg) no-repeat center 0;}#index .wrapper .foot .main_container {  height: 176px;}#index .wrapper .foot .main_container .foot_top {  height: 66px;  padding-bottom: 10px;  margin-bottom: 12px;  border-bottom: 2px solid #d4d4d4;}#index .wrapper .foot .main_container .foot_top a {  display: inline-block;}#index .wrapper .foot .main_container .foot_top .foot_ieg_logo {  width: 285px;  height: 64px;  margin: 0;  background: url(../img/spr.png) no-repeat;}#index .wrapper .foot .main_container .foot_top .foot_ieg_logo1 {  width: 70px;  height: 64px;  margin: 0;  background: url(../img/spr.png) no-repeat -285px 0;}#index .wrapper .foot .main_container .foot_bottom {  display: flex;  justify-content: space-between;}#index .wrapper .foot .main_container .foot_bottom .b_left {  width: 528px;  height: 86px;}#index .wrapper .foot .main_container .foot_bottom .b_left p {  width: 100%;}#index .wrapper .foot .main_container .foot_bottom .b_left p em {  font-style: normal;  margin-right: 12px;  color: #6d6d6d;  font-size: 12px;  text-align: left;  line-height: 20px;}#index .wrapper .foot .main_container .foot_bottom .b_left .intro {  margin-top: 6px;  font-size: 12px;  color: #666;  line-height: 20px;}#index .wrapper .foot .main_container .foot_bottom .b_right {  width: 650px;  height: 86px;}#index .wrapper .foot .main_container .foot_bottom .b_right .link_map {  display: flex;}#index .wrapper .foot .main_container .foot_bottom .b_right .link_map a {  color: #646467;  text-decoration: none;  font-size: 12px;  line-height: 20px;}#index .wrapper .foot .main_container .foot_bottom .b_right .link_map span {  line-height: 20px;  margin: 0 2px;}

index.js

$(function () {    var top = $(".banner")[0].offsetTop;    var header_height = $(".header")[0].offsetHeight;       var newcenter_width = $(".news_center")[0].offsetWidth;               $(".header .nav").on("mouseenter", "li", function () {        var len = $(".header .nav").children().length;        var index = $(this).index()        if (index < len - 1) {            var $li = $(".header .nav").children().eq(index);            $li.addClass("h_active").siblings().removeClass("h_active");            $li.find("a em").addClass("f_active").siblings().removeClass("f_active")        }    })    $(".header .nav").on("mouseleave", "li", function () {        $(this).removeClass("h_active").find("a em").removeClass("f_active");    })        $(".header").on("mouseenter", function() {        $(".J_subNav").slideDown(300);    })    $(".header").on("mouseleave", function(e) {        if($(e)[0].pageY < top)  $(".J_subNav").slideUp(300);    })    $(".J_subNav").on("mouseleave", function(e) {        if($(e)[0].pageY > top + header_height) $(".J_subNav").slideUp(300);    })      $(".ost_left .l_item-2").on("mouseenter", function () {        $(".ost_d").css({ display: "block" });    })    $(".ost_d").on("mouseleave", function () {        $(".ost_d").css({ display: "none" });           })    $(".ost_right .r_item_2").on("mouseenter", function () {        $(".ost_pop").css({ display: "block" });           })    $(".ost_pop").on("mouseleave", function () {        $(".ost_pop").css({ display: "none" });    })        $(".new_top").on("mouseenter", "li", function(e) {        var index = $(this).index();        $(this).addClass("on").siblings().removeClass("on");        $(".new_center_container").stop(true,true).animate({left: -(index * newcenter_width)+ "px"});    })    $(".strategy_center .sub1").on("mouseenter", "a", function(e) {        $(".strategy_center .sub1").children().eq($(this).index()).addClass("on").siblings().removeClass("on")    })    $(".strategy_center .sub2").on("mouseenter", "a", function(e) {        $(".strategy_center .sub2").children().eq($(this).index()).addClass("on").siblings().removeClass("on")    })        $(".strategy_center .title").on("mouseenter", "a", function(e) {        $(".strategy_center .title").children().eq($(this).index()).addClass("on").siblings().removeClass("on")    })    $(".skin_center .sub3").on("mouseenter", "a", function() {        var index = $(this).index();        var width = $(".skin_center")[0].offsetWidth;        $(this).addClass("on").siblings().removeClass("on");        $(".slide-list").stop(true,true).animate({left: -(index * width)+ "px"});    })})

swiper.js

; (function () {    var timerId;    // 获取容器的宽度    var width = $('.rotate').innerWidth();    // 当前轮播图片下标    var index = 0;    var ab_index = 0;    // 轮播图    var $ul = $('.rotate .swiper_container');    var len = $ul.children().length;    // 小块    var $point = $(".adBtn a");    var adBtn = $point.length    // 轮播    var autoPlay = function () {        index++;        if (index > len - 1) {            index = 1;            $ul.css({ left: 0 })        }        $ul.stop(true, true).animate({ left: -(width * index) }, 500);        ab_index++;        ab_index = ab_index > adBtn - 1 ? 0 : ab_index;        $point.eq(ab_index).addClass("on").siblings().removeClass("on");    }    // 定时轮播    timerId = setInterval(function () {        autoPlay();    }, 4000);        $('.rotate').on("mouseenter", function () {        clearInterval(timerId)    });    $(".rotate").on("mouseleave", function () {        timerId = setInterval(function () {            autoPlay()        }, 4000);    })    $(".adBtn").on("mouseenter", "a", function (e) {        ab_index = $(this).index();        index = $(this).index();        $ul.stop(true, true).animate({ left: -(width * index) }, 500);        $point.eq(ab_index).addClass("on").siblings().removeClass("on");    })})()

index.html

                                  
      
        
          
            
                                                        
            
                                                        
          
          
            
              
                成长守护平台              
            
            
              
                腾讯视频排行榜              
            
            
          
        
        
                                        
      
      
                
          
            
                                                        
            
              
                                  游戏资料                  DATA                              
              
                                  内容中心                  CONTENTS                              
              
                                  赛事中心                  MATCH                              
              
                                  百态王者                  CULIURE                              
              
                                  社区互动                  COMMUNITY                              
              
                                  玩家支持                  PLAYER                              
              
                                  IP新游                  NUW GAMES                              
              
                              
            
            
                            
                欢迎登录                登陆后查看游戏战绩              
            
          
        
                
          
            
              版本介绍              游戏介绍              英雄资料                                              爆料站                                                            故事站                            游戏壁纸            
            
              攻略中心              英雄攻略              视频中心                                              开放素材库                            王者视角              作者入驻              媒体入驻                          
            
                                              世界冠军杯                                              KPL                                                            全国大赛                            女子公开赛                                              K甲联赛                             高校赛               全民赛                                              赛事数据                          
            
              荣耀·传承              王者文化站              万千世界              星光殿堂              商户特权                                              IP共创计划            
            
                                              创意互动营                                                            王者营地                            手Q部落              微信圈子              官方微博              微信公众号              手Q订阅号            
            
              腾讯游戏防沉迷                                              成长守护平台                                                            对局环境情报站                            客服专区              礼包兑换              自助服务            
            
                                              代号:破晓                                                            代号:启程                          
          
        
              
      
        
          
            
              
                
                                  
                
                                  
                
                                  
                
                                  
                
                                  
                
                                  
              
              
                古力弈星对弈                斗破苍穹手游                游戏赛道开启                联名新品上线                全新赛事战令              
            
            
              
                
热门
                
新闻
                
公告
                
活动
                
赛事
              
              ...              
                
                  
第二十七期大神问答精彩回顾
                  
                    热门                    周年庆主题头像框方案票选结果公布                    09-29                  
                  
                    热门                    狄某有话说 |假期临近，9月峡谷数据新鲜奉上！                    09-29                  
                  
                    公告                    狄某有话说 |假期临近，9月峡谷数据新鲜奉上！                    09-29                  
                  
                    热门                    公孙离-祈雪灵祝 海报优化过程稿【老亚瑟的答疑时间】                    09-29                  
                  
                    热门                    周年庆主题头像框票选活动开启！                    09-29                  
                  
                    热门                    大神带你棋局对弈，探秘峡谷~                    09-29                  
                  
                    热门                    狄某有话说丨 鬼谷子：比比谁能更快终结对局？                    09-29                  
                
                
                  
第二十七期大神问答精彩回顾
                  
                    新闻                    王者荣耀携手多名艺术家讲述敦煌故事                    09-29                  
                  
                    新闻                    就是辣么燃!《魂斗罗：归来》新川渝版本了解一下？                    09-29                  
                  
                    新闻                    周年庆主题头像框方案票选结果公布                    09-29                  
                  
                    新闻                    狄某有话说 |假期临近，9月峡谷数据新鲜奉上！                    09-29                  
                  
                    新闻                    遇见胡旋今日上线！快乐胡旋一起转圈活动开启                    09-29                  
                  
                    新闻                    国服貂蝉在线solo！谁是斗鱼最强貂蝉~                    09-29                  
                  
                    新闻                    QQ名人赛王牌赛总决赛震撼来袭！喜剧大咖沈腾遇上国风新星INTO1－刘宇！                    09-29                  
                
                
                  
9月29日全服不停机更新公告
                  
                    公告                    9月29日外挂专项打击公告                    09-29                  
                  
                    公告                    9月29日净化游戏环境声明及处罚公告                    09-29                  
                  
                    公告                    9月29日"演员"惩罚名单                    09-29                  
                  
                    公告                    9月29日游戏内违规签名、攻略信息处罚公告                    09-29                  
                  
                    公告                    9月29日挂车行为专项违规处罚公告                    09-29                  
                  
                    公告                    9月29日更新后异常说明                    09-29                  
                  
                    公告                    9月29日全服不停机更新公告                    09-29                  
                
                
                  
周年庆主题头像框方案票选结果公布
                  
                    活动                    【一转千年】集腰鼓兑好礼活动开启公告                    09-29                  
                  
                    活动                    金秋十月惊喜不断，峡谷福利抢先看                    09-29                  
                  
                    活动                    "一元福利周"活动公告                    09-29                  
                  
                    活动                    周年庆主题头像框票选活动开启！                    09-29                  
                  
                    活动                    S25新赛季来袭，弈星重塑登场                    09-29                  
                  
                    活动                    【微信用户专属】微信小程序"游戏礼品站"购买"沈梦溪-月团寄思"皮肤抽免单活动                    09-29                  
                  
                    活动                    【微信用户专属】微信小程序"游戏礼品站"预定"沈梦溪-月团寄思"皮肤抽免单活动                    09-29                  
                
                
                  
                    KPL预报丨小义、乔兮发育路对决，谁的马可波罗更帅气？                  
                  
                    赛事                    我的电竞假期狂欢倒计时！全国大赛小长假线上、线下打卡指南                    09-29                  
                  
                    赛事                    秋季赛快讯：XYG三连胜冲击A组，九月澜打出致命节奏                    09-29                  
                  
                    赛事                    秋季赛快讯：西安WE二连胜，初心马超斩获本赛季首个五杀                    09-29                  
                  
                    赛事                    电竞假期即将开启，人气主播、coser带你玩转全国大赛！                    09-29                  
                  
                    赛事                    KPL预报丨XYG迎战北京WB冲击三连胜！                    09-29                  
                  
                    赛事                    王者荣耀全国大赛|官方赛事人才培养计划~                    09-29                  
                  
                    赛事                    21秋第一周最佳阵容：武汉eStar四人上榜，花海斩获周最佳                    09-29                  
                
              
            
            
                                                      
          
        
        
          
                                                                                                                                                                  
        
        
          
            
              
                
内容中心
                更多              
              
                精品栏目                                赛事精品                                英雄攻略              
              
                最新                马菠萝奇闻录                王者克制论                王者视角                策见打                峡谷460                百星王者带你飞                狄仁杰封神榜              
              
                
                  
                                        
                      1.1万                      2021-09-30                    
                    
                                          
                  
                  
                    【王者克制论】中单法师怎么样？李九教你法王制霸峡谷诸葛亮                  
                
                
                  
                                        
                      1.5万                      2021-09-30                    
                    
                                          
                  
                  
                    刷野最快又如何？李九教你全面克制阿古朵                  
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
                    【王者克制论】绝命毒师横行峡谷？李九教你全面克制扁鹊                  
                
                
                  
                                        
                      8.5万                      2021-09-30                    
                    
                                          
                  
                  
                    【王者克制论】绝命毒师横行峡谷？李九教你全面克制扁鹊                  
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
                    【王者克制论】绝命毒师横行峡谷？李九教你全面克制扁鹊                  
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
                    【王者克制论】绝命毒师横行峡谷？李九教你全面克制扁鹊                  
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
                    【王者克制论】绝命毒师横行峡谷？李九教你全面克制扁鹊                  
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
                    【王者克制论】绝命毒师横行峡谷？李九教你全面克制扁鹊                  
                
              
            
            
              
                
英雄/皮肤
                更多              
              
                最新英雄                最新皮肤                周免英雄              
              
                
                  
                                        
                      
新英雄：云缨
                      
上线时间：2021.06.23
                    
                  
                  
                    
                                            
                      艾琳                    
                    
                                            
                      司空震                    
                    
                                            
                      澜                    
                    
                                            
                      夏洛特                    
                  
                
                
                  
                                        
                      
新皮肤：乐园奇幻夜-钟馗
                      
上线时间：2021.06.23
                    
                  
                  
                    
                                            
                      遇见胡旋-貂蝉                    
                    
                                            
                      月团寄思-沈梦溪                    
                    
                                            
                      铁甲之心-典韦                    
                    
                                            
                      时之奇旅-安琪拉                    
                  
                
                
                  
                    
                                            
                      李白                    
                    
                                            
                      镜                    
                    
                                            
                      弈星                    
                    
                                            
                      瑶                    
                    
                                            
                      公孙离                    
                    
                                            
                      廉颇                    
                    
                                            
                      花木兰                    
                    
                                          
                  
                
              
            
          
        
        
          
            
              
                
赛事中心
                更多              
              
                KPL                                世冠                                K甲联赛                                城市赛                                高校联赛                                TGA                                微信游戏邀请赛                                模拟战大师赛              
              
                
                                  
                
                  
                    24日战报：四场零封彰显风范，虎牙XYG、成都TG等4支战队强势挺进8强                  
                  
                    KPL                    秋季赛快讯：上海EDG.M拿下首胜，yuan赵云破阵切C                    09-30                  
                  
                    KPL                    秋季赛快讯：济南RW侠让二追三拿首胜，小夜赵云逆转局势                    09-30                  
                  
                    KPL                    秋季赛快讯：深圳DYG拿下首胜，小义公孙离灵活走位输出拉满                    09-30                  
                  
                    KPL                    KPL预报丨小义、乔兮发育路对决，谁的马可波罗更帅气？                    09-30                  
                  
                    KPL                    秋季赛快讯：XYG三连胜冲击A组，九月澜打出致命节奏                    09-30                  
                  
                    KPL                    秋季赛快讯：西安WE二连胜，初心马超斩获本赛季首个五杀                    09-30                  
                
              
              
                
                  
                                        
                      1.1万                      2021-09-30                    
                    
                                          
                  
                  
                    《稳住姐来C》TGA冠军中单李九嫣"夺命"西施操作秀                  
                
                
                  
                                        
                      1.5万                      2021-09-30                    
                    
                                          
                  
                  
                    【稳住姐来C】第一集：TGA女子赛冠军"驾临"，实力能否服众？                  
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
                    2020首届TGA王者荣耀女子赛冠军争夺战精彩锦集                  
                
                
                  
                                        
                      8.5万                      2021-09-30                    
                    
                                          
                  
                  
2018 TGA VTG VS ADC set 1
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
2018 TGA VTG VS ADC set 2
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
2018 TGA LYG VS sViper set 1
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
2018 TGA VTG VS ADC set 3
                
                
                  
                                        
                      2.5万                      2021-09-30                    
                    
                                          
                  
                  
2018 TGA LYG VS sViper set 3
                
              
            
            
              
                
KPL赛事
                更多              
              
                时间                战队                战队              
              
                
                  10-1 15:00                                      南京Hero久竞                                    VS                                      长沙TES.A                                  
                
                  10-1 15:00                                      南京Hero久竞                                    VS                                      长沙TES.A                                  
                
                  10-1 15:00                                      南京Hero久竞                                    VS                                      长沙TES.A                                  
              
                          
          
        
        
          
            
                                        
            
              
                
                  抵制不良游戏                  拒绝盗版游戏                  注意自我保护                  谨防受骗上当                  适度游戏益脑                  沉迷游戏伤身                  合理安排时间                  享受健康生活                
                
                  《王者荣耀》全部背景故事发生于架空世界"王者大陆"中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。                
              
              
                
                  腾讯互动娱乐                  |                  服务条款                  |                  隐私保护指引                  |                  儿童隐私保护指引                  |                  腾讯游戏招聘                  |                  腾讯游戏客服                  |                  游戏列表                  |                  广告服务及商务合作                
              
            
          
        
      
            
        
          下载王者营地每天领福利~        
        
          
                      
          
            
                            
                扫码                关注官方微博                
                获取                一手爆料及福利              
            
          
          
            
                            
                扫码                关注官方公众号                
                获取                最新资讯及好礼              
            
          
          
            
                            
                扫码关注官方视频号
获取精彩视频及福利              
            
          
        
      
    
              

关于"怎么用jQuery+html+css实现王者荣耀官网首页效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。