前端开发——滚滚屏（没有纵向滚动条）
来源：互联网 发布：室内温度监控软件 编辑：程序博客网 时间：2024/06/06 01:59
1.前端流程：
1）需求分析
2）原型图（低保真）——产品经理/设计师/策划绘制
3）做效果图
4）代码实现
2.优秀网站欣赏：
1）百度钱包 一分钱专享 ： https://1.baidu.com/
2）微信T管家 http://www.weixint.com/
3）QQ PC版 http://im.qq.com/pcqq/
4）360浏览器欢迎页面 http://se.360.cn/wel/welcome.html
3.若要用HTML5+CSS3做全屏（效果图设计）
1）一般宽为1366px，如果是1920的分辨率，则让宽度自适应；高度一般做成768px或者700px
2)在PS或者Fireworks新建画布（宽度1366px，高度700px，分辨率72，颜色模式RGB，背景白色）——》最上面1366*60px的导航（一般高度给定60，具体看原型图）——》在导航上摆放logo（如果暂时没有logo，可以直接敲字体“Logo”或者其他能表明意思的内容）和字体——》选中项或者当前项给定一个背景色（绘制一个矩形）——》放入原型图中的字体内容——》用矩形做Button按钮（此时放入所有的内容到设计图里面）
3）找到Logo图片，进行替换——》如果没有透明背景的logo，则要做图片处理——》导航字体处理为20px(具体视情况而定)——》字体为“微软雅黑”
4）设置导航上面字体的间距：在前两个之间敲入合适的空格——》双击选中空格——》复制空格到其他的导航字体之间
5）图层分组——》页面填充背景色——》新建图层，做背景的渐变处理——》合并图层，转为智能对象（在PS中右击）——》滤镜——》像素化/晶格化（具体视情况而定）——》编辑滤镜（智能滤镜可以编辑，普通图层对象是没法修改的）——》蒙版处理（使得滤镜效果柔和）——》字体居中对齐
4.扁平化的好处：
1）效率高（适应不同的分辨率）
2）便于修改
3）便于代码编写
5.关于数字的处理：
10000.00这种写法的视觉冲击力要比1万强很多。（当然，如果是商品打折的这种情况则反之，具体视不同的情况，会有不同的视觉效果）
6.互联网设计分类：（图片来自传智）
7.滚滚屏的特点：
1）没有纵向的滚动条
2）一般为全屏切换
3）通过鼠标滚轮进行切换
4）每个屏幕都有切入和切出动画（也可理解为淡入和淡出）
5）每个屏幕中都有可以交互的元素
8.鼠标滚轮事件捕获插件：
在http://plugins.jquery.com/——》下载 jquery.mousewheel.min.js插件
鼠标滚动事件的写法：
<script src="js/jquery-1.11.3.min.js"></script><script src="js/jquery.mousewheel.min.js"></script><script type="text/javascript"> $(document).ready(function(){ //页面ready的时候执行 $(document).mousewheel(function(){ //当滚动鼠标滚轮时要执行下面的内容 console.log("正在测试鼠标滚动"); }); });</script>运行效果：（查看控制台console）
9.mousewheel方法的两个参数：
<script type="text/javascript"> $(document).ready(function(){ //页面ready的时候执行 $(document).mousewheel(function(event,delta){ //当滚动鼠标滚轮时要执行下面的内容// console.log("正在测试鼠标滚动");// console.log(event); //查看event有哪些值 console.log(event.pageX,event.pageY); //鼠标滚轮往下，输出-1，往上滚，输出1 console.log(delta); //查看delta的输出 }); }); </script>
10.注意：鼠标滚轮滚动的时候，往下是-1，往上是1
11.if语句死锁问题：
<script type="text/javascript"> $(document).ready(function(){ var nowPage=0; //用nowPage来模拟当前页面的序列号，合法值为0、1、2、3、4 //鼠标滚轮的事件捕获 $(document).mousewheel(function(e,delta){ if(nowPage>=0&&nowPage<4){ //向下滚动，delta为-1；向上滚动，delta的值为1 nowPage=nowPage-delta; }else { console.log("超出了合法的页面序号"); } console.log(nowPage); }); });</script>运行效果：
如何解决这个问题呢？
<script type="text/javascript"> $(document).ready(function(){ var nowPage=0; $(document).mousewheel(function(e,delta){ nowPage=nowPage-delta; if(nowPage<0){ //如果nowpPage小于0，就让它=0 nowPage=0; } if(nowPage>4){ //如果nowPage大于4,就让它=4 nowPage=4; } console.log(nowPage); }); });</script>运行效果：
12.标准流中的盒子（块级元素），如果不写宽度，则宽度默认为父盒子的100%；如果脱离了标准流，则不再具备该特点。
脱离标准流的几种方式：
1）position:absolute;
2)position:fixed;
3)float:left;
13.缓冲：
下载JQuery.easie.js插件，http://jaukia.github.io/easie/
引用JQuery.easie.js，并且添加下图选中内容：
14.函数节流
函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。
（参考博客：http://www.cnblogs.com/webhelper/p/3711256.html）
函数节流的解决办法就是：设置定时器
15.fireworks用来做切片比较方便
用fireworks打开psd文件的时候，选择“维持Photoshop层外观”——》打开psd文件——》复制图层——》新建——》粘贴——》导出
16.色块滚滚屏：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滚滚屏的书写</title> <style type="text/css"> /*清除样式*/ * { margin: 0; padding: 0; } html, body { height: 100%; /*层层上推之后得到HTML高度要给定100%*/ /*body的高度是HTML高度的百分比*/ overflow: hidden; /*隐藏其他的屏幕*/ } /*body{*/ /*height: 100%;*/ /*}*/ .container { width: 100%; /*加上这行代码，因为添加定位以后它脱标（脱离标准流）了，就没有高度了*/ height: 100%; /*container的高度是来自body的*/ position: absolute; /*page的父盒子container要能移动，带动page的移动，则要给container进行定位*/ top: 0; /*top:-100%; !*查看第二个屏幕*!*/ left: 0; } .page { width: 100%; /* 百分比参考的永远是父盒子*/ height: 100%; /*page的高度为container的百分百，所以查看container的高度*/ background-color: pink; } .page1 { background-color: blue; } .page2 { background-color: red; } .page3 { background-color: yellow; } .page4 { background-color: green; } </style> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.mousewheel.min.js"></script> <script src="js/jquery.easie.js"></script> <script type="text/javascript"> $(document).ready(function () { var currentPage = 0; //当前的页面数 var lock = true; //函数节流，给定的一个变量 $(document).mousewheel(function (e, delta) { if (lock) { currentPage = currentPage - delta; if (currentPage < 0) { currentPage = 0; } if (currentPage > 4) { currentPage = 4; } console.log(currentPage);// 让container进行动画 $(".container").animate( { "top": currentPage * -100 + "%" //通过负的100%的倍数来获取到其他的屏幕内容 } , 300 //时间 , "easieEaseOutCubic" //添加easie.js类库后添加该运动方式名称 ); //函数节流 lock = false; //设置一个定时器，当这个时间到了以后，Lock又恢复为true setTimeout(function(){ lock=true; },1000); } }); }); </script></head><body><div class="container"> <!--div.page.page$*5+Tab键输出下面的内容--> <!--page类是一个公共类--> <div class="page page0">0</div> <div class="page page1">1</div> <div class="page page2">2</div> <div class="page page3">3</div> <div class="page page4">4</div></div></body></html>
运行效果：（滚动到第二个页面）
17.若要把上面的色块替换成背景图片，则：
.page { width: 100%; /* 百分比参考的永远是父盒子*/ height: 100%; /*page的高度为container的百分百，所以查看container的高度*/ background:url("images/page0_bg.jpg") no-repeat; background-size: cover; /*拉伸为盒子大小*/}
运行效果：
（学习视频来自传智，感谢传智老师的奉献）
- 前端开发——滚滚屏（没有纵向滚动条）
- 前端——滚动条
- 隐藏横向滚动条（纵向）
- 隐藏纵向滚动条
- gridview 纵向滚动条
- MFC纵向滚动条
- div纵向、横向滚动条
- 页面纵向滚动条居中
- 纵向滚动条，clientHeight, offsetHeight
- DIV实现纵向滚动条
- GridView产生纵向横向的滚动条
- GridView产生纵向横向的滚动条
- 隐藏横向或纵向滚动条
- DIV 值添加纵向滚动条
- 微信中原来有两种纵向滚动条
- CSS—占据全屏并且没有滚动条
- iPhone开发之UIScrollView滚动组件的使用——纯代码实现图形的横向与纵向滚动
- Android开发——scrollView滚动条
- C++类中的静态成员变量和静态成员函数的作用
- 练习二1001 找方程解
- 图片缓存
- HDU 4123(RMQ（o1）模板 , 树直径)
- 对AlertDialog的简单认识
- 前端开发——滚滚屏（没有纵向滚动条）
- 欢迎使用CSDN-markdown编辑器
- 构造函数正确的写法是什么？两段式的构造函数
- Hibernate缓存机制详解
- java实现图的深度优先搜索算法
- 蛇形矩阵
- poj 3277 City Horizon
- Ajax利用FormData提交表单
- BZOJ 2209: [Jsoi2011]括号序列&&BZOJ 2329: [HNOI2011]括号修复
