近年来,Hybrid App对于绝大部分开发者来说已经不是什么新的东西。各类Hybrid App开发框架也是如雨后春笋般破土而出。最早进入广大开发者视野的应该是PhoneGap,也叫Cordova,随即而来的还有AppCan、Titanium等等。但是使用框架一方面不方便使用者了解Hybrid的实现原理,另一方面,框架往往会给项目带来一些附加的问题,比如降低性能、代码冗余等等。最近,我本着亦学亦用的态度,也开始加入Hybrid App开发的行列,通过本文跟大家分享一下在无框架环境下,作为Web前端,我如何与移动端 ...
阅读全文 »

一个基于jQuery的气泡动画插件,在指定区域上方(左/右)定时间隔产生气泡,然后随机水平速度进行仿自由落体运动。到达区域底部之后做弹跳运动,速度逐渐衰减。直至停止运动。 在线演示 安装方法由于是基于jQuery的扩展插件,因此引入jQuery是必须的。此外,还需引入插件自身的实现脚本。 12<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script src="../js/jquery.bubble.min.js"></script> 在此之前,我们还需要引入样式依赖文件jquery.bubble.min.css,主要包含气泡自身基础样式。 1<link rel="stylesheet" href="../css/jquery.bubble.min.css"> 使用示例插件会在 ...
阅读全文 »

仿微信表情雨效果插件。在微信中发送“么么哒”、“想你了”、“恭喜发财”、“生日快乐”等关键字,屏幕上会下一小段时间的表情雨。本插件实现了下表情雨的效果,并且还进行了扩展,支持多表情的表情雨。实际效果请看: 在线演示 源码下载 安装方法由于是基于jQuery的扩展插件,因此引入jQuery是必须的。此外,还需引入插件自身的实现脚本。 12<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script src="../js/jquery.rain.min.js"></script> 使用示例插件会在指定的元素范围内运行,如果找不到指定v ...
阅读全文 »

做这个尝试,只为了解决一个问题:如何在网页中读取剪贴板中的图片数据,并在页面中展示或保存到图片服务器。场景可以简单描述为,通过任意屏幕截图工具(QQ、旺旺,PrintScreen键等),截图之后网页中的文本框内粘贴(Ctrl+V、右键等),并在页面中使用图片数据。文字描述比较抽象,我们用一个gif图片来形象的展示一下效果: ClipboardEvent(剪贴板事件) ClipboardEvent 接口描述了与修改剪切板相关的事件,这些事件包括 cut 、copy 和 paste 事件。 先解决一个问题:为什么要说ClipboardEvent? 首 ...
阅读全文 »

进入正题之前,我们先来看看何为Mustache.js。在Github上的说明如下: Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. We call it “logic-less” because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values. no if statements, else clauses, or for loops,这句话明确了Mustache模板的特性,在Mustache模板中不可能出现复杂的条件判断。当然,“不可能”并不等于“不能”,Mustache.js可以通过{{#list}}循环一个列表,也可以用{{#key}}、{{^key}}这样的标签进行简单的条件判断。 虽然,这已经能解决我们日常开发中遇到的大多数问题,但是当我们需要在& ...
阅读全文 »

最近,工作业务有点变化,碰巧遇到一个老生常谈的问题——如何去监听浏览器的“后退”事件。其实,情况是这样的,产品同学希望用户离开页面之前,能展现一个漂亮的弹出层给用户,可以通过这个浮层了解用户离开的原因、或者让用户给应用评分等。 我们知道,浏览器实现了onbeforeunload和onunload事件,onbeforeonload事件是在浏览器即将请求下一个页面(请求还未发出)的时候触发,它可以实现阻止onunload的触发。onunload事件则是浏览器已经将下一个页面请求回来,页面即将&#x ...
阅读全文 »

国庆黄金周已经悄然离去,在假期到来之前微信小应的出现着实引起了不小的反响。虽然目前微信小应用并没有对所有开发者开放,但也有很多开发工程师已经在本地进行了尝试,甚至实战。踩着国庆黄金周的尾巴,我也自己体验了一番——开发微信小应用:你问我答。 新建应用第一步,当然是要安装微信小应用开发软件(微信web开发者工具)。很多人可能感到很熟悉,因为这就是之前微信团队开放的基于微信APP进行移动网页远程调试的工具。最新版中& ...
阅读全文 »

前段时间和一群小伙伴讨论了一个名为《大话前端-从小书签应用说起》的话题。内容是前端开发中极小,乃至已经被一部分前端开发工程师遗忘掉的一部分——书签应用(Bookmarklet)。但是,我们需要明白,台湾虽小但终是中国的一部分,书签虽小,也是前端开发的一部分。技术不分大小,合理使用就能创造价值,用好了就能有所创新。 还是在2012年前后,那时刚步入社会的我对前端充满了好奇,正逢前端开发风生水起。国外各种好的前端开发技术开始进入ԣ ...
阅读全文 »

忙忙碌碌又半年,别人都在做年中总结,回顾上半年点点滴滴的辛酸历程,或辉煌战绩。而我好不容易在时间隧道中捕捉到片刻的闲暇,终于可以做一点自己的事情。最近,其实也是由于项目需要,用Node.js写了一些有助于前端开发的本地小工具,才逐渐意识到Node.js似乎离自己越来越远,于是又想找回与Node.js的那些甜蜜时光。然后,思来想去还是从一个简单的命令行工具开始吧。 为什么做这个尝试?为什么从一个命令行小工具开始?我也曾问自己这个问题。首&# ...
阅读全文 »

首先呢,我要感谢一下和我配合的设计师同学,给了我一份如此漂亮的时间线设计稿。拿到设计稿后,我们首先要做的是去分析整个作品的结构,及设计意图。当然这些工作我们可以提前完成,在设计师设计的时候进行充分沟通,而当我们动手去实现的时候就更为得心应手了。开始之前,我们还是先看看最终的交互效果: 第一步,分析控件结构,说多了反而容易引起误导,直接看图吧,直观明了: 接下来,我来说说我为什么要这么去划分。简单的说&#x ...
阅读全文 »