微信读书APP原型设计

Axure8.0 原型制作设计,iOS版微信读书,使用动态面板实现上下左右滑屏效果、使用动态面板实现tab页切换、使用热区实现交互以及为元件添加交互等等。

查看 原型 >>

创意设计产业科技服务平台-原型设计

Axure8.0 原型制作设计,PC端网站原型设计,实现了全平台 首页、云渲染子平台、动态资讯、动作捕捉子平台、影视后期制作子平台、创意产品交易平台以及后台管理等等20多个页面。

查看 原型 >>

创意设计产业科技服务平台项目

2015.7-2015.9 负责整个网站前台后台的设计和前端开发。青岛市创意设计产业集群综合服务平台主要包含了云渲染子平台、动作捕捉子平台、影视后期制作子平台和创意产品交易平台。 主要负责整个网站前台和后台的设计、前端开发。通过HTML、CSS进行布局、JS动态效果的实现以及jQuery和Bootstrap的使用。

查看 源码 >> 查看 Demo >>

海尔集团易理货平台产品设计与前端实现

查看 源码 >> 查看 Demo >>

100度电商网站

模块化开发了兼容标准浏览器以及IE7浏览器以上的100度电商网站首页,精确不差1px的切图,并用jquery实现了一些导航、焦点图自动轮播、tab标签页切换等动态效果。

查看 源码 >> 查看 Demo >>

cloud云服务页面

使用bootstrap和jquery编写了该响应式页面

查看 源码 >> 查看 Demo >>

实现常见的技术产品官网的页面架构及样式布局

通过实现一个常见的技术产品官网,加深对于HTML/CSS的实战能力。通过HTML及CSS实现PSD设计稿。设计稿是有一定宽度的,这个宽度为页面的最小宽度,也就是说,当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持不变,但是当浏览器窗口宽度大于设计稿宽度时,页面部分内容的宽度应该保持和浏览器窗口宽度一致。 在Chrome中完美实现与设计稿的各项字体、布局、内外边距等样式。

查看 源码 >> 查看 Demo >>

苏宁易购移动端首页

参考psd设计稿,实现苏宁易购首页的移动端布局开发,通过less css预处理器进行布局,学会了不同分辨率下图片文字布局同步变化的解决方法,掌握了一些移动端布局兼容知识,例如固定元素内容中有input的话,会导致触发键盘之后导致固定定位错位的解决方法、取消a标签手指按下时出现的黑色遮罩层以及解决IOS下的表单元素圆角的问题等。

查看 源码 >> 查看 Demo >>

通过HTML及CSS模拟报纸排版

参考psd设计稿,实现页面开发,要求实现效果与样例基本一致。页面宽度固定(定宽)。页面中的各字体大小,内外边距等可参看标注图。

查看 源码 >> 查看 Demo >>

京东移动端简单静态页面

参考psd设计稿,实现京东一个页面的移动端开发,掌握了根据不同的设备动态生成viewport和动态设置rem,以及移动端html和css的布局知识。

查看 源码 >> 查看 Demo >>

带缩略图的图片切换

可以通过上一页或者下一页进行图片的循环切换,也可以通过下方小圆点进行选择图片,当鼠标移入小圆点时,显示图片对应的缩略图。

查看 源码 >> 查看 Demo >>

带缩略图的图片自动切换

当鼠标不移入图片位置时,图片自动切换,当鼠标移入时停止自动切换。也可以通过上一页或者下一页进行图片的循环切换,或者通过下方小圆点进行选择图片,当鼠标移入小圆点时,显示图片对应的缩略图。

查看 源码 >> 查看 Demo >>

延时消失的菜单

当鼠标移入一级菜单时,在下方显示对应的二级菜单,并可移入二级菜单进行选择。鼠标移出一级和二级菜单,二级菜单消失。

查看 源码 >> 查看 Demo >>

按钮控制商品图片上下滚动

当鼠标按住向上按钮不放时触发onmousedown事件,商品列表下方进入可视区域,直到滚到列表底部后停止;当鼠标按住向下按钮不放时,商品列表上方会进入可视区域,直到滚到列表顶部停止。

查看 源码 >> 查看 Demo >>

自动轮换选项卡

有两个选项卡,每个选项卡有6张图片,自动轮换每个选项卡的每张图片。

查看 源码 >> 查看 Demo >>

图片抖动

当鼠标移入图片时,该图片会出现上下抖动,一直到停止的效果,类似苹果系统常见的抖动效果。

查看 源码 >> 查看 Demo >>

图片时钟

根据系统时间,当时间发生变化时,以上下滑动数字的方式来展示时钟。

查看 源码 >> 查看 Demo >>

倒计时

实现简单的倒计时功能,在输入框填写未来的时间,然后点击按钮就开始倒计时。

查看 源码 >> 查看 Demo >>

文字展开收缩查找替换

实现文字的收缩和展开功能,以及查找字符高亮显示和替换字符的功能。

查看 源码 >> 查看 Demo >>

键盘控制小方块移动

用键盘的上下左右键控制小方块的移动

查看 源码 >> 查看 Demo >>

碰撞检测

当小方块在鼠标拖拽下没有碰到图像位置时,图像是黑白色,当小方块碰到图像位置时,图像变成彩色。

查看 源码 >> 查看 Demo >>

模拟滚动条控制内容滚动

模拟滚动条滑块滑动,并且在从上到下滑动的过程中,控制这右边内容的滚动,当滚动条滑动到最大位置,内容在相应的显示框显示完毕。

查看 源码 >> 查看 Demo >>

记录用户名(cookie)

输入用户名,点击登陆的时候,用cookie记住密码。当关闭浏览器再次打开时,用户名已存在输入框中。点击删除按钮,删除cookie中存着的用户名,关闭浏览器,再次打开,输入框为空。

查看 源码 >> 查看 Demo >>

css3实现图片遮罩、字体背景动画和光线效果

用css3的border-radius、mask、background-clip、transition、background: linear-gradient()等实现

查看 源码 >> 查看 Demo >>

钟表(表盘)

用css3的transform等以及JS实现类似表盘的圆形钟表

查看 源码 >> 查看 Demo >>

360导航

用css3的transform和transition以及JS等实现类似表盘的圆形钟表

查看 源码 >> 查看 Demo >>

JS改变方块样式

在弹出窗内设置方块的颜色,宽度,高度,网页上的方块根据设置的数据进行相应的改变。

查看 源码 >> 查看 Demo >>

图片简单的左右切换

简单实现类似百度图片浏览的 图片切换 功能。点击上一页或者下一页进行图片切换。

查看 源码 >> 查看 Demo >>

图片生成应用

控制鼠标在浏览器窗口中移动,移动过的地方就会生成单格图片,最后组成若干幅完整图。

查看 源码 >> 查看 Demo >>

找到合适的值

找到arr里所有的数字、找到可以转成数字的、把转成数字以后,最大值判断出来、把 NaN 所在的位置找出来。arr数组为:var arr = ['100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];

查看 源码 >> 查看 Demo >>

qq列表展示

模拟简单的qq列表

查看 源码 >> 查看 Demo >>

购物清单

模拟简单的购物清单

查看 源码 >> 查看 Demo >>

百度音乐全选操作

模拟百度音乐列表的全选操作,包括选中和移出的效果和全选操作

查看 源码 >> 查看 Demo >>

百度文库评分

模拟百度文库评分,鼠标移入可以查看对应小星星的评价词,移出消失,点击则为确认,移入可修改。

查看 源码 >> 查看 Demo >>

定时换肤

点击按钮时自动定时换肤,选择合适的皮肤后可以点击停止按钮停止。

查看 源码 >> 查看 Demo >>

方块移动动画-函数封装、回调函数

方块通过点击方向按钮来向不同方向滑行,对运动过函数程进行了封装,利用回调函数进行多次方向控制。

查看 源码 >> 查看 Demo >>

多个方块移动动画

点击网页空白区域后,生成的多个小方块每隔几十毫秒向下滑行一段距离,到达位置后,再次点击空白区域,所有方块向上滑行到原位置,再次点击依次循环。

查看 源码 >> 查看 Demo >>

三栏式布局

左右两栏宽度固定,中间一栏根据父元素宽度填充满。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。 调节浏览器宽度,固定宽度和自适应宽度的效果始终符合预期。

查看 源码 >> 查看 Demo >>

定位和居中问题

灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。注意测试不同情况,尤其是极端情况下的效果。调节浏览器高度和宽度,灰色元素始终水平和垂直居中,黄色扇形的定位始终准确。

查看 源码 >> 查看 Demo >>

零基础HTML及CSS编码

针对设计稿样式进行合理的HTML架构。头部和底部的黑色区域始终是100%宽。页面右侧部分为固定宽度,左侧保持与浏览器窗口变化同步自适应变化 左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化。10张图片需要永远都完整展现。

查看 源码 >> 查看 Demo >>

响应式网格(栅格化)布局

使用HTML与CSS实现类似BootStrap的响应式12栏网格布局,根据屏幕宽度,元素占的栏数不同。 网格布局是一种实现这一需求的办法,它的好处是,把所有的宽度分为固定栏数(常用 12 栏),从而更高效的控制元素宽度。 以 BootStrap 的网格系统为例,DOM 元素类名形如 col-md-4;其中 col 是“列” column 的缩写;md 是 medium 的缩写,适用于应屏幕宽度大于 768px 的场景;4 是占四栏的意思。

查看 源码 >> 查看 Demo >>

Flexbox 布局练习

屏幕宽度小于 640px 时,调整 Flexbox 的属性以实现第四个元素移动到最前面的效果,继续缩小可以换行。 思考 Flexbox布局和网格布局的异同,以及分别适用于什么样的场景。可以搜索一下别人的结论,不过要保持思辨的态度,不可直接接受别人的观点。

查看 源码 >> 查看 Demo >>

移动Web页面布局实践

本任务只涉及 HTML 及 CSS。 实现的页面和设计图在iOS Safari,微信,Android浏览器中均基本一致。 尝试在适合的地方使用CSS 3中的flex布局。

查看 源码 >> 查看 Demo >>

CSS3的新特性

实现单双行列不同颜色,且前三行特殊表示的表格。 实现正常状态和focus状态宽度不一致的input文本输入框,且鼠标焦点进入输入框时,宽度的变化以动画呈现。 不使用JavaScript,实现一个Banner图轮流播放的效果,且点击右下角的1,2,3可以切换到对应Banner图片。

查看 源码 >> 查看 Demo >>

零基础JavaScript编码

本任务完成的功能为:用户可以在输入框中输入任何内容,点击“确认填写”按钮后,用户输入的内容会显示在“您输入的值是”文字的右边

查看 源码 >> 查看 Demo >>

过滤筛选空气质量数据数组

在上一任务基础上继续JavaScript的体验。页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上。

查看 源码 >> 查看 Demo >>

提取并排序空气质量指数

在上一任务基础上继续JavaScript的体验。读取页面上已有的source列表,从中提取出城市以及对应的空气质量 将数据按照某种顺序排序后,在resort列表中按照顺序显示出来。学习JavaScript中的数组对象遍历、读写、排序等操作。

查看 源码 >> 查看 Demo >>

添加删除城市与空气质量

在上一任务基础上继续JavaScript的体验。用户输入城市名称和空气质量指数后,点击“确认添加”按钮后,就会将用户的输入在进行验证后,添加到下面的表格中,新增一行进行显示。用户输入的城市名必须为中英文字符,空气质量指数必须为整数。用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理(trim)。用户输入不合规格时,需要给出提示(允许用alert,也可以自行定义提示方式)。用户可以点击表格列中的“删除”按钮,删掉那一行的数据。

查看 源码 >> 查看 Demo >>

不同地区不同时间空气质量指数柱状图

用户可以选择查看不同的时间粒度,以选择要查看的空气质量指数是以天为粒度还是以周或月为粒度; 天:显示每天的空气质量指数;周:以自然周(周一到周日)为粒度,统计一周7天的平均数为这一周 的空气质量数值,如果数据中缺少一个自然周的几天,则按剩余天进行计算; 月:以自然月为粒度,统一一个月所有天的平均数为这一个月的空气质量数值; 用户可以通过select切换城市;通过在"aqi-chart-wrap"里添加DOM,来模拟一个柱状图图表,横轴是时间, 纵轴是空气质量指数,参考图(点击打开)。天、周、月的数据只根据用户的选择显示一种。 天:每天的数据是一个很细的矩形;周:每周的数据是一个矩形;月:每周的数据是一个很粗的矩形; 鼠标移动到柱状图的某个柱子时,用title属性提示这个柱子的具体日期和数据;

查看 源码 >> 查看 Demo >>

模拟队列

模拟一个队列,队列的每个元素是一个数字,初始队列为空; 有一个input输入框,以及4个操作按钮; 点击"左侧入",将input中输入的数字从左侧插入队列中; 点击"右侧入",将input中输入的数字从右侧插入队列中; 点击"左侧出",读取并删除队列左侧第一个元素,并弹窗显示元素中数值; 点击"右侧出",读取并删除队列又侧第一个元素,并弹窗显示元素中数值; 点击队列中任何一个元素,则该元素会被从队列中删除。

查看 源码 >> 查看 Demo >>

队列排序

基于任务18;限制输入的数字在10-100;队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示;队列展现方式变化如图,直接用高度表示数字大小;实现一个简单的排序功能,如冒泡排序(不限制具体算法)。

查看 源码 >> 查看 Demo >>

模糊匹配

基于任务18进行升级。将新元素输入框从input改为textarea。允许一次批量输入多个内容,格式可以为数字、中文、英文等,可以通过用回车,逗号(全角半角均可),顿号,空格(全角半角、Tab等均可)等符号作为不同内容的间隔。增加一个查询文本输入框,和一个查询按钮,当点击查询时,将查询词在各个元素内容中做模糊匹配,将匹配到的内容进行特殊标识,如文字颜色等。举例,内容中有abcd,查询词为ab或bc,则该内容需要标识。

查看 源码 >> 查看 Demo >>

JavaScript和树(一)

提供一个按钮,显示开始遍历,点击后,以动画的形式呈现遍历的过程。 二叉树的遍历算法和方式自定,前序中序后序皆可,但推荐可以提供多种算法的展示(增加多个按钮,每个按钮对应不同的算法)。 当前被遍历到的节点做一个特殊显示(比如不同的颜色)。 每隔一段时间(500ms,1s等时间自定)再遍历下一个节点。

查看 源码 >> 查看 Demo >>

JavaScript和树(二)

基于任务22,将二叉树变成了多叉树,并且每一个节点中带有内容。提供一个按钮,显示开始遍历,点击后,以动画的形式呈现遍历的过程。当前被遍历到的节点做一个特殊显示(比如不同的颜色)。每隔一段时间(500ms,1s等时间自定)再遍历下一个节点。增加一个输入框及一个“查询”按钮,点击按钮时,开始在树中以动画形式查找节点内容和输入框中内容一致的节点,找到后以特殊样式显示该节点,找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致

查看 源码 >> 查看 Demo >>

JavaScript和树(三)

基于任务23,添加节点的选择、增加与删除的功能。点击某个节点元素,则该节点元素呈现一个特殊被选中的样式。增加一个删除按钮,当选中某个节点元素后,点击删除按钮,则将该节点及其所有子节点删除掉。增加一个输入框及一个“添加”按钮当选中某个节点元素后,点击增加按钮,则在该节点下增加一个子节点,节点内容为输入框中内容,插入在其子节点的最后一个位置。

查看 源码 >> 查看 Demo >>

表单验证

在页面中实现一个输入框与按钮,要求点击验证按钮后,对输入框中内容进行格式校验,并在其下方显示校验结果 校验规则: 1.字符数为4~16位 2.每个英文字母、数字、英文符号长度为1 3.每个汉字,中文符号长度为2

查看 源码 >> 查看 Demo >>

多个表单项的动态校验

表单获得焦点时,下方显示表单填写规则 表单失去焦点时校验表单内容 校验结果正确时,表单边框显示绿色,并在下方显示验证通过的描述文字 校验结果错误时,表单边框显示红色,并在下方显示验证错误的描述文字 点击提交按钮时,对页面中所有输入进行校验,校验结果显示方式同上。若所有表单校验通过,弹窗显示“提交成功”,否则显示“提交失败”

查看 源码 >> 查看 Demo >>

联动

在页面中完成两个单选框,切换单选框的不同选项时下方显示的表单随之切换。 当选择在校生时,出现两个select下拉菜单,一个选择城市,一个选择学校。当选择非在校生时,出一个文本输入框。学校下拉菜单里的学校名单均为城市下拉菜单中所选的城市中的大学,当城市发生变化时,学校一起发生变化。

查看 源码 >> 查看 Demo >>