1、已有UI设计,请先看附件(soiseek3-2)。本项目主要内容是用js+css控制页面自适应屏宽,保证移动、平板的用户体验。不涉及后台交互。
2、页面由metro方块组成,块只有2种宽度:1或1/2。1个单位的metro块为长方形,含图文内容。1/2为图标块,正方形,内容为图标+少量字。Metro块高度不定,各块可不同。整个页面由css+div构成,搜索框、按钮等都是css。页面代码已有。
3、当浏览器窗口宽度改变时,metro块自动重排,以适应窗口宽度。窗口分辨率最大时,页面布局如图所示(附件)。窗口缩小到不能完全容纳页面元素时,页面偏右部分(3X3矩形块)首先重排,变成2X4+1的布局,同时搜索框长度缩小,登录区跟着页面右侧边缘对齐。窗口再缩小到一定程度,登录区换行排到搜索框下方,方块布局变为左侧绿色列表+右侧1X9。再缩小(最小),搜索框排到logo下方,登录区排到搜索框下,左侧绿色列表排到所有块的最后,整个页面宽度=1个矩形块的宽度。
4、重排时1/2块必须2个一起,可看作1个块的占位,这样可以排成整齐的wall。重排以单块整体为单位,不可能出现块宽度改变而内部图文内容重排的现象。该功能可用css+js实现。IE7-9、firefox(最新版)、chrome(最新版)必须实现。IE6如不兼容,可以(部分)牺牲该效果。js应尽量精简,以免拖慢页面速度。
5、请看附件(soiseek3-1-弹出通知栏)。通知栏指页面顶部橙黄色div弹出层。例如http://cn.msn.com/ 在ie9浏览器下会弹出通知,要求将小图标链接拖放到win7任务栏(网站图标驻留任务栏),这一功能能否copy(可选)。
接包方需有较强的前端技术能力。时间5~7天(非5~7工作日)。如项目有实现困难或不合理处,请在竞标时附文沟通。