<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title></title>
</head>
<body>
<div class="nav" id="menu">
<ul>
<li><a href="#first" class="cur">首 页</a></li>
<li><a href="#second">关 于 我</a></li>
<li><a href="#third">工作经验</a></li>
<li><a href="#forth">项目经验</a></li>
<li><a href="#fifth">联 系 我</a></li>
</ul>
</div>
<div id="content">
<div class="first item" id="first">
<div class="middle">
<img src="img/头像.jpg" alt="头像" />
<p>生活是一种绵延不绝的渴望，渴望不断上升，变得更伟大而高贵。</p>
<div class="myName">
<span>我叫王春</span>
<span>一名前端工程师</span>
<span>cco126@163.com</span>
</div>
<div class="goTop">
</div>
</div>
</div>
<div class="aboutMe item" id="second">
<div class="middle">
<h1>关于我</h1>
<ul class="clearfix">
<li class="fl">
<img src="img/ege.gif" alt="年龄">
<p></p>
</li>
<li class="fl">
<img src="img/college.gif" alt="学历">
<p></p>
</li>
<li class="fl">
<img src="img/adds.gif" alt="地址">
<p></p>
</li>
<li class="fl">
<img src="img/sta.gif" alt="状态">
<p></p>
</li>
</ul>
<div class="skill">
<p>两年多的互联网经验，一年全职前端开发</p>
<p>熟练运用HTML5与CSS3的前端网页开发技能</p>
<p>熟悉javascript交互与ajax后台数据读取</p>
<p>会使用bootstrap等前端开发框架快速编写页面</p>
</div>
</div>
</div>
<div class="experience item" id="third">
<div class="comWidth">
<h1>工作经验</h1>
<div class="company">
<p>
<strong>公司名称：陕西听讯科技有限公司</strong>
<strong>工作时间：2016/6-至今</strong>
</p>
<strong>工作职责：</strong>
<ul>
<li>1.根据产品需求，负责Web端HTML+CSS+JS的开发和优化；</li>
<li>2.和设计师及后台工程师配合，高效率高质量完成工作，为用户提供更好的视觉操作；</li>
<li>3.负责公司产品前端的维护及更新迭代；</li></tr>
<li>4.完成自测的过程；</li>
<li>5.完成公司领导交办的其它任务</li>
</ul>
</div>
</div>
</div>
<div class="products item" id="forth">
<div class="comWidth">
<h1>项目经验</h1>
<ul class="clearfix">
<li>
<h3>项目名称：智慧易购</h3>
<img src="img/智慧易购.png"/ alt="智慧易购">
<p><strong>项目描述：</strong>一款移动端购买商品的微信公众号</p>
<p><strong>主要职责：</strong>页面结构及样式的搭建，测试及部分交互功能</p>
<p><a href="#">链接...</a></p>
</li>
<li>
<h3>项目名称：跳出圈圈</h3>
<img src="img/jumpout.png"/ alt="跳出圈圈">
<p><strong>项目描述：</strong>一款移动端购买商品的手机app</p>
<p><strong>主要职责：</strong>页面结构及样式的搭建，测试及部分交互功能</p>
<p><a href="#">链接...</a></p>
</li>
<li>
<h3>项目名称：海峡两岸青年创业大赛</h3>
<img src="img/young.png"/ alt="青赛">
<p><strong>项目描述：</strong>pc端海峡两岸青年创业大赛报名登录，比赛决赛等线上模式</p>
<p><strong>主要职责：</strong>页面结构及样式的搭建，测试及部分交互功能</p>
<p><a href="#">链接...</a></p>
</li>
<li>
<h3>项目名称：网站首页</h3>
<img src="img/网站首页.png"/ alt="慕课网首页">
<p><strong>项目描述：</strong>公司官网首页</p>
<p><strong>主要职责：</strong>仿照官网，编写网站首页，添加交互功能</p>
<p><a href="#">链接...</a></p>
</li>
<li>
<h3>项目名称：电商网站</h3>
<img src="img/电商网.png"/ alt="电商网">
<p><strong>项目描述：</strong>一款移动端购买商品的微信公众号</p>
<p><strong>主要职责：</strong>页面结构及样式的搭建，测试及部分交互功能</p>
<p><a href="#">链接...</a></p>
</li>
<li>
<h3>项目名称：bootstrap框架运用</h3>
<img src="img/bootstrap.png"/ alt="bootstrap框架运用">
<p><strong>项目描述：</strong>bootstrap框架运用</p>
<p><strong>主要职责：</strong>使用bootstrap框架制作响应式开发</p>
<p><a href="#">链接...</a></p>
</li>
</ul>
</div>
</div>
<div class="contact item" id="fifth">
<div class="middle">
<h1>联系我</h1>
<p><span class="orange">灵感</span><span class="sky">代码</span><span class="apple">梦想</span><span class="orange2">未来</span></p>
<div class="myc">
<p>注重效率，偏爱敏捷开发</p>
<p>喜欢尝试，期待新鲜事物</p>
<p>前端即兴趣，兴趣即未来</p>
<p>行路有良友，便是捷径</p>
<p>带上我吧，一起看更广阔的代码世界</p>
</div>
<p class="tel">联系电话：15229074105</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var top = $(document).scrollTop(); //定义变量，获取滚动条的高度
var menu = $("#menu"); //定义变量，抓取#menu
var items = $("#content").find(".item"); //定义变量，查找.item
var curId = ""; //定义变量，当前所在的楼层item #id
items.each(function(){
var m = $(this); //定义变量，获取当前类
var itemsTop = m.offset().top; //定义变量，获取当前类的top偏移量
// console.log("scrollTop : " + top);
// console.log("offset.top : " + itemsTop);
if(top > itemsTop-100){
curId = "#" + m.attr("id");
}else{
return false;
}
});
//给相应的楼层设置cur,取消其他楼层的cur
var curLink = menu.find(".cur");
if( curId && curLink.attr("href") != curId ){
curLink.removeClass("cur");
menu.find( "[href=" + curId + "]" ).addClass("cur");
}
// console.log(top);
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号