写这个模板花了差不多八天多时间吧 之前是按照自己感觉来写 准备后面改 后面找了一个布局博客看了下 懂得了什么是响应式 自适应 流式布局 静态布局 可以参考这篇博客讲得很好 点击打开链接 后面自己又对前面的代码进行了修改 所以花了比较多的时间 这个模板动画效果特别多 开始以为还挺简单的 后面自己做的时候有些地方还真有点棘手。 我做的也不是很好 在手机浏览器上兼容性不太好 因为第一次写所以兼容性自己做得不是很好 做了兼容性的就只有css3动画 过渡2d转换 3转换 所以在好多手机浏览器上显示的有一点不一样。写完这个模板 感觉自己css水平提高了不少 总之收获很大，写出来除了兼容性之外基本和他给的模板一样 。
在具体说实现之前先介绍一个插件fullpage.js 点击打开链接 点击打开链接 这个插件很强大 可以实现滚动 其中一种是只能实现垂直方向滚动 还有一种就是垂直和水平都可以实现 这个插件还提供了相应的回调函数 想了解的可以点开上面的链接 里面可以下载 还有详细的教程。我利用这个插件主要是用了它的垂直滚动和绑定滚动菜单 还有就是两个回调函数，见下表
利用这两个回调函数 可以很轻松的实现当滚动到某一页的时候添加动画，离开某一页的时候移除动画，这样不用刷新 每次滚动到页面都会有动画, 还有就是我发现fullpage.js采用的是绝对布局 如果要在外面其它地方布局 也需要absolute 并且调整z-index 否则不可见 同时fullpage.js为我们自动添加了很多类 比如每个section类所在的div 还添加了一个fp-tablecell 这个会改变布局 在写的时候要么在里面再套一个div 再在里面写布局 要么自己覆盖这个类
因为考虑到比较多 我就直接说pc端是怎么实现的 移动端就截几个图 还有全局宽度采用的是百分比 flex布局 所有页面使用透明度为0的img撑大 这样的好处是图片的宽高会成比例放大缩小 还有一种方式就是使用padding具体的可以自己去百度 用图片来比较简单 我就采用的是图片 字体使用相对单位rem 根字体大小为125% 所有的简单动画效果我就不说了 css3提供的动画效果比较好用 也比较简单 动画效果我就讲下难点的是怎么实现的 每个部分也只讲重点的 其他的简单掠过 具体效果可以去给的模板地址上看 好了下面就来说我怎么实现相应模块的 采用的是先上截图 再说效果 再详细讲解
一、
效果：每次刷新都会出现这个页面
这是一个刷新页面 将其position=absolute每次刷新页面将z-index设置为最大 并采用过渡透明度逐渐变成0 再将z-index设置为最小 这样是为了避免z-index太大 导致它位于在最上层而下面的却点不动
二、
效果：一个轮播 每到一个页面都会出现动画效果 所有文字依次逐渐放大 按钮的：hover效果是向上滑 下面的红色部分提上来 三个方向按钮都可点击 向下的按钮有一个上下重复移动的动画效果
首页是一个无缝轮播 之前只是试着用css3过渡来实现 结果发现不行 因为过渡的话 无法做到无缝 于是就是用的js来写的 无缝轮播的原理：宽度设为总的轮播内容宽度 下面其他页面轮播也是一样的 移动的方式是每次移动很小的宽度 比如一张页面宽度是1920px打算1秒移动完毕 那么我可以是每次移动花费20毫秒的时间 那么每次移动的宽度就是 总共移动的时间除去单次移动的时间得到要移动多少次 再用宽度除以次数就得到了每次需要移动宽度比如上面的就是1920/（1000/20）=38次。
采用递归和计时器来实现移动 即递归里面每次调用自己的时间都是20ms
不停的一张一张的移动也是靠定时器 即一段时间后在外部调用该函数
这里用的定时器是setInterval（）前面用的是 setTimeout （）两者的区别是前面可以不断的调用自己 而后面的只调用一次 如果要实现前面一样的效果的是需要用循环 无缝的实现是靠在第一张图片前面加上最后一张图片 在最后一张图片后面加上第一张图片 所以现在总共就是之前总的图片加上为了实现无缝轮播而加上的两张图片 每次到最后的时候瞬间切换到切换到第一张 到第一张的时候瞬间切换到最后一张
下面上精简过的代码
window.onload = function() {
var turn_left = $(".div_class_homePage .homepage_left a");//向左的按钮
var turn_right = $(".div_class_homePage .homepage_right a");//向右的按钮
var lunbo_first = $(".div_class_homePage .lun_bo_container .index_first");//第一张图片
var length = parseInt(lunbo_first.css("width"));
var is_lunbo = false;//只有is_luobo为false的时候 才可以继续点击
var page = 1;
//自动轮播
var timer = setInterval(function() {
animate(-length);
}, 5000);
//向左
turn_left.click(function() {
if(!is_lunbo) {
clearInterval(timer);
animate(length);
}
});
//向右
turn_right.click(function() {
if(!is_lunbo) {
clearInterval(timer);
animate(-length);
}
});
//轮播函数 参数是移动的距离
function animate(var1) {
is_lunbo = true;
var margin_left = parseInt(lunbo_first.css("margin-left"));
var new_margin = margin_left + var1;
var times = 500;
var time = 10;
var one_length = var1 / (times / time);
page = new_margin / length;
if(page < 0)
page = -page;
//单张页面移动
function go() {
var new_margin_left = parseInt(lunbo_first.css("margin-left"));
if(var1 < 0 && new_margin_left > new_margin || var1 > 0 && new_margin_left < new_margin) {
new_margin_left = new_margin_left + one_length + "px";
lunbo_first.css("margin-left", new_margin_left);
setTimeout(go, 10);//核心代码
} else {
is_lunbo = false;
if(var1 > 0) {
if(new_margin >= 0) {
new_margin = -3 * length;
}
} else {
if(new_margin <= -4 * length) {
new_margin = -length;
}
}
new_margin = new_margin + "px";
lunbo_first.css("margin-left", new_margin);
}
}
go();
}
}二、
效果：每次滚动到该页面 右边的文字和按钮依次从下到上移动 并逐渐显现 黑色的横线可变长变短
第二张页面比较简单 只不过有一个响应式布局 手机端布局是垂直的 这里是水平的 flex布局改为主方向为cloum 不过他上面有个画布 我没做
三、
效果：每次到该页面时 黑色透明背景和虚线框 和左右点击按钮依次出现 其中黑色背景框从右下角移动到中心 虚线框原地放大 左右按钮由里向外移动到本来的位置 点击左右按钮 中间的城市开发和下面的文字向左下移动 文字overflow:visible 并且逐渐过渡到透明度为0就像图上右边的一样 右边移动过来也会像左边一样 后面还有其他的内容 这里也有个响应式 小屏幕上下面的黑色透明背景框和虚线框没有
第三个页面可算是把我给整惨了 就是布局问题还有背景渐变问题 换了好几个布局 这里需要注意的是那个半透明的背景必须放到最下面 而且是单独一层 在里面加东西会受透明度的影响 第二层是那个白色虚线框 第三层是我们看到的所有文字部分 包括上面的标题和下面的轮播部分 第四层是所有可以点击的东西。第二个难点就是背景切换问题 我采用的是上面一个img 每次切换先把下面的背景设置为下一个图片 上面的透明度逐渐过渡到0 最后将上面的img透明度设置为1这样就不会出现闪的效果 很神奇 还有一种方式是采用过度和定时器当过度到0时切换成其他图片 不过这样的坏处是当过渡到0到设置下一个图片为背景衔接的时候会出现闪白的情况
四、
效果：轮播，动画效果 鼠标放到每一列上 里面的文字依次向右移动 右边出现按钮 文字颜色改变 图片缩小 里面出现逐渐放大虚线框 上面的横线也会缩小变长
这个页面依然是轮播 没什么可说的 不过也有个响应式布局问题 手机上一页是两张 采用document.body.clientHeight来判断当前页面大小
这里还有个前端中高度宽度介绍的博客 点击打开链接
五、
效果：每次到该页面图片依次从底部向上滑动 并且透明度逐渐变为1 鼠标放上去图片逐渐放大
这个页面是动画效果 值得一提效果之一是的当鼠标放到上面的时候图片会放大 但是总体大小不变 实现的方式是外面套一个div 放大图片是div的overflow:hidden.
六、
效果：每次到该页面 右边部分从右边过过渡到本来的位置 因为背景图片的样式 所以看起来是从右下角过渡上来的
这里右边的白色部分实现是通过背景图片实现的 左边的用ps处理掉
七、
这里当滑到最后一页的时候再往下滑会出现底部 大家可能会想前面你都是全屏滚动 怎么实现不全屏滚动的出现底部呢？ 其实很简单 fullpage.js提供了一个非常好用的类 fp-auto-height 自动计算高度 给布局最外部加上这个类就会自动计算高度而不会跳到下一个屏幕去
八、
效果：不同的页面菜单栏的样式不一样 底部的滚动跳样式不一样 当从一个页面到另一个页面时 该页面的滚动条逐渐变短的同时另一个逐渐变长 样式改变是还没到达下一个页面之前 该效果也是通过回调函数实现的
大家可能会发现 顶部菜单只有在第一页的时候是透明的 并且下面的滚条是白色的 这是通过fullpage.js的回掉函数来实现的 很简单
九、
下面来说下侧边栏 点击菜单的时候侧边栏会弹出来 并且左边会变暗 点击左边空白处和叉都可以退出菜单 左边是一个全屏的绝对布局 每次点击菜单按钮的时候 将其设置为黑色 透明度为0.5 退出的时候取消这个效果就可以了 同时还要改变它的z-index值
十、
下面来看一下手机端的效果 我就截图几张图 由于兼容性问题 可能有些不是那么理想
总结：
1、给大家说一个比较好玩的东西 贝塞尔曲线 css3的动画效果 过度效果都可以使用这个来自定义效果 这个网站点击打开链接可以自己调整 看到自己想要的效果
2、写代码的过程中要先思考好再动手 还要注意代码的复用性 比如几个效果差不多的我可以定义成一个css类
3、一般写页面的时候遇到问题要多利用浏览器提供的开发者工具 还有就是响应式需要在手机上测试 即手机上可以局部访问我们电脑上的资源 需要用到FTP 可以自己下载一个软件 也可以用编辑器提供的工具来
3285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
