52. 大学生HTML5期末大作业 ―【网易游戏卡通萌王网页】 Web前端网页制作 html5+css3+js

最新推荐文章于 2024-12-31 00:09:52 发布

佳人悠悠

最新推荐文章于 2024-12-31 00:09:52 发布

阅读量1.4k

点赞数 40

分类专栏：前端网页游戏文章标签：前端 html 课程设计 html5 javascript 游戏 css3

本文链接：https://blog.csdn.net/m0_67368443/article/details/143653842

版权

前端网页同时被 2 个专栏收录

304 篇文章

订阅专栏

游戏

5 篇文章

订阅专栏

一、更多推荐

欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+完整代码，主题涵盖30+种类型:

二、网页简介

本实例应用html5+css3+js：导航菜单、图片轮翻效果、下拉菜单、鼠标滑动特效、悬浮菜单等。适用于大学生网页课程作业设计、公司网页制作等。

本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页文件

本网页实例共包含13个页面：

四、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

五、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>萌王EX首页</title>
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/index.css">
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/animation.css">

<div class="main">
   
           <div class="topnav wbox">
           <ul>
               <li><a href="index.html">首页</a></li>
               <li class="zxzx">
                   <a href="#">最新资讯</a>
                   <div class="nav_ls hidden">
                       <a href="news-message.html">新闻资讯</a>
                       <a href="#">最新公告</a>
                       <a href="#">热门活动</a>
                   </div>
               </li>
               <li class="yxsd">
                   <a href="#">游戏设定</a>
                   <div class="nav_ls hidden">
                       <a href="fiction.html">官方世界观小说</a>
                       <a href="snhd.html">少女皇帝</a>
                       <a href="smqj.html">使魔群集</a>
                       <a href="tswf.html">圣冠系统</a>
                       <a href="tswf.html">宝石系统</a>
                   </div>
               </li>
               <li class="trzp">
                   <a href="#">同人作品</a>
                   <div class="nav_ls hidden" id="trzp_nav">
                           <a href="tongren.html">MMD作品</a>
                           <a href="tongren.html">CV剧作品</a>
                           <a href="tongren.html">漫画作品</a>
                           <a href="#" style="display: none"></a>
                           <a href="tongren.html">表情包下载</a>
                           <a href="javascript:;">MMD模型配布</a>
                   </div>
               </li>
               <li class="logo">
                   <img src="img/logo.png" alt="">
               </li>
               <li class="glzl">
                   <a href="#">攻略资料</a>
                   <div class="nav_ls hidden">
                       <a href="xsrm.html">新手专区</a>
                       <a href="javascript:;">游戏攻略</a>
                       <a href="javascript:;">KFZ有约</a>
                   </div>
               </li>
               <li class="yhzq">
                   <a href="#">音画专区</a>
                   <div class="nav_ls hidden">
                       <a href="index.html#yhZone">宣传视频</a>
                       <a href="index.html#yhZone">作战实录</a>
                       <a href="index.html#yhZone">精美壁纸</a>
                       <a href="index.html#yhZone">游戏截图</a>
                   </div>
               </li>
               <li class="lt">
                   <a href="#">论坛</a>
               </li>
               <li class="gzh">
                   <a href="#">公众号</a>
                   <div class="topQrCode">
                       <img src="img/qrCode_8cd5dc0.jpg">
                   </div>
               </li>
           </ul>
       </div>
       
       <div id="dowebok" class="title">
           <img src="img/slogan_0fbda3d.png" class="mySlideUp">
       </div>
       
       <div class="content mySlideUp2" id="content">
           <div class="ewm_dw">
               <div class="ewm">
                   <img src="img/qrCode_8cd5dc0.jpg">
               </div>
               <div class="dw">
                   <a href="#" class="apple"></a>
                   <a href="#" class="android"></a>
               </div>
           </div>
               <a href="#" class="icon_logo">
                   <img src="img/icon_56aca49.png" alt="">
               </a>
               <a href="#" class="video">
                   <span></span>
                   <em></em>
               </a>
               <a href="#" class="yuyue"></a>
       </div>

...

2.CSS

代码如下（节选示例）：

body html {
   height: 100%;
   height: 100px;
}
body {
   /*height: 4537px;*/
   background: url(../img/bg_875d09c.jpg);
   background-size: 100% 100%;
}
.on {
   -webkit-opacity:.8;
   -moz-opacity:.8;
   opacity:.8;
   filter:alpha(opacity=80);
   z-index:10000;
}

/*main*/
.main {
   width: 100%;
   min-height: 1500px;
   min-width: 1200px;
   background: url(../img/role_54c355e.jpg) scroll no-repeat center top;
   position: relative;
   overflow: hidden;
}

/*----------------------------------------------title开始---------------------------------------------------------*/
.title {
width: 916px;
height: 194px;
margin: 398px auto 0;
position: relative;
}
.title>img {
   width: 100%;
   height: 100%;
   vertical-align: top;
}
/*title动画*/
.mySlideUp {
animation: mySlideUp 1s ease-in-out .2s both;
}

@keyframes mySlideUp {
0% {
transform: translateY(0px);
opacity: 0;
}
100% {
transform: translateY(-20px);
opacity: 1;
}
}
/*内容动画*/
.mySlideUp2 {
animation: mySlideUp2 1s ease-in-out .2s both;
}

@keyframes mySlideUp2 {
0% {
transform: translateY(0px);
opacity: 0;
}
100% {
transform: translateY(-20px);
opacity: 1;
}
}

/*游戏资讯动画*/
.mySlideUp3 {
animation: mySlideUp3 1s ease-in-out .2s both;
}

@keyframes mySlideUp3 {
0% {
transform: translateY(0px);
opacity: 0;
}
100% {
transform: translateY(-20px);
opacity: 1;
}
}
/*图片动画*/
.mySlideUp4 {
animation: mySlideUp4 1s ease-in-out .2s both;
}

@keyframes mySlideUp4 {
0% {
transform: translatex(0px);
opacity: 0;
}
100% {
transform: translatex(-40px);
opacity: 1;
}
}
/*游戏特色动画*/
.mySlideUp5 {
animation: mySlideUp5 1s ease-in-out .2s both;
}

...

3.JS

代码如下（节选示例）：

$(function(){

//移动到li上下面的二级菜单显示
$('.topnav ul li').mouseenter(function(){
$(this).find('.nav_ls').addClass('show').stop(true).animate({
height : 14 + 26 * $(this).find('a').length + 'px',
opacity : '1'
},300),$(this).find('.topQrCode').addClass('show').stop(true).animate({opacity : '1'},300);
});

//为二级菜单消失
$('.topnav ul li,.topnav ul li .nav_ls,.topnav ul li .topQrCode').mouseleave(function(){
$(this).parent().find('.nav_ls').removeClass('show').stop(true).animate({
height : '0',
opacity : '0'
},300),$(this).parent().find('.topQrCode').removeClass('show').stop(true).animate({opacity : '0'},300)
});

///轮播
$(function() {
//$("#toright").hide();
//$("#toleft").hide();
$('#toright').hover(function() {
$("#toleft").hide()
}, function() {
$("#toleft").show()
})
$('#toleft').hover(function() {
$("#toright").hide()
}, function() {
$("#toright").show()
})
})

var t;
var index = 0;
/自动播放
t = setInterval(play, 3000)

function play() {
index++;
if (index > 1) {
index = 0
}
// console.log(index)
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc",
"border": ""
})

$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
};

///点击鼠标图片切换
$("#lunbobox ul li").click(function() {

//添加移除样式
//$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式且其余兄弟元素移除样式可以在样式中用hover 来对li 实现
$(this).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
var index = $(this).index(); //获取索引图片索引与按钮的索引是一一对应的
// console.log(index);

$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到兄弟节点(不包括自己）
});

/上一张、下一张切换
$("#toleft").click(function() {
index--;
if (index <= 0) //判断index<0的情况为：开始点击#toright index=0时再点击 #toleft 为负数了会出错
{
index = 1
}
console.log(index);
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})

...