js获取文档和元素的坐标

这两天在写瀑布流的实现，使用了一些关于获取文档坐标、元素位置的函数，刚好看到犀牛书上关于这部分的介绍，特写此文章进行总结，方便日后查找使用。文档坐标和视口坐标元素的位置X，Y坐标是相对于文档的左上角或视口的左上角。向右表示X增加，向下表示Y增加，以像素来度量。首先需要明确的是，文档坐标不等于视口坐标。“视口”只是实际显示文档内容的浏览器的一部分，不包括浏览器的菜单、工具条、

业界 2016年07月05日

AngularJS表单验证

表单网页中用户于服务端交互数据的表单控件有input、select、textarea，而表单是将为了达到一个目的（登录、注册等）各种控件整合到一起的一个集合。表单和其中的表单控件提供了验证服务，可以让用户在提交（一般在点击类型为submit的按钮时提交）表单前意识到自己有非法（不符合要求，以下都将称为非法）的输入。这种验证方式（客户端验证）提供了比单独的服务端验证更好的用户

业界 2016年07月05日

CSS实现3D切换效果

先上效果图和代码吧鼠标悬浮上去，蓝色的front面开始旋转蓝色的front面转过90°时，黄色的back面会显现出来， div# outer{ width: 200px; height: 200px; position: relative; perspective: 300px; margin:10

业界 2016年07月05日

HTML语义化

近来看面试题的时候，经常看到一个问题：HTML语义化是什么意思？w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改，由于不了解H5的新定义，就很容易弄错标签之间的意思。例如：既然i标签是指斜体的意思，那么为什么font-awesome这类字体要用i标签呢？这不是反语义化了吗？除此之外，em和strong都是有强调的意思，又有什么区别呢？可能这个时

业界 2016年07月05日

阿拉伯-汉字-数字转换

说明本文实现了一个从阿拉伯数字到中文数字，以及从中文数字到阿拉伯数字的转换算法。同时用Vuejs和Angularjs同时实现了一遍，对比了一下这两个框架的优劣。在本例中，Vuejs的方便灵活性完胜Angularjs。源代码在这里阿拉伯数字转中文给定一个阿拉伯数字，把它转变为汉语表示的数字。算法根据中文的计数方法，可以把阿拉伯数字按4个一组分成若干section，每个sect

业界 2016年07月05日

AngularJS自定义表单验证

Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max)。在自定义的指令中，我们可以添加我们的验证方法到ngModelController的$val

业界 2016年07月05日

浏览器渲染的那些事（三）

终于到了布局的部分了！布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有的frame层级，为每个需要几何信息的渲染对象进行计算。跟渲染对象位置是0，0。所有渲染对象都有一个layout或reflow方法，每个渲染对象调用需要布局的chi

业界 2016年07月05日

浏览器渲染的那些事（三）

终于到了布局的部分了！布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有的frame层级，为每个需要几何信息的渲染对象进行计算。跟渲染对象位置是0，0。所有渲染对象都有一个layout或reflow方法，每个渲染对象调用需要布局的chi

业界 2016年07月05日

杂(css)

本用于记录个人学习记录： http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B

业界 2016年07月05日

onselect 与 onselectstart 的区别

onselect 与 onselectstart 都属于 JavaScript 当中的 DOM 事件，由于它们二者的拼写比较相似，所以最初使用时弄混了两个事件的效果，在此做一个简单的记录。背景之前在公司的前端项目中，自己写了一个基于 jquery 的分页器，在测试的时候发现了一个问题：当鼠标连续快速点击【下一页】按钮的时候，会将按钮上的文字选中，变成蓝色，体验不是很好。因为

业界 2016年07月05日