今天主要内容回顾

序言:今天又进行了这一周的面试,不同的是我是其中面试者之一。我觉得模拟面试真的是一个很好的体验,每一次面试都学到很多,和知道许多需要注意的点。

         其次今天讲了一个知识点,就是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";
}
})

原文地址:https://www.cnblogs.com/lumeiling/p/5087486.html