常见的一些页面JS特效分析
最近还是在用原生JS写特效,Jquery虽好,但是原生的玩转了才能在将来用Jquery叱咤风云。
最近学习canvas,用其做了一个画板。画板支持画画,擦除,选色,以及保存导出等功能。最主要是通过这一个项目熟悉了canvas的API, 并且由于需要做移动触屏上的支持,所以对移动端的用户事件,移动端事件和PC端事件的区别有了更多的了解。这是项目地址: Canvas-draw
跟定位,浮动,布局等问题类似,CSS中除了这些难点重点之外还存在一个常被面试官提起的知识点——BFC。但是对此很多人存在争议,BFC真的是重点吗?从我学习的感受来看,BFC由于建立在对浮动所带来的副作用的理解基础上,目前只能算难点,但是实际应用来看,由于其自身也会带来额外的副作用(除非用并未得到所有浏览器支持的属性display: flow-root
实现),其实用价值并不足以使其成为重点。但无论如何,它都是面试的一个重点。
有前端工程师称自己可以不用框架从主流浏览器一直写代码到兼容到IE6,这的确是很吊了。在这个框架横行的年代,连大多数框架都放弃了IE6-8,还在为各政府及大型国企,公立机构等写网站的工程师确实不得不忍受IE浏览器。不过作为小菜鸟,目前我只稍微了解了一些常见的IE8一下的兼容方式。
CSS中的line-height是一个很复杂的知识点,因为涉及到了字体设计的相关理论。很多人瞧不起页面仔,但是如果真的想要切出跟设计图一摸一样的网站,拥有一双像素眼,那还是很有难度的。最近复习CSS布局理论和line-height相关知识的时候再一次体会到了这一点。而且意识到了自己之前布局bug比较多可能是因为自己比较喜欢把宽高写死。
在CSS-Tricks上看到一篇文章,才知道竟然有scroll-behavior这一属性,可以实现子元素内容超出父元素高度时用overflow: scroll
+ scroll-behavior: smooth
实现在页面内通过a
标签的href
链接进行跳转的平滑滚动效果。