模仿拉勾网

文章目录

1. 简易拉勾网项目设计说明

二月份模仿拉勾网首页而做的一个小项目，重点是实现拉勾网首页的几个效果，并对页面进行模块化构建

安装依赖（less, anywhere, jade）

这几个比较常用，所以装到了全局

npm install -g less
npm install -g anywhere
npm install -g jade

补充

命令行中使用JADE进行编译(不压缩/开启监视)

jade -P -w index.jade

浏览器中使用LESS进行预处理

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="javascripts/less.js"></script>

使用anywhere启动本地服务器，解决开发环境下跨域访问问题

anywhere 8860

简易拉勾网项目设计说明

1.核心功能

实现的核心效果：左侧菜单栏、轮播图、鼠标穿过有滑动效果的小栏目

2.技术选型

前端：

Jade（通过其与后端配合实现页面组件的模块化）
Less（实现CSS样式的整合与分离）
jQuery（方便基础操作）

工具及环境

Linux(发行版Fedora)
Sublime Text 3
AlloyDesigner

3.页面分析

复用部分

1.头部（除注册和登录页）

2.底部（除注册和登录页）

3.回到页首+反馈（除注册和登录页）

4.底部登陆条（除注册和登录页和职位搜索）

5.页码（职位搜索页/公司页）

6.颜色

主题绿 #05eaaf
主题灰 #555
主题黑 #333
主题黄 #fa6041
字体未选中灰 #999
背景灰 #fafafa
边框头灰 #d2d2d2
边框底灰 #e5e5e5
虚线灰 #e1e1e1

拉勾网中灰色用的比较混乱，目前浅灰色（看不出明显区别的浅灰色）已经见过不下5种，实际制作中我们将精简它们为一种灰色

7.字体

字体集

"Hiragino Sans GB","Microsoft Yahei",SimSun,Arial,"Helvetica Neue",Helvetica
默认字号 14px
默认大字号 18px
默认小字号 12px
职位[地点] 薪资公司 16px

首页-独立组件

1.首页-左侧职位选择器

2.首页-中间职位列表页

3.首页-搜索框

4.首页-轮播图

5.首页-推荐公司

6.首页-友情链接

职位搜索-独立组件

1.职位搜索-搜索框

2.职位搜索-过滤器

3.职位搜索-排序器

4.职位搜索-职位列表

5.职位搜索-相关搜索

7.职位搜索-最近浏览

8.职位搜索-QQ群推荐

9.职位搜索-新版APP推荐

职位详情-独立组件

1.职位详情-详情

2.职位详情-公司详情

3.职位详情-相似职位

4.职位详情-面试评价

5.职位详情-看了还会看

6.职位详情-移动端推荐

7.职位详情-一拍推荐

4.核心效果的实现

左侧菜单栏

(function careerSelector() {
    var box = $("div.career-box");
    box.bind("mouseenter", function (e) {
        $($(this).children()[0]).addClass("career-list-out");
        $($(this).children()[1]).addClass("push-out");
    });
    box.bind("mouseleave", function (e) {
        $($(this).children()[0]).removeClass("career-list-out");
        $($(this).children()[1]).removeClass("push-out");
    });
})();

轮播图

(function banner() {
    var i = 0;
    var imgs = $("div.banner-left");
    var ctrls = $("div.banner-right")[0];
    var current = $("span.banner-ctrl-current")[0];
    ctrls.onmouseover = function (e) {
        if (e.target.className == "banner-ctrl") {
            window.clearInterval(bannerTimer);
            jump($(e.target).index()-1);
        }
    };
    ctrls.onmouseout = function (e) {
        if (e.target.className == "banner-ctrl") {
            bannerTimer = window.setInterval(function () {
                    jump(i+1);
                }, 1000);
        }
    };
    var ary1 = [0, 55, 110];
    var ary2 = [0, -160, -320];
    function jump(index) {
        if (index>2) {index=0;}
        if (index<0) {index=2;}
        i = index;
        imgs.clearQueue();
        imgs.animate({top: ary2[index]+'px'}, 200);
        $(current).clearQueue();
        $(current).animate({top: ary1[index]+'px'}, 200);
    }
    var bannerTimer = window.setInterval(function () {
        jump(i+1);
    }, 1000);
})();

鼠标滑过效果

(function ad() {
    var adMasks = $("li.ad-box");
    $(adMasks).bind("mouseenter", function (e) {
        if (e.target.className == "ad-box") {
            var flag = testMouse(e);
            var a = $(e.target).children("div.ad-mask")[0];
            $(a).clearQueue();
            switch(flag) {
                case "left": $(a).animate({left:"0px"}, 200);break;
                case "right": $(a).css({top: "0px", left: "114px"}).animate({left:"0px"}, 200);break;
                case "top": $(a).css({top: "-114px", left: "0px"}).animate({top:"0px"}, 200);break;
                case "bottom": $(a).css({top: "114px", left: "0px"}).animate({top:"0px"}, 200);break;
            }
        }
    });
    $(adMasks).bind("mouseleave", function (e) {
        if (e.target.className == "ad-box") {
            var flag = testMouse(e);
            var a = $(e.target).children("div.ad-mask")[0];
            $(a).clearQueue();
            switch(flag) {
                case "left": $(a).animate({top:"0px", left:"-114px"}, 200, function () {
                        $(a).css({top: "0px", left: "-114px"});
                            });break;
                case "right": $(a).animate({top:"0px", left:"114px"}, 200, function () {
                        $(a).css({top: "0px", left: "-114px"});
                            });break;
                case "top": $(a).animate({top:"-114px", left:"0px"}, 200, function () {
                        $(a).css({top: "0px", left: "-114px"});
                            });break;
                case "bottom": $(a).animate({top:"114px", left:"0px"}, 200, function () {
                        $(a).css({top: "0px", left: "-114px"});
                            });break;
            }
        }
    });
    function testMouse(event) {
        a=event.pageX-$(event.target).offset().left;
        b=event.pageY-$(event.target).offset().top;
        console.log(a, b);
        var ary = [Math.abs(a-0), Math.abs(a-114), Math.abs(b-0), Math.abs(b-114)];
        var dis = ary.indexOf(Math.min.apply(null, ary));
        console.log(ary, ary[dis]);
        switch (dis) {
            case 0: console.log("left");return "left";
            case 1: console.log("right");return "right";
            case 2: console.log("top");return "top";
            case 3: console.log("bottom");return "bottom"; 
        }
    }
})();

5.有趣的问题

导航栏的语义化: nav>ul>li/nav>dl>dt/nav>a该如何选择
清除浮动的几种方法
CSS3新增选择器
文本换行的几种策略
JADE和LESS的高级功能
样式分离与整合
less模块化
使用AJAX技术，做到不刷新页面更改绑定数据
初次使用jQuery
初次使用Linux(发行版Fedora)作为开发环境
解决了openJade(某Linux库)与Jade(Node.js模板引擎)相互冲突覆盖的问题
解决了Linux下科学上网的问题

Kevin's Coffee

虚怀若谷，人淡如梅