轻设计 / 轻生活 / 轻日记 / 轻梦想 === zhoumojianshe ===
© 优特良品&优特建站出品 | Powered by YOUTIY
苏ICP备13018047号-1
专属学生的简单html静态网页模板
TAGS: 网页设计

一、概要

网页主题名称:【周末·黑色调】

版本: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 微信公众号,点击【网页设计】菜单即可

周元俊
2018-03-01 08:40:54
标签云
网页设计 精致慢生活 感悟思语 我的旧年华
加偶微信