html5晶格化,前端开发——滚滚屏（没纵向滚动条）

前端开发——滚滚屏(没有纵向滚动条)

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插件

鼠标滚动事件的写法：

$(document).ready(function(){ //页面ready的时候执行$(document).mousewheel(function(){ //当滚动鼠标滚轮时要执行下面的内容console.log("正在测试鼠标滚动");

});

});

运行效果：(查看控制台console)

9.mousewheel方法的两个参数：

$(document).ready(function(){ //页面ready的时候执行$(document).mousewheel(function(event,delta){ //当滚动鼠标滚轮时要执行下面的内容// console.log("正在测试鼠标滚动");// console.log(event); //查看event有哪些值console.log(event.pageX,event.pageY);

//鼠标滚轮往下，输出-1，往上滚，输出1console.log(delta); //查看delta的输出});

});

10.注意：鼠标滚轮滚动的时候，往下是-1，往上是1

11.if语句死锁问题：

$(document).ready(function(){

varnowPage=0; //用nowPage来模拟当前页面的序列号，合法值为0、1、2、3、4//鼠标滚轮的事件捕获$(document).mousewheel(function(e,delta){

if(nowPage>=0&&nowPage<4){

//向下滚动，delta为-1；向上滚动，delta的值为1nowPage=nowPage-delta;

}else{

console.log("超出了合法的页面序号");

}

console.log(nowPage);

});

});

运行效果：

如何解决这个问题呢？

$(document).ready(function(){

varnowPage=0;

$(document).mousewheel(function(e,delta){

nowPage=nowPage-delta;

if(nowPage<0){ //如果nowpPage小于0，就让它=0nowPage=0;

}

if(nowPage>4){ //如果nowPage大于4,就让它=4nowPage=4;

}

console.log(nowPage);

});

});

运行效果：

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.色块滚滚屏：

滚滚屏的书写/*清除样式*/*{

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;}

$(document).ready(function() {

varcurrentPage =0; //当前的页面数varlock =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又恢复为truesetTimeout(function(){

lock=true;

},1000);

}

});

});

0