摘要： 最早时，公司的H5项目中曾用过点击一个“加载更多”的DOM元素来实现分页的功能，后来又用过网上有人写的一个上拉加载更多的插件，那个插件是页面将要滚动到底部时就自动请求数据并插入到页面的后边，其实这样也是可以的，不过在我们的负责人看了之前的效果后提出的要求是希望页面滚动到底部时先暂时不加载更多的数据，而是当页面滚动到底部且用户还在往上拉动页面时再加载更多。这样的好处是，万一用户只是想滚动到底部只看看被屏幕遮挡住的其他数据而没有想要看更多的数据时，就不用再请求数据了。于是我就查资料找到了一个基于iscroll的插件实现的这种效果。 阅读全文

摘要： 公司马上就要三周岁了，所以市场部和产品共同策划了一个“正青春，共成长”的主题代言活动，该活动已经在国庆节及中秋节期间让公司员工和用户为公司代言了，本篇博客内容主要为了记录在这次开发中遇到的问题以及解决问题的办法。 开发要求： 1、用户可以从手机相册上传图片或拍照上传图片； 2、用户可以输入为公司代言的地点，如：我在：上海； 3、将用户输入的代言地点及活动二维码生成一张图片供用户保存到手机，以方便发送朋友圈或好友。 功能实现： 1、使用H5的input[type="file"]标签来上传图片，并使用其原生的js代码将其转换成base64字符串的图片； 2、使用canvas将用户上传的图片和输入的代言地点及活动二维码生成一张图片; 3、记录用户生成的图片信息。 阅读全文

摘要： 今天在做一个活动页面时，产品想要在页面中添加一个吸引人注意的小图片左右晃动的效果，并且该效果是间歇执行的。我一想应该挺简单的吧，二话没说就答应了，谁知在真正实现的时候才发现还是有些许困难的。于是就在网上各种找资料，找的过程中，只是发现了可以左右晃动摇摆的css3动画效果，却没有可以间歇执行的类似的动画效果。最后我想到了以前写的一个可以间歇向上无缝滚动的css3的效果，拿来一试，也不行。最后在SegmentFault上有个同行的一段代码提醒了我，于是就有了以下可以实现间歇左右晃动的css3效果 阅读全文

摘要： 最近一直在做移动端的改版项目，做之前老大就跟我说了好几次，说这次改版一定要用雪碧图减少一个页面的图片的请求次数，能加快页面的加载速度就一定要加快，我说可以。因为之前的项目开发时间过短，也没有时间去慢慢实现雪碧图，所以就一直没有做这样的一个功能，但这次时间较为充分，于是就开始着手做雪碧图。做之前呢，首先想到的就是用PS将所有的小图放在一张大图上，可那么多的小图，一张一张往上放，岂不累趴，而且你还没有办法去确切的计算整张雪碧图的宽高，这不搞死人吗？于是就上网查资料，然后就有了本文很简单的生成雪碧图的方法。 阅读全文

摘要： 最近在做一个H5的改版项目，产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果，拿到这样的设计稿后，我有点懵了，自己写一个js？去网上找一个这样的效果？自己写一个可以，只是实现起来有点花时间，项目进度不允许；网上找一个，却不知道这样的效果该如何查，该输入什么关键词查询。于是自己就按照效果大概的意思去查了一下，果真有这样的案例和实现代码，太好了。可仔细一看，大部分都是基于jquery的，而且还连带着引用相关的插件，这不太好吧，这个效果也没有多难吧，引用一个插件有点浪费之嫌吧。 阅读全文

摘要： 最近在做一个H5的项目，里边涉及到拍照上传图片的功能以及识别图片的功能，这里对识别图片的功能不做赘述，不属本文范畴。我在做完并上线项目后，同事跟我提了一个要求是可不可以同时选择多张图片上传，我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了，如果不加，就无法同时选择多张图片，于是我就照实跟同事说了这个情况。但回头一想，单张图片可以上传，那多张图片呢？于是就有了本文的内容。 阅读全文

摘要： 最近在做一个活动页面，要求触摸切换图片时，默认在可视区域中显示三张图片，其中中间的一张图片比其他两张都大且全部显示，而其他两张图片只显示部分即可，于是就想到了swiper这个不依赖于任何js库的插件，但是其官网上没有相应的效果，只有那种可以同时显示三张的demo。但是产品说一定要那种效果，其他的效果不好看，于是我就上网查资料，还真让我找到了解决的办法。 阅读全文

摘要： 最近自己正在学习angularJs，在学到`ng-click`时，由于想获取当前点击元素的自身，开始想到了用`$index`来获取当前元素的索引同样能实现我想要的效果，但是在有些特殊的情况下，使用`$index`却达不到实际的效果，所以就上网查了下资料，结果就发现了**[angularJs中怎么模拟jQuery中的this？](http://www.cnblogs.com/mini-fan/p/6555836.html)**这篇文章，这不正是我想要的嘛，赶紧按照文中的方法试了一下，果真可以（其实还是自己没有好好的看angularJs的API），很感谢写这篇文章的博主，以下是转载博主的原文： 今天想在Angular项目中使用jQuery的this功能，发现undefined。代码如下： 阅读全文

摘要： 之前一个朋友问我说他的一个弹出层在弹出后，上下滑动弹出层或遮罩层，结果遮罩层下边的整个页面（页面超出了一屏）也跟着滚动了，他说他不想要这样的效果，我说你把弹出层和遮罩层的`position:fixed`设置为`position:absolute`就可以了，结果他说不行。当时我也没有在意，平时我也基本没有在意过这样的问题，所以就让他再查查资料。今天，我在做页面时，弹出层控制了高度，里边的内容多的话就必须要可以滚动来上下查看，而当我滚动时，果真带动了遮罩层下边整个页面的滚动，这就不太好了，效果很差，所以就开始找解决办法。 阅读全文

摘要： 今天一个朋友问我js顺序播放音乐列表中的音乐的问题，我仔细一想，我也没有做过啊，无从下手啊，怎么办？然后我就上网查了一下audio标签，又百度了js如何顺序播放音乐，结果就找到了解决的办法。 audio标签有一个方法是onended，W3C对它的解释是“当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。”这么问题就迎刃而解了。 阅读全文