<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>我的简历</title>
<link rel="stylesheet" href="http://cdn.dowebok.com/77/css/jquery.fullPage.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="http://csshake.surge.sh/csshake.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/js-image-slider.css">
<style>
.section1 { background: url(images/bg/bg1.jpg) 50%;background-size:cover;}
.section2 { background: url(images/bg/bg2.png) 50%;background-size:cover;}
.section3 { background: url(images/bg/bg3.jpg) 50%;background-size:cover}
.section4 { background: url(images/bg/bg4.jpg) 50%;background-size:cover}
.section5{ background: url(images/bg/bg5.jpg) 50%;background-size:cover}
.section6{ background: url(images/bg/bg6.jpg) 50%;background-size:cover}
.bumpy-char{line-height:3.4em;position:relative;}
</style>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>
<script src="js/js/easying.js"></script>
<script src="js/js/jquery.bumpytext.packed.js"></script>
<script src="js/js-image-slider.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
'navigation': true,
'loopBottom':true,
'resize':true,
'continuousHorizontal':true,
'navigationTooltips': ['首页', '基本资料', '专业技能', '工作经历', '项目经验', '自我评价'],
afterRender: function(){
move('.section1 span').set('margin-top','40px').scale(1.1).rotate(360).end();
move('.section1 p').set('margin-top','-360px').scale(1.2).end();
move('.section5 .s5').set('top','0px').end();
},
afterLoad: function(anchorLink,index){
switch(index){
case 1:
move('.section1 span').set('margin-top','40px').rotate(360).end() ;
move('.section1 p').set('margin-top','-360px').end();
break;
case 2:
move('.section2 h1').set('opacity','1').duration('0.5s').end();
move('.section2 .s2-1').set('opacity','1').duration('1s').end();
move('.section2 .s2-2').set('margin-top','70px').rotate(720).delay(700).end();
move('.section2 .s2-3').set('margin-top','70px').delay(1600).end();
move('.section2 .s2-4').set('left','75%').delay(2300).end()
break;
case 3:
move('.section3 .p1').set('margin-top','5%').end();
move('.section3 .p2').set('opacity','1').set('margin-top','5%').duration('2s').delay(600).end();
move('.section3 .p3').set('margin-top','5%').delay(1500).end();
move('.section3 .p4').set('margin-top','5%').delay(2600).end();
move('.section3 .p5').set('margin-top','5%').delay(3600).end();
break;
case 4:
move('.section4 h2').scale(1.2).rotate(360).end();
move('.pic1 p').set('left','0px').end();
move('.pic2 p').set('top','0px').delay(400).end();
move('.pic3 p').set('left','0px').delay(800).end();
break;
case 5:
move('.section5 img').duration('1s').set('margin-top','200px').end();
break;
default:
move('.section6 img').set('margin-top','0px').end();
};
},
onLeave: function(anchorLink,index){
switch(index){
case 1:
move('.section1 span').set('margin-top','-360px').rotate(0).end();
move('.section1 p').set('margin-top','480px').end();
break;
case 2:
move('.section2 h1').set('opacity','0').end();
move('.section2 .s2-1').set('opacity','0').end();
move('.section2 .s2-2').set('margin-top','-600px').rotate(0).delay(0).end();
move('.section2 .s2-3').set('margin-top','-600px').delay(0).end();
move('.section2 .s2-4').set('left','200%').delay(0).end();
break;
case 3:
move('.section3 .p1').set('margin-top','-800px').delay(0).end();
move('.section3 .p2').set('opacity','0').set('margin-top','0').delay(0).end();
move('.section3 .p3').set('margin-top','-800px').delay(0).end();
move('.section3 .p4').set('margin-top','2000px').delay(0).end();
move('.section3 .p5').set('margin-top','2000px').delay(0).end();
break;
case 4:
move('.section4 h2').scale(1).rotate(0).end();
move('.pic1 p').set('left','-450px').end();
move('.pic2 p').set('top','400px').delay(0).end();
move('.pic3 p').set('left','500px').delay(0).end();
break;
case 5:
move('.section5 img').set('margin-top','-200px').end();
break;
default:
move('.section6 img').set('margin-top','-9990px').end();
};
}
});
});
$(function(){
$('.text-flash').bumpyText();
})
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">HOME</a></li>
<li data-menuanchor="page2"><a href="#page2">基本信息</a></li>
<li data-menuanchor="page3"><a href="#page3">专业技能</a></li>
<li data-menuanchor="page4"><a href="#page4">工作经历</a></li>
<li data-menuanchor="page5"><a href="#page5">项目经验</a></li>
<li data-menuanchor="page6"><a href="#page6">自我评价</a></li>
</ul>
<div id="dowebok">
<div class="section section1">
<div class="s1">
<div class="photo shack">
<img style="cursor:pointer" onmousemove="this.src='images/page-1/flower2.png'"/ onmouseout="this.src='images/page-1/flower.jpg'"/ src="images/page-1/flower.jpg">
</div>
<span >我不怕千万人阻挡,只怕自己投降!</span>
<hr>
<div class="content">
<p >杨 冰 倩</p>
<p>前 端 工 程 师</p>
<p>求职地点:武汉</p>
<p>联系方式:18271456862</p>
</div>
</div>
<div class="tab shake shake-vertical-slow shake-constant shake-constant--hover"onclick="window.location.href='#page2'"><font color="#C0D2FC"><p>please click me↙</p></font><img src="images/page-1/dian.png"></div>
</div>
<div class="section section2">
<div class="s2">
<h1 class="text-flash">个人基本资料</h1>
<div class="s2-1">
<div class="photo">
<img src="images/page-1/flower.jpg" style="width:80px;height:80px">
</div>
<h4>基本信息</h4>
<p>姓名:杨冰倩 女<br>
年龄:22岁 籍贯:安徽合肥</p>
</div>
<div class="s2-2">
<div class="photo">
<img src="images/page-2/hat.png" style="width:80px;height:80px">
</div>
<h4 >毕业院校</h4>
<p>武汉市江汉大学</p>
</div>
<div class="s2-3">
<div class="photo">
<img src="images/page-2/book.png" style="width:80px;height:80px">
</div>
<h4>学历和专业</h4>
<p>本科 通信工程</p>
</div>
<div class="s2-4">
<div class="photo">
<img src="images/page-2/photo1.jpg" style="width:50px;height:80px;border-radius:10px">
</div>
<h4>联系方式</h4>
<p>邮箱:1697376718@qq.com <br>电话:18271456862</p>
</div>
</div>
</div>
<div class="section section3">
<div class="s3">
<div class="s3-pic"><img src="images/page-3/yanhua.png"></div>
<div class="s3-1">
<p class="p1"> 1.<span class=" shake shake-slow ">熟</span>练使用html, css, javascript, jquery,合理化完成web端的编写和维护,思路清晰,能处理主流浏览器的兼容问题。</p>
<p class="p2"> 2.熟悉animation,move.js,fullpage等实用插件的应用;轮播图,tab栏,导航菜单,全屏滚动等常用功能的实现,</p>
<p class="p3"> 3.熟悉W3C标准,对表现与数据分离、Web语义化等有较为深刻的理解。。</p>
<p class="p4"> 4.熟悉使用fireworks,能够迅速进行切图。</p>
<p class="p5"> 5.了解ajax,根据后台接口能够完成前后端交互。。</p>
</div>
<div class="s3-2">
<div class="subject">
<div class="subject-1 shake shake-opacity">HTML </div>
<div cla
热爱技术。
- 粉丝: 2965
- 资源: 7864
最新资源
- Alook浏览器安卓版(8倍速手机浏览器)v9.5.0.mp4
- Avast清理 Avast Cleanup v24.22.0高级版.mp4
- Apt Full(AI生产力工具v2.7.1.0绿色无需联网.mp4
- 01-03-若依表结构.xmind
- AZ屏幕录制工具Screen Recorder v6.3.6高级版.mp4
- 【本体】Internet Download Manager v6.42.26.zip
- Bing Wallpaper微软壁纸v2.0.1.4 中文多语版.mp4
- bsod蓝屏伪装者v1.0单文件版.mp4
- B站0粉代码强开自动回复-附源代码.mp4
- Canvas制作的粒子十秒倒计时HTML源码.mp4
- B站视频下载器 v2024.12.11小工具软件.mp4
- Complete Internet Repair 网络修复工具v11.1.3.mp4
- Converter视频音频转换器v2.2.5.2解锁VIP版.mp4
- CPU-Z处理器相关系统信息识别v2.13.0单文件.mp4
- pdf-reader.zip
- DNS快捷工具箱轻量高性能DNS服务器工具.mp4
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈