王者荣耀前端模仿

作品初衷

因为想着要写答辩，网页这东西展现的会更直观一点，刚好也复习一下自己基础我牢固的前端知识，也想着提升一下自己前端网页排版能力和逻辑能力

作品简介

编辑器：sublime

语言：html+css+js

代码量：6000行

编辑时长：30天

基本结构

主页面

主页面应该是框架结构最完善的，因为这个页面是最开始写的，也因为布局的原因修改过很多次。因为页面元素多，比较复杂，所以到后边就难免会造成布局紊乱，元素定位不准确等等的问题。

这个界面的配色是我在博客上边找的感觉挺简约大方的，就采用的。然后表单验证和登陆跳转的jq部分是我加上去的，还有一些动画效果，用于检测是否验证通过

因为主页面搭好了框架，所以这里就直接采用了主页面的框架，一气呵成

话不多少，直接上图

上方导航栏动画效果

    $(function(){
	$('#head-inner').mouseenter(function(){
		$('#sub-nav').stop(true,true).animate({height:"285px"},300);
	})
	$('#header').mouseleave(function(){
		$('#sub-nav').stop(true,true).animate({height:"0px"},300);
	})

轮播图

		
	 
		

	

		
集卡赢回城特效
		
世冠四强出炉
		
完美克制米莱迪
	
		
大乔体系全解析
		
荣耀美女先导片
	

侧边动画转换效果

$('#item-subnav a').mouseenter(function(){
		var index=$("#item-subnav a").index(this); //获取该标签是第几个元素	
		$(".item-thirdnav").css("display","none");
		$(".item-thirdnav:eq("+(index)+")").fadeToggle();
		$("#touch_content .item-content").css("display","none");	
		if(index == 0){		
			$("#touch_content_0 .item-content:eq("+(index)+")").fadeToggle();
		}
		if(index == 1){							
			$("#touch_content_1 .item-content:eq(0)").fadeToggle();
		}
		if (index == 2) {
			$("#touch_content_2 .item-content:eq(0)").fadeToggle();
		}
		$('#item-subnav a').css({
			"color":"#999",
			"border-bottom":"3px solid #f5f5f5",
		});
		$(this).css({
			"color":"#333",
			"border-bottom":"3px solid #f3c258",
		})
	});

####技能展示动画转换

$(".hero-person li").mouseenter(function(){
		$(this).addClass("cur").siblings().removeClass("cur");
		var n = $(this).index();
		var $p = $(this).parent().parent().siblings('.hero-list-desc').find('p');
		$p.eq(n).show().siblings('p').hide();
		var $e = $p.eq(n).parent();
  		$e.css('margin-top', ("-" + $e.height() / 2 + "px"));
	})

总结

可能就是哪方面不足哪方面收获就最大，确实是我的js从一开始的无法下手到现在能较为流畅的书写确实算是迈出了一大步，前端方面也是少有收获，主要还是丰富了自己的知识面，了解到了许多陌生的属性。比如：white-space、vertical-align、pointer-events等等，同时也增加了自己面对bug的应对能力