2018阿里巴巴前端面试题,附详细答案(1)

IT就业
0 134

1.使用css实现一个持续的动画效果 animation:mymove 5s infinite; @keyframes mymove { from {top:0px;} to {top:200px;} } 主要考:animation 用法 值 描述 animation-name 规定需要绑定到选择器的 keyframe 名称。 animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。 2.使用js实现一个持续的动画效果 最开始的思路是用定时器实现,最后没有想的太完整,面试官给出的答案是用requestAnimationFrame。 定时器思路 var e = document.getElementById('e') var falg = true; var left = 0; setInterval(() => { left == 0 ? falg = true : left == 100 ? falg = false : '' falg ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px` }, 1000 / 60) requestAnimationFrame 由于之前没有用过这个 API 所以是现学的。 //兼容性处理 window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); var e = document.getElementById("e"); var flag = true; var left = 0; function render() { left == 0 ? flag = true : left == 100 ? flag = false : ''; flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`; } (function animloop() { render(); requestAnimFrame(animloop); })(); 不足之处请指正(毕竟是现学的)顺便查了一下优势: 浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果 解决毫秒的不精确性 避免过度渲染(渲染频率太高、tab 不可见暂停等等) 注:requestAnimFrame 和 定时器一样也头一个类似的清除方法 cancelAnimationFrame。 3.右边宽度固定,左边自适应 第一种: <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style> <body> <div class="left"></div> <div class="right"></div> </body> 第二种 <style> div { height: 200px; } .left { float: right; width: 200px; background-color: rebeccapurple; } .right { margin-right: 200px; background-color: red; } </style> <body> <div class="left"></div> <div class="right"></div> </body> 暂时想到了两种。 内容来源于网络。如需系统学习前端知识内容,可以选择优就业前端网课,详情请戳: a(http://xue.ujiuye.com/class-36710/)[http://xue.ujiuye.com/class-36710/]

举报 回复
  • 还没有人回答..
常见问题
公务员面试过程中可以透露自己的学历、专业、籍贯等个人信息吗 6099
国家公务员考试报名费已经缴了,但由于个人原因不去参加笔试,会不会有什么不好的影响 6205
教师资格证现场确认需要哪些资料,在籍学习证明去哪开 5991
公务员报考 2812
没有取得学位证对报考公务员、事业单位、国企及银行会受到怎样的影响?? 5522
国考个人信息 2776
国考报名 2623
国考报名人事档案存放单位写错一个字怎么办 5743
公务员国考中金融学类专业包括哪些? 6037
UI设计好学吗? 749