大学生代制作静态网页制作

+2425691680
模板介绍
该模板为纯html5模板，主题为周末·黑色调，此模板采用黑色为主色，不包含任何服务器端code，只包含index.html一个页面，PC端和手持端自适应，即响应式布局，网页的目录结构为：css、images、fonts和js，网页采用div+css布局， h5标签开发和扁平化设计。
三、目录结构

四、浏览器兼容
大学生静态网页，喜欢的可以了解一下~~
五、关键代码解析
1、jquery.fullPage.min.js
简介

技能

案例作品

联系方式

(function(){(function(){(‘#js_fullpage’).fullpage({
slidesColor: [‘#212325’, ‘#fff’, ‘#212325’, ‘#ebfbff’],
anchors: [‘page1’, ‘page2’, ‘page3’, ‘page4’],
menu: ‘#menu’,
afterRender:function(){
(‘#js_fullpage’).find(“.active”).addClass(“focus”);
},
afterLoad:function(anchorLink ,index){ // 滚动结束后(‘#js_fullpage’).find(“.active”).addClass(“focus”); }, afterLoad:function(anchorLink ,index){ // 滚动结束后(‘#js_fullpage’).children().eq(index-1).addClass(“focus”);
},
onLeave:function(anchorLink ,index){ // 滚动前
$(‘#js_fullpage’).children().removeClass(“focus”);
}
});
});

2、jquery.easing.js
是一个配合jquery实现完美动画效果的扩展插件，比如我们在使用jquery制作一幅图片滚动或图片渐变，使用本插件可扩展或增强jquery性能，生成完美无缺兼容性更好的jquery动画来，它不仅可以用于图像特效，像一些基础的层操作也可以使用。

3、头像实现动画效果
3.1、公共样式

3.2、渲染页面

.zhishi,
.yue_info,
.list_case,
.tips,
.container_case,
.wrap_case,
.jingli,
.title_1,
.p_name,.p_zhiwei,
.head,
.title_jn,
.txt_intro,
.icon_txt,
.icon_ico {
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.56s ease-in-out;
-o-transition: all 0.56s ease-in-out;
}

.head {
opacity: 0;
transform: translate(0px,-300px);
-ms-transform: translate(0px,-300px);
-moz-transform: translate(0px,-300px);
-webkit-transform: translate(0px,-300px);
-o-transform: translate(0px,-300px);
}

3.3、执行js添加focus
(function(){(function(){(‘#js_fullpage’).fullpage({
slidesColor: [‘#212325’, ‘#fff’, ‘#212325’, ‘#ebfbff’],
anchors: [‘page1’, ‘page2’, ‘page3’, ‘page4’],
menu: ‘#menu’,
afterRender:function(){
(‘#js_fullpage’).find(“.active”).addClass(“focus”);
},
afterLoad:function(anchorLink ,index){ // 滚动结束后(‘#js_fullpage’).find(“.active”).addClass(“focus”); }, afterLoad:function(anchorLink ,index){ // 滚动结束后(‘#js_fullpage’).children().eq(index-1).addClass(“focus”);
},
onLeave:function(anchorLink ,index){ // 滚动前
$(‘#js_fullpage’).children().removeClass(“focus”);
}
});
});

.focus .container_case,
.focus .jingli ,
.focus .title_1,
.focus .wrap_time,
.focus .zhishi,
.focus .head ,
.focus .p_name ,
.focus .p_zhiwei,
.focus .icon_ico,
.focus .yue_info,
.focus .tips,
.focus .txt_intro ,
.focus .icon_txt {
opacity: 1;
transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
}

4、执行顺序（优先级由css选择器级数而定）
//优先级第一
.container .mb20 .head{
background:#FF7F24;
}
//优先级第二
.mb20 .head{
background:green;
}
//优先级第三
.head{
background:red;
}

5、transition解释
transition:all 1s ease-in-out 1s;

值 描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。