“JS相关”目录存档

zSlide-基于CSS3/HTML5演示文档jQuery插件

2012年01月3日,星期二


zSlide是我最近折腾的一个jQuery插件,可以让网页以类似于powerpoint展示的效果展示。这样可以让技术资源更快更便捷共享出去。不仅有基本的切换效果,还有动画交互。支持键盘操作和鼠标操作,提供实时的进度提示,同时提供强大的自定义交互功能。

本文就是专门讲解这个插件,有的放矢,截图,demo,源代码打包下载,代码示例一个不少。尽量面面俱到而又不啰嗦,总之,希望本文的内容能够对您的学习或工作有所帮助。

阅读全文…

CSS3无前缀脚本prefixfree.js及Animatable介绍

2011年11月15日,星期二

虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的。像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,oh,my GEE GEE,前缀少不了,于是每次应用都像是建大楼一样。比楼高是很傻逼的一件事情,所以如此霸气侧漏的CSS大楼反而让人伤不起,我们总希望跟这些前缀说“顾德白”。有此想法的前端er们想必大有人在,于是,一些牛逼且执着于web技术且乐于分享的仁兄就搞了个名叫prefixfree.js的东西……然后又弄了个Animatable的东西……

阅读全文…

关于一个JS功能实现的思维方式

2011年10月26日,星期三

现实生活的经验告诉我们,尽量不要走重复的路程,不要做重复的事情,尽量避免从头再来,因为这意味着你付出的辛劳(某种意义上)都白费了。
举简单的例子,我们要去美国,结果兴冲冲赶到机场,发现签证没带,我想谁都不愿理再重新赶回去拿签证。
再举个例子,我们玩网游,比如魔兽,辛辛苦苦打了几个月,好不容易升了几十级,结果号被人盗了,你要重头开始练级,估计是谁都会气得吐血三升而亡的。
上面两个例子可能与主题还不够贴切,再举两个例子吧:
不知大家走迷宫的游戏,如果我们走一条路发现不通,怎么半?是退出到之前一个岔路口重新走呢?还是从起点重新走呢?
美女茜茜认识了个男生,如果这个男生很有钱,茜茜会跟他结婚;如果这个男的现在还是很寒酸,则茜茜可以等两年这个男的有钱了再和他结婚。结果两年后,这个男的果然有钱了,你说茜茜是跟他直接结婚呢,还是要重新认识? ……

阅读全文…

jQuery与MooTools库的一些比对

2011年09月28日,星期三


我上大学那会儿从事的项目用的是jQuery,毕业后工作所从事的项目用的是MooTools。很幸运短期内有机会接触两款不同设计风格的优秀的JavaScript库。今天就我自己的一些认识比对下这两个JS框架,更多的是希望大家能够对MooTools这个JS框架有更多的认识。毕竟,大多数从事web前端的人对上手容易的jQuery更熟悉些。

阅读全文…

HTML5 localStorage本地存储实际应用举例

2011年09月22日,星期四

HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性、placeholder、以及email类型input文本框。上周新上线的会员中心,自己又应用了HTML5相关内容——HTML5 localStorage本地存储,这里简单分享下。

一如既往,本文提供demo页面,提供必要的截图和源代码展示,还有对比实例,希望能触动一下大家的小小神经。

阅读全文…

基于HTML5的可预览多图片Ajax上传

2011年09月15日,星期四

在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张。要一次上传多图,做法是借助于flash。或者使用隐藏的iframe框架页面模拟ajax上传,一次一张,连续多次。然而都有缺陷。HTML5是个好东东,其中之一就是支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,纯粹利用file控件实现,简单方便迅速,想不让人称赞都难啊!

本文就是详细地介绍基于HTML5的可预览多图片Ajax上传的一些内容。有丰富的截图示意和源代码展示,以及必要的API参数说明。希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSSOM视图模式(CSSOM View Module)相关整理

2011年09月9日,星期五


就在8月份,也就是上次gf大姨妈来的时候,W3C出炉了CSSOM视图模块草案。CSSOM视图模块(CSSOM View Module)定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。

本文的内容就是将CSSOM视图模块相关的一些属性,方法等一个一个整理出来,包括兼容性,使用等等。每个API基本上都提供demo页面测试,使用的源代码展示等等。内容较多,请耐心阅读。相信本文的内容会对您的学习有所帮助的。

阅读全文…

浏览器地理位置(Geolocation)API 简介

2011年06月30日,星期四

Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法。且目前看来浏览器的支持情况还算不错(因为新版本的IE支持了该API),这使得在不久之后就可以使用这一浏览器内置的API了。该API接口提供的用户地理位置信息还算蛮详细的,经纬度啊,海拔啊,精确度,移动速度啊都是可以获取的。该API是相当有实用价值的,本文就简单介绍下这个东东,希望能对您的学习有所帮助。

阅读全文…

翻编-JavaScript有关的10个怪癖和秘密

2011年06月21日,星期二


本身属于翻译文章,内容为JavaScript的一些奇怪之处,但是又不是传统意义上的逐字逐句地翻译,大体意思到了,至于细节以及文字表述还是有些本土化的特征,并在有些地方外加了点自己的小看法。同时为了便于大家的理解与学习,我还对原文内容进行了扩充,即基本上针对每一个实例都制作了相应的demo页面并附上了相关的截图。希望能对您的学习有所帮助。

阅读全文…

jQuery smartMenu右键自定义上下文菜单插件

2011年05月31日,星期二


我们都知道,默认状态下,我们右键web页面,会出现一个上下文菜单,但是,浏览器默认的右键选项有时候并不是我们所需要的,我们希望浏览器的右键选项菜单更智能,可以灵活自定义。就像web QQ一样,显然这种东西貌似还是蛮强大与实用的,于是我就抽空写了个可以右键自定义上下文菜单的jQuery插件 – smartMenu,直接一行代码绑定,就可以让我们轻松实现页面元素的自定义上下文功能。至于具体如何实用与绑定,就是本文的的主要内容。

一如既往,详细的插件介绍,丰富的截图展示,必要的源代码讲解,以及提供源文件打包下载。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…