原神—薄樱初绽时（html+css+js仿原神2

background-color: rgba(0, 0, 0, 0.7);

display: none;

}

.remind-content{

z-index: 10;

position: absolute;

left: 50%;

top: 50%;

margin:-3.21rem 0 0 -4.27rem;

background-image: url(…/image/11e7a079077d5523f87ec34bf65a71fa_7483736760903107786.jpg);

background-size: 100%;

width: 8.54rem;

height: 6.42rem;

}

.remind-close{

position: absolute;

right: 0;

top: 0;

margin-right: -0.57rem;

width: 0.57rem;

height: 0.57rem;

cursor: pointer;

}

.scroll{

z-index: 24;

position: absolute;

left: 50%;

bottom: -0.8rem;

width: 0.47rem;

height: 1.73rem;

animation: scroll 2.5s infinite;

}

@keyframes scroll {

50% {

bottom:-0.4rem;

}

}

/* 左侧导航栏 */

#sectionIndex{

position: fixed;

top: 0;

left: 150px;

display: flex;

flex-direction:column;

justify-content: space-evenly;

align-items: center;

overflow: hidden;

}

#sectionIndex div{

width: 1px;

height: 110px;

background-color: #fff;

}

#sectionIndex li{

list-style-type: none;

width: 40.39px;

border-radius: 5px;

box-sizing: border-box;

transition: all .4s;

cursor: pointer;

}

#sectionIndex li img{

width: 100%;

}

.main{

position: relative;

}

/* 三界路食祭样式 */

.main>div:first-of-type{

background-image: url(…/image/6afdbd67759e54f9e64814905afa7d0a_8216746459286921539.jpg);

background-size: cover;

background-position: center;

}

/* 角色情报样式 */

.main>div:nth-of-type(2){

background-image: url(…/image/6d77e4f19f0b44b16b7da10b9828ecb2_3267064271441046590.jpg);

background-size: cover;

background-position: center;

}

.role-wrap{

position: relative;

width: 1217px;

height: 100%;

margin: auto;

}

.role-wrap>li:first-child{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-image: url(…/image/role1.png);

background-size: 100%;

background-position: 10px 11px;

background-repeat: no-repeat;

/* display: none; */

}

.cv{

position: absolute;

left: 175px;

top: 250px;

width: 45px;

height: 400px;

display: flex;

flex-direction: column;

justify-content: space-between;

}

.cv>div{

position: relative;

height: 48%;

cursor: pointer;

}

.cv>div>img{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

.cv>div>img:last-child{

display: none;

}

.role-wrap>li:nth-child(2){

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-image: url(…/image/role2.png);

background-size: 100%;

background-position: 10px 12.5px;

background-repeat: no-repeat;

display: none;

}

.role-wrap>li:last-of-type{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-image: url(…/image/role3.png);

background-size: 100%;

background-repeat: no-repeat;

display: none;

}

.role-video{

position: absolute;

right: 102px;

top: 398px;

width: 282px;

height: 164px;

}

.role-video>img{

width: 100%;

}

.role-video .play{

position:absolute;

top: 32px;

left: 103px;

margin:auto;

cursor: pointer;

}

.role-list{

z-index: 10;

position: absolute;

top: 586px;

right: 102px;

width: 282px;

height: 90px;

display: flex;

flex-direction: row;

justify-content: space-between;

}

.role-list li{

position: relative;

width: 90px;

height: 90px;

cursor: pointer;

}

.role-list li img{

position: absolute;

top: 0;

left: 0;

width: 100%;

}

.role-list li img:last-child{

display: none;

}

/* 右上角样式 */

.decorate{

position: absolute;

top: 0;

right: 200px;

width: 2.3%;

}

.decorate img{

width: 100%;

}

/* 新的怪物样式 */

.new-monster{

background-image: url(…/image/b3e203798f96c10456444c478bd6543d_2045447260421457075.jpg);

background-position: center;

background-size: cover;

background-repeat: no-repeat;

}

.monster-video{

position: absolute;

top: 47.5%;

left:50%;

margin: -297.5px 0 0 -297.5px;

width: 595px;

height: 595px;

border-radius: 50%;

overflow: hidden;

}

.monster-video-box{

position: absolute;

top: 50%;

left:50%;

margin: -297.5px 0 0 -529.5px;

width: 1059px;

height: 595px;

}

.monster-video video{

width: 100%;

}

.info1{

position: absolute;

left: 50%;

bottom: 9%;

margin-left: -50px;

width: 100px;

height: 50px;

display: none;

}

.info2{

position: absolute;

left: 50%;

bottom: 9%;

margin-left: -208.5px;

width: 417px;

}

.monster1,.monster2{

position: absolute;

top: 400px;

width: 120px;

height: 120px;

border-radius: 50%;

cursor: pointer;

}

.monster1 img,.monster2 img{

position: absolute;

top: 0;

left: 0;

width: 100%;

}

.monster1 img:last-child{

display: none;

}

.monster1{

left: 460px;

}

.monster2{

left: 1330px;

}

/* 更多活动样式 */

.more-activity{

background-image: url(“…/image/7566133e99558cbba87286aa3ccf21a8_2462288274010546596.jpg”);

background-position: center;

background-size: cover;

}

.activity-wrap{

position: absolute;

top: 47%;

left: 53%;

margin:-294px 0 0 -528px ;

width: 1056px;

height: 588px;

}

.activity-wrap>div{

float: left;

}

.activity-title{

position: relative;

width: 132px;

height: 588px;

margin-left: 8.4px;

cursor: pointer;

}

.activity-title img{

position: absolute;

left: 0;

top: 0;

}

.activity-content:nth-of-type(4),.activity-content:nth-of-type(6){

width: 0;

}

.activity-title:nth-of-type(3) img:last-child,.activity-title:nth-of-type(5) img:last-child{

display: none;

}

.activity-content{

width: 555px;

height: 476px;

margin-top: 48px;

transition: all .4s linear;

}

.activity-content:nth-of-type(2){

background-image: url(…/image/activitycontent1.jpg);

background-position: center;

background-size: cover;

}

.activity-content:nth-of-type(4){

background-image: url(…/image/activitycontent2.jpg);

background-position: center;

background-size: cover;

}

.activity-content:nth-of-type(6){

background-image: url(…/image/activitycontent3.jpg);

background-position: center;

background-size: cover;

}

/* 游戏特色样式 */

.feature{

background-image: url(“…/image/d1f8a10c1f10c43ce840286801b634bd_5902885363410568969.jpg”);

background-position: center;

background-size: cover;

font-size: 89.7222px;

}

.feature-wrap{

position: absolute;

top: 1.59rem;

width: 100%;

height: 466px;

font-size: 89.7222px;

}

.feature-wrap div{

position: absolute;

left: calc(50% - 4.845em);

width: 9.69em;

height: 5.46em;

transition: all .4s;

background-size: 100% 100%;

}

.feature-wrap div:nth-child(1){

background-image: url(…/image/first.png);

}

.feature-wrap div:nth-child(2){

background-image: url(…/image/second.png);

}

.feature-wrap div:nth-child(3){

background-image: url(…/image/third.png);

}

.feature-wrap div:nth-child(4){

background-image: url(…/image/fourth.png);

}

.feature-wrap div:nth-child(5){

background-image: url(…/image/fifth.png);

}

.feature-wrap div:nth-child(6){

background-image: url(…/image/sixth.png);

}

.swipe1{

z-index: 2;

transform: translateX(0) scale(1);

opacity: 1;

}

.swipe2{

z-index: 1;

transform: translateX(3em) scale(0.7);

opacity: 1;

}

.swipe3{

z-index: 0;

transform: translateX(3em) scale(0.4);

opacity: 0;

}

.swipe4{

z-index: 0;

transform: translateX(0) scale(1);

opacity: 0;

}

.swipe5{

z-index: 0;

transform: translateX(-3em) scale(0.4);

opacity: 0;

}

.swipe6{

z-index: 1;

transform: translateX(-3em) scale(0.7);

opacity: 1;

}

.turn{

z-index: 3;

position: absolute;

left: calc(50% - 6em);

top: 4.4rem;

width: 12em;

height: 0.6em;

display: flex;

justify-content: space-between;

}

.prev,.next{

position: relative;

width: 40px;

height: 55px;

cursor: pointer;

}

.prev img,.next img{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

.prev img:nth-child(2),.next img:nth-child(2){

display: none;

}

.swipe-index{

position: absolute;

top: 8.5rem;

width: 100%;

height: 0.19rem;

display: flex;

justify-content: center;

}

.swipe-index li{

position: relative;

width: 0.22rem;

height: 0.22rem;

margin-left: 0.1rem;

}

.swipe-index li img{

position: absolute;

top: 0;

left: 0;

cursor: pointer;

}

.swipe-index li img:nth-of-type(2){

display: none;

}

.swipe-index li:first-child img:nth-of-type(2){

display: block;

}

.focus{

position: absolute;

top: 10rem;

width: 100%;

height: 124px;

display: flex;

justify-content: center;

}

.focus div{

position: relative;

width: 140px;

margin: 0 16.8px;

}

.focus div img{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.focus div img:nth-child(2){

display: none;

}

.footer{

position: relative;

width: 100%;

height: 343px;

padding: 20px;

box-sizing: border-box;

background-color: #000;

color: #999;

}

.footer-wrap{

width: 1280px;

height: 100%;

margin: auto;

display: flex;

}

.footer-logo{

width: 300px;

height: 293px;

display: flex;

justify-content: space-between;

align-items: center;

}

.footer-logo span{

width: 1px;

height: 28px;

background-color: #666;

}

.en-logo{

width: 119px;

height: 42px;

}

.ch-logo{

width: 110px;

height: 80px;

}

.footer-info{

width: 882px;

height: 293px;

margin-left: 60px;

}

.footer-link{

font-size: 14px;

display: flex;

margin-bottom: 28px;

}

.footer-link li{

margin:0 8px;

}

.footer-link a{

font-size: 14px;

color: #fff;

}

.footer-link a:hover{

text-decoration:underline;

}

.advice-info p{

font-size: 14px;

text-align: left;

line-height: 1.5;

}

.footer-icon{

width: 800px;

height: 56px;

margin: 10px 0;

display: flex;

justify-content: space-between;

}

.footer-icon a{

width: 116px;

height: 46px;

border: 1px solid #b0b0b0;

display: block;

}

五、JS

=======================================================================

$(document).ready(function(){

let box = $(“#box”);

let div = $(“#box>div,main>div”)

let sectionIndex = $(“#sectionIndex”)

let height = $(window).height();

let width = $(window).width();

let totalpage = div.length;//总页数

let page = 0;//当前页

let scrollstatus = true;//滚动状态

let speed = 300;//滚动速度

let role = 0;//初始角色头像索引

let monster = 2//初始怪物索引

let activity = 0//初始活动索引

let feature = 0;//初始特色索引

let swipeStyle = [“swipe1”,“swipe2”,“swipe3”,“swipe4”,“swipe5”,“swipe6”];

$(“.header,main>div”).height(height);

$(“#sectionIndex”).hide();

$(“.role-list li”).eq(0).children().eq(1).show();

div.css(“position”,“relative”);

//监听窗口变化

$(window).resize(function(){

height = $(window).height();

$(“.header,main>div”).height(height);

width = $(window).width();

scroll(page,0);

div.css(“min-width”,height/0.675+“px”);

})

//增加页面的索引图标

for(let i=0;i<totalpage-2;i++){

sectionIndex.append(“

• 
• ”)

  }

  $(“#sectionIndex li img”).eq(0).attr(“src”,“image/hitem1.png”);

  //判断点击的下标

  $(“#sectionIndex li”).click(function(){

  page = $(this).index();

  scroll(page,speed);

  })

  // 判断鼠标滑动方向

  function scrollDirection(e){

  if($(“.header .video”).css(“display”) == “block” ||

  $(“.role-info .video”).css(“display”) == “block”){

  return;

  }

  if(scrollstatus){

  if(e.deltaY>0){

  page++;

  if(page>=totalpage){

  return page = totalpage-1;

  }

  else{

  scroll(page,speed);

  }

  console.log(“下滑”)

  }else{

  page–;

  if(page<0){

  return page = 0;

  }

  else{

  scroll(page,speed)

  }

  console.log(“上滑”)

  }

  }

  }

  //滑动到第几页

  let scroll = function(page,speed){

  if(page == 0 || page == totalpage-1){

  $(“#sectionIndex”).slideUp(speed);

  }else{

  $(“#sectionIndex”).slideDown(speed);

  }

  for(let i = 0;i<totalpage-2;i++){

  if(i==page-1){

  $(“#sectionIndex li img”).eq(i).attr(“src”,“image/hitem”+(i+1)+“.png”);

  }else{

  $(“#sectionIndex li img”).eq(i).attr(“src”,“image/item”+(i+1)+“.png”);

  }

  }

  scrollstatus = false;

  if(page == totalpage -1){

  div.animate({

  top:-height*(page-1)-$(“.footer”).height()

  },speed,function(){

  setTimeout(() => {

  scrollstatus = true;

  }, 300);

  })

  }else{

  div.animate({

  top:-height*page

  },speed,function(){

  setTimeout(() => {

  scrollstatus = true;

  }, 300);

  })

  }

  }

  //监听鼠标滚轮

  document.onmousewheel = scrollDirection;

  // 鼠标移入移出下载按钮

  $(“.download a img”).mouseenter(function(){

  $(this).attr("src","image/h"+$(this).attr(“src”).slice(6))

  })

  $(“.download a img”).mouseleave(function(){

  $(this).attr("src",$(this).attr(“src”).replace(“h”,“”))

  })

  //鼠标移入移出页面索引

  $(“#sectionIndex li img”).mouseenter(function(){

  $(this).attr("src","image/h"+$(this).attr(“src”).slice(-9))

  })

  $(“#sectionIndex li img”).mouseleave(function(){

  $(this).attr("src",$(this).attr(“src”).replace(“h”,“”))

  $(“#sectionIndex li img”).eq(page-1).attr(“src”,“image/hitem”+(page)+“.png”);

  })

  //鼠标移入移出cv按钮

  $(“.cv>div”).mouseenter(function(){

  $(this).children().eq(1).show();

  })

  $(“.cv>div”).mouseleave(function(){

  $(this).children().eq(1).hide();

  })

  // 适龄提醒模块

  $(“.remind-logo”).click(function(){

  $(“.remind-bg”).css(“display”,“block”);

  })

  $(“.remind-content”).click(function(e){

  e.stopPropagation();

  })

  $(“.remind-close”).click(function(){

  $(“.remind-bg”).css(“display”,“none”)

  })

  $(“.remind-bg”).click(function(){

  $(this).css(“display”,“none”)

  })

  // 首页视频模块

  $(“.header .play”).click(function(){

  $(“.header .video”).show();

  $(“.header video”).trigger(“play”);

  })

  $(“video”).click(function(e){

  e.stopPropagation();

  })

  $(“.video”).click(function(){

  $(this).children().children().trigger(“pause”);

  this.children[0].children[0].currentTime = 0;

  $(“.video”).hide();

  })

  //首页进入官网

  $(“.official”).mouseenter(function(){

  $(“.official img”).eq(1).toggle();

  })

  $(“.official”).mouseleave(function(){

  $(“.official img”).eq(1).toggle();

  })

  //角色头像索引列表

  $(“.role-list li”).mouseenter(function(){

  $(this).children().eq(1).show();

  })

  $(“.role-list li”).mouseleave(function(){

  if($(this).index() == role){

  return;

  }else{

  $(this).children().eq(1).hide();

  }

  })

  $(“.role-list li”).click(function(){

  role = $(this).index();

  $(this).children().eq(1).show();

  for(let i=0;i<3;i++){

  if(i == role){

  $(“.role-wrap>li”).eq(i).fadeIn(speed);

  $(“.role-list li”).eq(i).children().eq(1).show();

  console.log( $(“.role-wrap>li”).eq(i));

  }else{

  $(“.role-wrap>li”).eq(i).fadeOut(speed);

  $(“.role-list li”).eq(i).children().eq(1).hide();

  }

  }

  })

  //角色模块视频

  $(“.role-info .play”).click(function(){

  $(“.role-info .video”).show();

  $(“.role-info video”).attr(“src”,function(){

  switch(role){

  case 0:

  return “https://webstatic.mihoyo.com/upload/static-resource/2022/02/15/36c3eda9e32a39a56c75bf9b51284c04_7759740696565879212.mp4”

  case 1:

  return “https://webstatic.mihoyo.com/upload/static-resource/2021/09/19/6ad98a93af5a4caf2c8eddfd8bda51d7_3890877391063843086.mp4”

  case 2:

  return “https://webstatic.mihoyo.com/upload/static-resource/2021/08/31/b124feae6bab5a3694d59e7c7315af84_1762984313232940807.mp4”

  }

  })

  $(“.role-info video”).trigger(“play”);

  })

  //怪物信息模块

  $(“.monster1,.monster2”).mouseenter(function(){

  $(this).children().eq(1).show();

  })

  $(“.monster1,.monster2”).mouseleave(function(){

  if($(this).index() == monster){

  return;

  }else{

  $(this).children().eq(1).hide();

  }

  })

  $(“.monster1,.monster2”).click(function(){

  if($(this).index() == monster){

  return;

  }else{

  monster = $(this).index()

  switch(monster){

  case 1:

  $(“.monster-video-box video”).attr(“src”,“https://uploadstatic.mihoyo.com/puzzle/upload/puzzle/2022/02/11/83b5811c39608a45ed49007502ede2c4_9097447521502060864.mp4”)

  $(“.info1”).show();

  $(“.info2”).hide();

  $(“.monster1 img”).eq(1).show()

  $(“.monster2 img”).eq(1).hide()

  break;

  case 2:

  $(“.monster-video-box video”).attr(“src”,“https://uploadstatic.mihoyo.com/puzzle/upload/puzzle/2022/02/11/e58ed0008e777b87e45bc75235790c58_6706036807749258212.mp4”)

  $(“.info2”).show();

  $(“.info1”).hide();

  $(“.monster1 img”).eq(1).hide()

  $(“.monster2 img”).eq(1).show()

  break;

  }

  }

  })

  //更多活动模块

  $(“.activity-title”).mouseenter(function(){

  if($(this).index()/2 == activity){

  return;

  }else{

  $(this).children().eq(1).show();

  }

  })

  $(“.activity-title”).mouseleave(function(){

  if($(this).index()/2 == activity){

  return;

  }else{

  $(this).children().eq(1).hide();

  }

  })

  $(“.activity-title”).click(function(){

  if($(this).index()/2 == activity){

  return;

  }else{

  activity = $(this).index()/2;

  console.log(activity);

  for(let i=0;i<3;i++){

  if(i == activity){

  $(“.activity-title”).eq(i).children().eq(1).show();

  $(“.activity-content”).eq(i).css(“width”,“555px”);

  }else{

  $(“.activity-title”).eq(i).children().eq(1).hide();

  $(“.activity-content”).eq(i).css(“width”,“0”);

  }

  }

  }

  })

  //游戏特色模块

  $(“.turn”).children().mouseenter(function(){

  $(this).children().eq(1).show()

  $(this).children().eq(0).hide()

  });

  $(“.turn”).children().mouseleave(function(){

  $(this).children().eq(1).hide()

  $(this).children().eq(0).show()

  });

  let featureAnimation = setInterval(next,5000);

  $(“.turn”).children().click(function(){

  clearInterval(featureAnimation);

  if($(this).attr(“class”) == “next”){

  next();

  }else if($(this).attr(“class”) == “prev”){

  prev();

  }

  最后

  我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  篇幅有限，仅展示部分截图：