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
html5晶格化,前端开发——滚滚屏(没纵向滚动条)相关推荐
- 前端开发技术:HTML5 JS 前端开发主要功能!
HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站.管理系统.手机网页应用(WebApps).混合应用(H ...
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
- 毕业找前端开发工作被拒没经验怎么办?
前端经验宝典 没有工作经验?没有项目经验? 首先我必须声明一点,工作经验工作年限不等于这个人的技术水平.我面试过很多人,有很多四五年工作经验的人不如工作一两年的人,这样的事情非常常见.没有工作经验是正 ...
- python课设答辩问题及答案_HTML5网站前端开发设计答辩问题及答案
1. HTML5前端开发环境有哪些? HTML5网页前端开发,实际也是 HTML网页开发, HTML5只是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言 (HTML)的第五次重大修改的第 ...
- 零基础能不能学习web前端开发?【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
- 【前端 开发学习视频】
1.妙味WEB前端开发全套视频教程 链接: http://pan.baidu.com/s/1bf1Ow2 密码: 2yyu 2.极客学院前端教程(html5 Bootstrap Nodejs) 链接 ...
- 前端开发入门:常用的6种CSS库介绍
在HTML5大前端开发中,CSS是三要素之一,想要从事HTML5大前端开发,就一定要熟练掌握CSS.那么,在网页制作时采用CSS技术,可以有效地对全站页面有共同性质属性的布局.字体.颜色.背景和其它效 ...
- web前端开发学习视频教程下载(百G)
1.妙味WEB前端开发全套视频教程 链接: http://pan.baidu.com/s/1bf1Ow2 密码: 2yyu 2.极客学院前端教程(html5 Bootstrap Nodejs) ...
- web前端开发工作描述_2019年前端开发前景如何?前端开发会被淘汰吗?
近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师.开发工程师.软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员. Web前端在IT行业真正受到重视大概也就六七 ...
最新文章
- crx header invalid_解决Chrome插件安装时程序包无效【CRX_HEADER_INVALID】(转载+xPath插件)...
- iOS - 切换图片/clip subview/iCarousel
- hdu2036(多边形面积)
- 文巾解题 617. 合并二叉树
- (上)python3 selenium3 从框架实现代码学习selenium让你事半功倍
- java 面试题 由浅入深_面试官由浅入深的面试套路
- namespace用法
- 全国高校计算机能力挑战赛C语言组真题
- Android 快捷方式
- Word(六)-强大的“邮件合并”(2)
- 用文本文档制作bat文件
- react 最佳入门_详解React-Todos入门例子
- matlab 曲线收敛,BP神经网络学习曲线收敛问题
- Eclipse 下Struts 2.1.6+ 和spring 2.5.5 整合
- Error: GPG check FAILED
- 名帖168 李邕 行书《出师表》
- 秒杀竞拍屡创网络神话:馅饼还是美丽陷阱
- 文本上划线_如何在Word中对文本进行上划线
- 计算机网络 5电路交换
- python:pyqt5+mysql=学生信息管理系统(图文并茂,超详细)——登录,注册及找回密码篇
热门文章
- c语言指针交换字符串组,c语言 指针交换两个字符串
- 广搜,智能拼图(ZOJ1079)
- 【SSH网上商城】struts搭建及实例
- Android 如何在Eclipse中查看Android API源码 及 support包源码
- 根据MAC地址修改固定IP(附带IPMAC扫描脚本)
- Jquery调用Web Service
- string.Format 格式化输出
- C++/CLI思辨录之Object的对象布局
- Oracle如何建立多库,基于Oracle多库查询方法(分享)
- Python + Flask 执行异步任务