邵珠庆の日记 生命只有一次,你可以用它来做很多伟大的事情–Make the world a little better and easier


81月/13

12款超棒jQuery插件

发布在 邵珠庆

 

今天我们将分享12款精心挑选最新jQuery插件,包含了演讲,排序及其社交内容等等,很多插件在gbin1以前的jQuery文章中我们都介绍过,希望大家喜欢!

1. impress.js

impress.js是一个基于css3过渡和变形的演讲稿插件,如果你不是很喜欢使用PPT的话,它是个不错的选择。

impress.js

reveal.js

reveal.js是另外一个不错的演讲稿制作js,帮助你快速的构建HTML5的演讲稿

impress.js

Floater

这个插件可以帮助你构建可以重新排序的单元块,每一个都可独立的包含html标签

Floater

PFold

一个实验性质的jQuery插件,帮助你使用折纸的方式来打开元素。

PFold

Socialist

一个帮助你整合不同社交资源的jQuery插件,可以整合 Facebook, Twitter, LinkedIn, YouTube, Pinterest, Flickr, Tumblr, Craiglist RSS等等,前面我们开发的RSS杂志,就使用了这个插件。相关阅读:使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

 

Socialist

Fresco

一个超漂亮的响应式的lightbox。可以用来制作超棒的悬浮层效果,支持不同的屏幕尺寸和设备

Fresco

Allofthelights.js

一个可以帮助你关闭光线来突出视频内容的jQuery插件。绝对值得你看看演示。

Allofthelights.js

dynamoCanvas

这是一个用来帮助你更简单的使用HTML5的画布功能的jQuery插件

dynamoCanvas

8. contextMenu

这个插件可以帮助你右键点击页面来生成一个菜单,能够让你的web应用更将是本地应用

contextMenu

uLED

jQuery插件帮助你生成漂亮的倒计时效果

uLED

Adaptor, a jQuery 3D content slider

这个超棒的轻量级内容幻灯在以前文章中介绍过,可以创建漂亮的3D效果。相关阅读:使用3D过渡效果的图片幻灯:Adaptor

Adaptor

3D CSS3 Book Generator

一个帮助你生成图书效果的轻量级插件

3D CSS3 Book Generator

希望大家喜欢这些jQuery插件,如果你有任何问题和建议,请在gbin1博客上留言,谢谢!

81月/13

如何实现网页输入框可进行语音输入

发布在 邵珠庆

 

语音输入也有了好一阵子了,但似乎还没看到相关的关于html网页上如何实现语音输入的文章,今天无聊查了点资料,发现原来实现是这么简单,可能是因为大家都着觉得太简单了,所以就没有人讨论了吧。

其实要实现网页中的语音输入只需一个代码便可实现:x-webkit-speech

大家看到这个代码,会联想到了什么?对,这代码说明语音输入只支持webkit内核浏览器。

那么这个代码具体要放在网页哪里的呢?

<input type="text" class="text"  name="测试"  x-webkit-speech />

放在文本输入框内就行了,就这么简单,看:

当然这个代码还会附带一些参数,比如设置语音限制语言种类;

<input type="text"  name="测试"  x-webkit-speech lang="zh-CN"/>

还有设置语音输入语法的参数,这个就比较适用于搜索方面的了。加上这参数后,系统就会自动去掉“的”、“啦”这类无意义的字;

<input type="text"  name="测试"  x-webkit-speech x-webkit-grammar="bUIltin:search"/>

另外还有onwebkitspeechchange参数,顾名思义,就是语音发生变化时触发的事件,一般可以作为提交;

<input type="text" name="测试" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/>

这样说完以后就自动提交了,非常方便。

在测试过程中,发现中文英语的识别率还蛮高的。但在设计方面存在着一个小问题,就是网页页面是iframe形式时,点击麦克风后,“请开始说话”这浮动层就不跟随input输入框了;

这个语音输入功能相当有趣,可以使你的网页更有个性化,但实用性就不敢恭维了,主要是因为适用范围太小了,所以只能希望HTML5尽快统一并应用起来。 :smile: