序言:今天又进行了这一周的面试,不同的是我是其中面试者之一。我觉得模拟面试真的是一个很好的体验,每一次面试都学到很多,和知道许多需要注意的点。
其次今天讲了一个知识点,就是hammer.js,下面我就来详细说说今天又学到的面试技巧和hammer.js吧。
一:面试技巧要素
1:个人简历主要内容:
A:姓名,电话,邮箱,
B:自我介绍内容:占全片3分之一(记得一定要说自己性格活泼,善于交流哟)
C:求职意向:一行
D:工作经历:
某某年某某月-某某年某某月:项目名称
项目简单描述:该项目是一个怎样的项目,有哪些模块,用了哪些知识技能
项目自己负责的部分:自己负责模块和用到的技能
E:个人技能:(用于吹牛逼)
a.精通HTML+ css,div+css布局,移动端的em,rem布局,HTML5+css布局,
b.熟悉960GridSystem,bootstrap,less,sass等css框架,
c.熟悉js,ECMAscript,了解ES6,同时也熟悉jquery,zepto,jquerymodile,hammer.js,require。js等js库,还能自己编写jquery插件,
d.还熟悉node.js,express,jade等node.js库,
e.以及php,MySQL,c语言等后台语言....
2.自我介绍:不快不慢不慌,井井有条,有底气自信,多说重点,多讲项目,让你来引导面试官,说话气从丹田里出
3.姿态:坐姿端正,不勾腰驼背,手别乱摸,也别乱放,眼神不要飘,直视面试官,面带微笑
二:hammer.js知识点:
效果:实现图片的来回滑动轮播过程
1:HTML代码:
<div id="imgs">
<ul id="show">
<li><img src="img/01.jpg"/></li>
<li><img src="img/02.jpg"/></li>
<li><img src="img/03.jpg"/></li>
<li><img src="img/04.jpg"/></li>
</ul>
</div>
2.css代码:
<style>
*{
margin:0;
padding:0;
}
div{
660px;
height:380px;
position: relative;
margin:50px auto;
overflow:hidden;
border:5px solid #000;
box-shadow:0 0 5px ;
}
#imgs ul{
400%;
height:380px;
position:absolute;
left:0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#imgs ul li{
list-style:none;
660px;
float:left;
transition:all 0.5s linear;
}
3.hammer.js代码:
js原生方法:
引用<script src="js/hammer.js"></script>插件
var show=document.getElementById('show');
var mc=new Hammer(show);
mc.on('pan',function(e){
if(e.distance>=400){
show.style.left="-660px";
} else if(e.distance<400){
show.style.left= e.distance+"px";
}
if(e.distance<400){
show.style.left="0px";
}
})
jquery方法:
引用
<script src="js/jquery-2.1.4.js"></script>
<script src="js/hammer.js"></script>
<script src="js/jquery.hammer.js"></script>
插件
$('#show').hammer().bind('pan',function(ev){
var e=ev.gesture;
if(e.distance>=320){
show.style.left="-660px";
} else if(e.distance<400){
show.style.left= e.distance+"px";
}
if(e.distance<400){
show.style.left="0px";
}
})