轻设计 / 轻生活 / 轻日记 / 轻梦想
=== zhoumojianshe ===
© 优特良品&优特建站出品 | Powered by YOUTIY
专属学生的简单html静态网页模板
一、概要
网页主题名称：【周末·黑色调】
版本：v1.0
发布日期：2018/01/11
二、模板介绍
该模板为纯html5模板，主题为周末·黑色调，此模板采用黑色为主色，不包含任何服务器端code，只包含index.html一个页面，PC端和手持端自适应，即响应式布局，网页的目录结构为：css、images、fonts和js，网页采用div+css布局， h5标签开发和扁平化设计。
三、目录结构
四、浏览器兼容
五、关键代码解析
1、jquery.fullPage.min.js
<li data-menuanchor="page1" class="active"><a href="#page1">简介</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>
$(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').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、公共样式
<!--公共样式 让页面先加载CSS-->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<!--公共脚本-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
<!--dialog-->
<!--artdiolag-->
<script type="text/javascript" src="js/artDialog4_jb51net/jquery.artDialog.js"></script>
<script type="text/javascript" src="js/artDialog4_jb51net/artDialog.iframe.js"></script>
<link rel="stylesheet" type="text/css" href="js/artDialog4_jb51net/skins/default.css"/>
<!--前端脚本 在加载js-->
<script type="text/javascript" src="js/common.js"></script>
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(){
$('#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').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 定义过渡效果何时开始。
案例（注：本案例中all就包含了width和background CSS属性）
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:all 1s ease-in-out 1s;
}
div:hover
{
width:300px;
background:red;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
六、下载
本文由周元俊博客原创出品，如需转载请注明出处
本文出处：http://www.youtiy.com/detail_364.html
获取下载地址请关注 youtiyblog 微信公众号，点击【网页设计】菜单即可
标签云
网页设计
精致慢生活
感悟思语
我的旧年华
加偶微信
