最详细！！！前端原神官网 （采用html+css+js+dom+ajax+jquery+swiper+json）完整版

一.项目概述

1.该项目采用了大部分前端知识，完整的复刻原神官网上所显示的全内容，非常全面和详细。希望有兴趣的小伙伴萌可以看看和参考一下！！！该项目可以作为大学生毕设项目（附带项目答辩ppt）同时也可以作为计算机专业的小伙伴的期末大作业。喜欢的请留下你的足迹吧！！！

项目技术介绍

HTML:HTML是超文本标记语言，（英语：HyperText Markup Language，简称：HTML），是一种用来创建网页的标准标记语言
CSS:CSS是指层叠样式表，用来对网页的样式进行修饰，美化，布局

JS:JS——JavaScript，是互联网上最流行的脚本语言，被用于HTML和WEB，更可广泛用于服务器，PC，笔记本
DOM：是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

jQuery：是继prototype之后又一个JavaScript框架，是一个快速、简洁的JavaScript库，使用户能更方便的处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互；jQuery能够使用户的html页保持代码和内容分离，即不用再在html中插入一堆js来调用命令了，只需定义id即可。

项目大部分采用html+css+js,还有一些框架（jquery）和轮播图的运用（swiper）以及画布（canvas）

功能实现：页面跳转 ，登录注册，轮播图，音频播放，视频播放，hover效果，鼠标点击事件等等

（具体请看代码和效果）

1.首页效果展示

2.新闻

3.角色

4.世界 

 5.漫画

6.社区

7.赛事

8.成长关爱系统（所有页面都有，此处只展示一个）

9.登录,注册

 上面的图片大致展示了所有页面的效果图，下面请看代码展示、

首页代码

	
	
	
	
	
	
	
	
	
	
	
	
		
			
			
				
			
		
		
			
			
				
			
		
		
			
		
		
			
			
				首&nbsp页
				新&nbsp闻
				角&nbsp色
				世&nbsp界
				漫&nbsp画
				社&nbsp区
				赛&nbsp事
			
		
			
				
					成长关爱系统
				
				
			
			
				&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp登&nbsp录
				
			
		
		
			
				
					
					
				
				
					
						验证码登录
					
					
						密码登录
					
				
				
					
						
							
						
						
*手机号不能为空
						
*手机格式错误
					
					
						
							请输入正确的手机号
							
							
								获取验证码
							
						
					
					
					
						登录
					
				
				
					登录遇到问题？
					立即注册
				
				
					未注册的手机验证后将自动登录。注册/登录即代表
您同意并遵守					《米哈游通行证用户服务协议》					《米
哈游通行证用户个人信息及隐私保护政策》				
			
			
			
				
					
					
				
				
					
						验证码登录
					
					
						密码登录
					
				
				
					
						
							
						
					
					
						
							
							

							
						
					
					
					
						登录
					
				
				
					登录遇到问题？
					立即注册
				
				
					登录即代表您同意并遵守
您同意并遵守					《米哈游通行证用户服务协议》					《米
哈游通行证用户个人信息及隐私保护政策》				
			
		
	
	
		

			
				
			
			
				
				
			
			

				
关注我们
				
				
扫描关注微信
			
			


				
官方微博
			
			

				
TapTap
			
			

				
官方社区
			
		
	
<!-- 
	
 -->
	
		
			
			
				
					
				
			
		
		
			
		
		
		
			
			
				
					
				
			
		
		
		
			
				
				
			
			
				
				
			
			
				
				
			
			
				
			
		
		
	
	

		
			
			

				新闻资讯
			
		
		
			
			
				
					
						

					
					
						

					
					
						

					
					
						

					
				
				
				
			
			
				

					
最新
					
新闻
					
公告
					
活动
				
				
					
						

							
								
《原神》「极鲜！炙脍之夜」网页活动现已开启
								
2023/5/18
							
						
						

							
								
《原神》EP - 幽蝶留芳之处
								
2023/5/18
							
						
						

							
								
《原神》「雾海悬谜境」2.2版本活动速递第二期
								
2023/10/31
							
						
						

							
								
《原神》「神铸赋形」活动祈愿即将开启
								
2023/5/18
							
						
						

							
								
《原神》「赤团开时」活动祈愿即将开启
								
2023/5/18
							
						
					
					
						
						

							
								
《原神》EP - 幽蝶留芳之处
								
2023/5/18
							
						
						

							
								
《原神》EP - 幽蝶留芳之处
								
2023/5/18
							
						
						

							
								
《原神》「雾海悬谜境」2.2版本活动速递第二期
								
2023/5/18
							
						
						

							
								
《原神》「神铸赋形」活动祈愿即将开启
								
2023/5/18
							
						
						

							
								
《原神》「赤团开时」活动祈愿即将开启
								
2023/5/18
							
						
					
					
						
						

							
								
《原神》祈愿概率公示
								<!-- 
2023/5/18
 -->
							
						
						

							
								
《原神》「韶光抚月，天下人间」2.1版本更新说明
								
2023/9/01
							
						
						

							
								
《原神》「韶光抚月，天下人间」2.1版本更新通知
								
2023/10/31
							
						
						

							
								
《云·原神》限号不删档付费测试即将开启
								
2023/8/10
							
						
						

							
								
《原神》2.0版本「不动鸣神，泡影断灭」更新说明
								
2023/7/21
							
						
					
					
						
						

							
								
《原神》EP - 幽蝶留芳之处
								
2023/5/18
							
						
						

							
								
《原神》EP - 幽蝶留芳之处
								
2023/5/18
							
						
						

							
								
《原神》「雾海悬谜境」2.2版本活动速递第二期
								
2023/10/31
							
						
						

							
								
《原神》「神铸赋形」活动祈愿即将开启
								
2023/5/18
							
						
						

							
								
《原神》「赤团开时」活动祈愿即将开启
								
2023/5/18
							
						
					
					
						
						

							
								
「岩港奇珍行记」网页活动说明
								
2023/5/02
							
						
						

							
								
《原神》月夕祝颂-万份空月祝福相赠
								
2023/10/01
							
						
						

							
								
“在尘世的相逢”抖音《原神》公测主播招募
								
2023/9/28
							
						
						

							
								
“在尘世的相逢”快手直播《原神》主播招募活动开启
								
2023/9/16
							
						
						

							
								
“在尘世的相逢”斗鱼直播《原神》主播招募活动开启
								
2023/9/16
							
						
					
				
			
		
		
		
			

				

					
						
							
							
							
蒙德城
						
						
					
				
				

					
						
							
							
							
璃月城
						
						
					
				
				

					
						
							
							
							
稻妻城
						
						
					
				
				
				

					
						
							
							
							
须弥城
						
						
					
				
				
				
					
						
						
敬请期待
					
				
			
		
	
 	
		

			

					
				
			
			

			

			

				
					
分享至
					

						

						

						

						

					
				
				
					
				
			
		
	
	 
	 







	var swiper = new Swiper(".mySwiper", {
		spaceBetween: 30,
		centeredSlides: true,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev",
		},
	});










	var videoEntry = document.querySelector('.poster__video--entry');
	var posterVideo = document.querySelector('.poster_video1 img');
	var videoPlaying = false;

	posterVideo.addEventListener('click', function () {
		if (!videoPlaying) {
			var videoContainer = document.createElement('div');
			videoContainer.className = 'video-container';
			videoContainer.style.position = 'fixed';
			videoContainer.style.top = '10%';
			videoContainer.style.left = '25%';
			videoContainer.style.width = '50%';
			videoContainer.style.height = '50%';
			videoContainer.style.background = '#000';

			var videoPlayer = document.createElement('video');
			videoPlayer.style.width = '100%';
			videoPlayer.style.height = '100%';
			videoPlayer.autoplay = true;
			videoPlayer.controls = true;

			var videoSource = document.createElement('source');
			videoSource.src = '../原神官网制作/video(1)/阿贝多.mp4';
			videoSource.type = 'video/mp4';

			videoPlayer.appendChild(videoSource);
			videoContainer.appendChild(videoPlayer);
			document.body.appendChild(videoContainer);

			videoPlaying = true;
		} else {
			var videoContainer = document.querySelector('.video-container');
			if (videoContainer) {
				videoContainer.remove();
				videoPlaying = false;
			}
		}
	});

首页js代码

$(function () {
    var one = document.querySelector('.one')
    var two = document.querySelector('.two')
    var three = document.querySelector('.three')
    var four = document.querySelector('.four')
    var five = document.querySelector('.five')
    two.addEventListener('click', function () {
        this.src = 'upload/2.webp';
        one.src = 'upload/1.webp';
        three.src = './upload/3.webp';
        four.src = './upload/4.webp';
        five.src = './upload/5.webp';
    })
    one.addEventListener('click', function () {
        this.src = 'upload/1.webp';
        two.src = 'upload/2.webp';
        three.src = './upload/3.webp';
        four.src = './upload/4.webp';
        five.src = './upload/5.webp';
    })
    three.addEventListener('click', function () {
        this.src = './upload/3.webp';
        two.src = 'upload/2.webp';
        one.src = 'upload/1.webp';
        four.src = './upload/4.webp';
        five.src = './upload/5.webp';
    })
    four.addEventListener('click', function () {
        this.src = './upload/4.webp';
        two.src = 'upload/2.webp';
        three.src = './upload/3.webp';
        one.src = 'upload/1.webp';
        five.src = './upload/5.webp';
    })
    // five.addEventListener('click', function () {
    //     this.src = '/upload/5.webp';
    //     two.src = 'upload/2.webp';
    //     three.src = './upload/3.webp';
    //     one.src = 'upload/1.webp';
    //     four.src = './upload/4.webp';
       
    // })
    $('.section3 li').click(function () {
        var index = $(this).index();
        $('.figure').eq(index).show().siblings('.figure').hide();
    })

    $('.link .one').hover(function () {
        $(this)[0].src = 'images/微博9.webp';
    }, function () {
        $(this)[0].src = 'images/微博9.webp';
    })
    $('.link .two').hover(function () {
        $(this)[0].src = 'images/微信5.webp';
    }, function () {
        $(this)[0].src = 'images/微信5.webp';
    })
    $('.link .three').hover(function () {
        $(this)[0].src = 'images/哔哩哔哩1.webp';
    }, function () {
        $(this)[0].src = 'images/哔哩哔哩1.webp';
    })
    $('.link .four').hover(function () {
        $(this)[0].src = 'images/社区q.webp';
    }, function () {
        $(this)[0].src = 'images/社区q.webp';
    })


    // jq 点击按钮显示div,点击页面其他任何地方隐藏div
    $(".section1 .play").on("click", function (e) {
        $(".section1 .mask1").show();
        $(".section1 .mask1 video")[0].load();

        $('.section1').one("click", function () {
            $(".section1 .mask1").hide();
            $(".section1 .mask1 video")[0].pause();
        });

        e.stopPropagation();
    });
    $(".section1 .mask1 video").on("click", function (e) {
        e.stopPropagation();
    });

    // 
    // 四个人物视频
    $(".section3 .figure1 .player").on("click", function (e) {
        $(".section3 .mask-figure1").show();
        $(".section3 .mask-figure1 video")[0].load();

        $('.section3').one("click", function () {
            $(".section3 .mask-figure1").hide();
            $(".section3 .mask-figure1 video")[0].pause();
        });

        e.stopPropagation();
    });
    $(".section3 .mask-figure1 video").on("click", function (e) {
        e.stopPropagation();
    });
    // 
    $(".section3 .figure2 .player").on("click", function (e) {
        $(".section3 .mask-figure2").show();
        $(".section3 .mask-figure2 video")[0].load();

        $('.section3').one("click", function () {
            $(".section3 .mask-figure2").hide();
            $(".section3 .mask-figure2 video")[0].pause();
        });

        e.stopPropagation();
    });
    $(".section3 .mask-figure2 video").on("click", function (e) {
        e.stopPropagation();
    });
    // 
    $(".section3 .figure3 .player").on("click", function (e) {
        $(".section3 .mask-figure3").show();
        $(".section3 .mask-figure3 video")[0].load();

        $('.section3').one("click", function () {
            $(".section3 .mask-figure3").hide();
            $(".section3 .mask-figure3 video")[0].pause();
        });

        e.stopPropagation();
    });
    $(".section3 .mask-figure3 video").on("click", function (e) {
        e.stopPropagation();
    });
    // 
    $(".section3 .figure4 .player").on("click", function (e) {
        $(".section3 .mask-figure4").show();
        $(".section3 .mask-figure4 video")[0].load();

        $('.section3').one("click", function () {
            $(".section3 .mask-figure4").hide();
            $(".section3 .mask-figure4 video")[0].pause();
        });

        e.stopPropagation();
    });
    $(".section3 .mask-figure4 video").on("click", function (e) {
        e.stopPropagation();
    });


    // 
    $(".section1 .age").on("click", function (e) {
        $(".section1 .mask2").show();

        $('.section1').one("click", function () {
            $(".section1 .mask2").hide();
        });
        e.stopPropagation();
    });
    $(".section1 .mask2 .agetip").on("click", function (e) {
        e.stopPropagation();
    });

    $(".section5 .two").on("click", function (e) {
        $(".section5 .mask3").show();

        $('.section5').one("click", function () {
            $(".section5 .mask3").hide();
        });
        e.stopPropagation();
    });
    $(".section5 .mask3 .wechat3").on("click", function (e) {
        e.stopPropagation();
    });



})

因为该项目比较大，内容比较多，所以在这里只展示部分代码，有需要的小伙伴可以私信我！！！