首页 > 代码库 > 【个人主页】搭建个人主页,准备找工作啦

【个人主页】搭建个人主页,准备找工作啦

1.首页:添加背景图

2.项目经验:分几个部分进行展示

小游戏、论坛、插件、css3、vue、jQuery mobile、todolist

3.前端技能

4.个人经历

5.左侧信息栏

js部分:

滚轮事件和键盘事件

参考:http://www.ydcss.com/archives/516

WebKit内核,Trident内核 => mousewheel

Gecko内核 => DOMMouseScroll

1、mousewheel

IE6首先实现了mousewheel事件。此后,Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome及Safari)对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta属性。当用户向上滚动鼠标滚轮时,wheelDelta是120的倍数;当用户向下滚动鼠标滚轮时,wheelDelta是-120的倍数。

2、DOMMouseScroll

Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚轮滚动时触发。与mousewheel事件一样,DOMMouseScroll也被视为鼠标事件,因而包含于鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中,当向上滚动鼠标滚轮时,这个属性的值是-3的倍数,当向下滚动鼠标滚轮时,这个属性的值是3的倍数。火狐内核FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值,而其他浏览器是负值。

function() {
            $(document).on("mousewheel keydown DOMMouseScroll",
            function(t) {   /*t是传进去的event对象,里面包含wheelDelta等属性,滚轮向上滑其值为120,向下为-120*/
                console.log(‘t‘,t);
                if (!e()) {
                    t = t || window.event;
                    var n = t.wheelDelta || -t.detail;
                    0 > n || 40 == t.keyCode ? 3 >= s && s++:(n > 0 || 38 == t.keyCode) && s >= 1 && s--,
                    o()
                }
            })
        } (),

touch事件

参考:http://www.cnblogs.com/yanxuan/p/6160630.html

在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。

每个事件包含下面三个用于跟踪虎摸的属性:

  touches:表示当前跟踪的触摸操作的touch对象的数组。

  targetTouches:特定于事件目标的Touch对象的数组。

  changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

 每个touch事件包含下面的属性:

  clientX:触摸目标在视口中的x坐标。

  clientY:触摸目标在视口中的y坐标。

  identifier:标识触摸的唯一ID。

  pageX:触摸目标在页面中的x坐标。

  pageY:触摸目标在页面中的y坐标。

  screenX:触摸目标在屏幕中的x坐标。

  screenY:触摸目标在屏幕中的y坐标。

  target:触摸的DOM节点目标

 

css部分

当屏幕宽度小于768px时,调整元素宽高和字体大小的方法

参考网易的做法:http://www.cnblogs.com/lyzg/p/4877277.html

deviceWidth通过document.documentElement.clientWidth就能取到了,所以当页面的dom ready后,做的第一件事情就是:

(1)先拿设计稿竖着的横向分辨率除以100得到body元素的宽度(在我的项目中取iPhone7 plus的宽度414/100=4.14):

如果设计稿基于iphone6,横向分辨率为750,body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5,横向分辨率为640,body的width为640 / 100 = 6.4rem

(2)布局时,设计图标注的尺寸除以100得到css中的尺寸

某元素高度为210px,写样式的时候css应该这么写:height: 2.1rem。之所以取一个100作为参照,就是为了这里计算rem的方便!

(3)在dom ready以后,通过以下代码设置html的font-size:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + ‘px‘;

补充说明:采用该方法,视口要如下设置

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

根据该方法写出了适用于个人主页的移动端适配方案:

<script type="text/javascript">/*根据js监控页面的窗口大小 然后响应改变所有 font-size的大小*/
        (function () {
            function remSize() {
                let sw = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = Math.floor(sw / 4.14) + ‘px‘;    /*4.14,设计稿的横向分辨率(iPhone7 plus)414/100得来*/
            }
            window.onresize = remSize;/*onresize 事件会在窗口或框架被调整大小时发生*/
            window.onload = remSize;
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
                let sw = document.documentElement.clientWidth;
                var angle = window.screen.orientation.angle || window.orientation;
                if (sw < 769 && (angle === 90 || angle === -90)) {
                    alert("竖屏浏览体验更佳,亦可使用PC");
                }
            });/*移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机旋转角度*/
        })();
    </script>

第二页-项目经验

实现每个project中img、txt、btn等高对齐,因为设置了display:table-cell,所以它们三个只要有一个高度发生变化,其余两个会一起变化,添加display:table-cell之后,子div在父div中实现了垂直居中效果,不过需要注意的是,在IE6和 IE7这样低版本的浏览器中无效。display:table-cell的作用,它可以指定对象作为表格单元格,类同于html标签<td>,也就是说它可以使对象具有表格单元格的属性,添加了display:table-cell属性之后,div 就具有了align属性,于是vertical-align:middle也就生效了,可以实现垂直居中。

.page2 .project {
    display: table;   /*此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。*/
    height: 100px;
    width: 450px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 1px 3px 3px 0 #b9b9b9;
    border-radius: 2px;
    opacity: 0;
    cursor: pointer;
    box-sizing: border-box;
    padding: 5px
}

.page2 .project .pro-img {
    display: table-cell;     /*此元素会作为一个表格单元格显示(类似 <td> 和 <th>)*/
    vertical-align: middle
}
.page2 .project .pro-txt {
    display: table-cell;
    text-align: left;
    padding: 0 10px
}
.page2 .project .pro-btn {
    display: table-cell;
    vertical-align: middle
}

第四页-个人经历

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

line-height:2;行高是2倍的文字大小,均以相应的字体为基准。 

display:list-item为元素内容生成一个块型盒,随后再生成一个列表型的行内盒。其效果就和ul中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点,而display:block则不会出现黑点。

.page4 .history .intro>dd {
    display: list-item;   /*此元素会作为列表显示。*/
    list-style-type: circle   /*空心圆*/
}

 

 

【个人主页】搭建个人主页,准备找工作啦