一切福田,不離方寸,從心而覓,感無不通。

Category Archives: JavaScript

50 个 jQuery 插件可将你的网站带到另外一个高度

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展。在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力。 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间。 通过浏览文档,掌握JQuery的语法是很容易的。它可以支持选择DOM元素,创建动画,处理事件,开发Ajax应用,甚至还为开发者提供了基于JavaScript类库之上创建插件的能力。
jQuery架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。 在这篇文章中,我们已经积累了一些供你挑选的最佳JQuery插件,这些插件提供了各种的功能和特性能够让你的网页呈现许多可想象到的效果。我们希望你能够在下面的列表中找到你正在寻找的插件。 在下面的评论区域让我们知道哪些插件你以前使用过或者你正在考虑在将来的项目或网站中使用哪些插件。

1. FlickerPlate

Flickerplate-Plugin Flickerplate是一个可以让你弹出内容的易用jQuery插件。它也依赖Modernizr来进行触碰检测和在触碰事件使用jQuery.Finger库。Flickerplate通过很多种方式配置。你可以通过Javascript调用来设置选项。或者你可以通过在实际的元素上通过data属性设置选项。

2. Tagging JS

tagging-js TaggingJS 是一个用来创建高度可定制的前端标签系统的jQuery插件。它小于3 kb并且支持世界上大部分浏览器。它基于MIT 许可。

3. Scroll Magic

scroll-magic ScrollMagic 是一个神奇滚动交互的jQuery插件,ScrollMagic 允许你像进度条一样使用滚动条。如果你想在指定滚动位置启动一个动画,保持和滚动条运动同步动画,并固定一个元素到指定滚动位置(黏性元素),这就是为你而设的插件。

32. jPages : JavaScript Powered Pagination

jpages jPages 是一个客户端分页脚本(一个jQuery插件),具有像键盘+滚动导航,自动换页,延迟展示和一个可自定义的导航面板的特性。分页元素的任意页数能够插入到相同的页面,并且能够轻易定位。

AndyLam

AndyLam 翻译于 7天前

0人顶

 翻译的不错哦!

5. PNotify

p-notify PNotify 是一个由SciActive 开发的 JavaScript的通知插件,曾用名Pines Notify。它的设计理念是提供一个极度灵活而又非常容易实现和使用。它可以提供非阻塞的通知。允许用户在不关闭它的情况下点击通知后面的元素。PNotify 使用了Bootstrap 和 jQuery UI来定义样式,这意味着可以非常容易的对它进行自定义主题样式。

6. Wholly

wholly Wholly 是一个jQuery的插件用来触发表格列上的mouseenter 和 mouseleave事件。Wholly 用来高亮整个表格列,并且支持表格的colspan和rowspan属性。如果你想要支持colspan和rowspan属性,那么首先你需要构建表格单元格的索引(cell index)。之后,你需要追踪表格所有单元格的事件,找出你感兴趣的,并计算出它们在矩阵中的offset以及共享同一个垂直索引(vertical index)的列。Wholly在设定特定样式方面是没有任何限制的。

7. MixitUp

mixitup MixItUp 是一个jQuery插件,提供动画过滤和排序。在管理容易归类或者像文件夹一样的有序内容和博客时非常不错,但是也能作为一个吸引人的应用UI和数据可视化的一个强大的工具起作用。

8. Velocity.js

Velocityjs Velocity是一个jQuery插件,它重新实现了$.animate() 同时包括改善动画流程的新特性 (使得 Velocity也比CSS动画库更快) ,用来产生性能显著的动画。

9. rowGrid

rowgridjs rowGrid.js是一个小的,轻量级(gzip后大约700 比特)的 jQuery插件,用来在径直的行里放置图片 (或者其他内容项)。网格类似Google图片搜索,flickr,shutterstock 和Google+ 图片的网格。 rowGrid.js 是响应式的,它允许用户无限滑动。所有的内容项拥有相同的高度,但宽度是可变的。

10. Croppic

croppic Croppic 是一个图片裁切jquery插件。它能提供满足你的需求外更多的功能。 简单上传一张图片,然后你能够按照你喜欢的放大缩小的实际情况来裁剪图片。它需在IE 10+, chrome,和firefox才能正常工作。它使用FormData所以现在不支持IE9和之前的版本。

11. ImageLightbox.js

lightbox ImageLightbox.js是一个难以置信简单,响应式,触碰友好灯箱效果的脚本。它是由可扩展的,可配置的,极简化的(瘦身后只有4kb),并且使用CSS变形和转换来移动图片。

12. jQuery Tip Cards

tip-cards Tip Cards 插件允许你创建你在Google Tips页面看到的使用类似卡片交互的cards布局。有几种新的动画选项,所以你可以按你喜欢的进行人性化定制。你可以在模态窗口打开或者关闭的时候,使用回调方法来进行操作。已在像Chrome,Firefox和Safari的桌面现代浏览器测试过。

13. Floatlable.js

float-labels 在Brad Frost写一篇关于浮动标签模式的博客文章后,浮动标签模式取得了成功。这想法是基于Matt D Smith 的 Dribbble Shot。这种模式很容易解释。在用户使用一个输入字段交互时,placeholder的值向上移,并在类型文本上面显示。

14. Nanogallery

nanoGallery nanoGallery对jQuery来说很容易实现图片画册插件。它具有很多特性:支持触碰,响应式,快速和支持云储存。 相册多级导航,灯箱效果,许多缩略图的hover效果,滑动展示,全屏,分页,图片延迟加载,主题,兼容bootstrap,可定制,可从Flickr/Picasa/Google+拉取照片等等。

15. jQuery Panorma Viewer

jQuery Panorama Viewer jQuery Panoram Viewer 帮助你在网站内嵌Panorama图片。使用这个插件,你能够在你的网站显示你的Panorama图片。为了做到这些,首先你不得不在你的文档中包含最新的JQuery库和jquery.panorama_viewer.js以及panorama_viewer.css,然后在HTML上给你的图片增加"panorama"类。现代浏览器例如Chrome,Firefox和Safari的桌面和移动版本都已经测试通过。

16. SVG Magic

svgmagic SVGMagic是一个跨浏览器的兼容JQuery插件,它搜索你网站上的SVG图片,如果浏览器不支持SVG,自动的创建PNG版本。它是简单的,单一目的的插件,不需要配置。

17. BttrLazyLoading

BttrLazyLoading BttrLazyLoading是个允许你的网页应用在窗口里面只加载图片的jQuery插件。它也允许你在4个不同屏幕尺寸里拥有不同版本的图片。BttrLazyLoading允许你的网页应用延迟加载图片,直到被滚动到图片。这样的方式下,页面加载时间大幅度减少。

18. Remodal

Remodal Remodal 是一个扁平化,响应式,轻量级,高速,易定制的,声明性状态注释和哈希追踪的模态窗口插件。所有的现代浏览器都支持。你可以轻易地定义模态背景容器(就像一次失焦效果)。

19. Slinky.js

slinkyjs Slinky.js 是一个用在使用堆叠头部创建滑动导航列表的jQuery插件 。它有无数的特性:就像通过禁用光标事件来平滑滑动,压缩后大约1KB的轻量级,在窗口重调大小和DOM改变上刷新,还有和你喜欢的最新版本的浏览器兼容。

20. Adaptive Backgrounds

adaptive-backgrounds Adaptive Backgrounds 是一个jQuery插件,用在从图片抽取主要颜色和应用到父元素。这个插件利用了画布元素和ImageData对象,归根于其跨站安全限制,如果某个脚本试图从非当前域名主机抽取图片的颜色将会失败,除非图片允许跨源资源共享。

21. Bigfoot

Bigfoot网页的脚注是烦人的。你点了一个小数字,跳转到页面底部附近,找到你寻找的脚注,然后点击一个链接回到页面原来的地方。Bigfoot看起来让整个处理流程不再痛苦。它自动检测脚注链接和内容,将链接转化成一个容易点击的按钮,当读者点击脚注按钮的时候弹出浮窗(译注:官方演示的版本是直接跳转)。

22. Dynatable

dynatable Dynatable是一个使用jQuery,HTML5和JSON的,更有趣的,语义化的,交互表格插件。 并且不仅是用在表格上。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松地浏览和操作大数据集。

23. jQuery Label Better

jquery-label-better jQuery Label Better 就像个优雅动画的老大一样帮助你在表单输入上不占空间地定标签。这个插件最独特的是你需要做的所有工作仅是添加一个占位符的文本,我们将在当用户需要的时候显示标签。

24. Stickup

stickup stickUp 是一个jQuery 插件。你可以在任意使用jQuery的网页上执行。你可以简单地在任意页面创建任意你想用户在任何时候都可以看见的元素,只要用户滑超它,就会粘到浏览器窗口的顶部。

25. Free Wall

Freewall Freewall是一个跨浏览器响应式的jQuery插件,它使用很棒的CSS3动画效果和回调事件,能帮你创建很多类型网格布局:可伸缩布局,图片布局,嵌套网格,流式网格, metro风格网格,类品趣志网格。Freewall是个创建桌面,移动和平板的动态网格布局的一体化解决方案。

26. jQuery Interactive 3D

jQuery Interactive 3D jQuery Interactive 3D是一个允许我们使用多图完成一个类似功能的插件。 使用起来简单,使用简单的函数和指定一组名字的图片。 还有,还拥有定制化的可选项,比如光标图标,速度,支持触屏,自动播放等等。

27. Succinct

succinct Succinct是一个用作截断多行文本的jQuery小插件。它缩短你的文本到指定的尺寸,并在后面添加省略号。你可以用选择器指定要截断的元素,然后设置你想看到的数量的尺寸参数。

28. SlideMe

slideme SlideMe!是一个响应式样的,CSS3兼容的jQuery滑动条插件,它同时支持受限的和全屏的视图。它能用在竖屏和横屏, 使用了CSS3转换和支持分页。提供控制滑动的方法(prev, next等),还有它们及更多方法对应的回调方法。

29. Glide.js

glide-jsGlide.js是一个轻量级(压缩后4.5kb)的jQuery插件,用于创建滑块。其具有完全可定制的OOCSS标记及CSS3转换,而且可以回调JavaScript。该滑块是响应式的;其能适应所有的设备并有对触摸的支持。你可以通过键盘、滑动事件、弹窗或箭头菜单来控制元素。Glide.js还有支持所有的事件(播放,暂停,下一步,上一步,等)公共的API。

30. PhotoJShop

photojshop PhotoJShop是一个允许我们对图像应用简单效果及过滤器的jQuery插件。这些过滤器包括模糊、底片、浮雕、减轻、变黑、黑白、锐化以及更多。插件可以在canvas和图像上工作,并且过滤器很容易使用。

31. One Page Scroll

one page scroll One Page Scroll是一个jQuery插件,其简化了创建类似网站的难度。它只需要很少的设置,只需要创建HTML结构,调用函数你就已经就绪了。可选的,作为附加功能,其速度和循环行为也可以设置。而且它支持每个页面的SEO友好型URL。

32. FerroSlider

ferroslider FerroSlider是一个用于创建整页面(或者是内容/图像滑块)等几乎所有类型滑块的jQuery插件。内容可以以灵活的方式放置,水平或垂直,插件都能够使得浏览起来很容易。为提高性能它使用了CSS3变换,能够与响应式布局良好配合且能应用在移动平台上。

33. Scrolld.js

scrolld Scrolld.js是一个独特的jQuery开源插件。Scrolld.js使用实时更新的数据为像素级布局和导航提供了一个高度精确的滚动。使用Scrolld.js ,你总能精确的滚动到指定目标并且总能提供最好的用户体验。

34. AnimateScroll

animatescroll AnimateScroll是一个简单的jQuery插件,可以用来添加松弛的滚动条效果。你可以自定义滚动条样式(30多个滚动效果)以及滚动速度。“padding”属性可以控制滚动条的结束位置。该插件不仅限于整个的body页面,而且可以用于指定的元素。

35. MasonJS

masonjs MasonJS jQuery 插件是用来解决大部分网格系统目前都会遇到的问题,缝隙。当使用Masonry, Isotope 或任何其他网格插件时,你的网格有时总会出现缝隙或参差不齐的边。Mason就是用来填充他们的。

36. JInvertScroll

jInvertScroll jInvertScroll 是一个控制默认滚动行为和强制纵向滚动的jQuery插件。该插件足够轻量级(小于1kb)并且几乎不需设置便可使用。为包装元素添加指定类并且调用JS函数就可以了。另外它可以用onScroll回调(我们可以决定调整任一元素的地方)轻易创建视察效果。

37. Flowtype.js

flowtypejs FlowType.JS是一个可以自动调整字体大小(font-size)和行号(line-height)的jQuery插件(根据包装元素的宽度),使得我们的内容可以像我们希望的那样显示。该插件提供了设定最小/最大字体尺寸和宽度的属性。

38. nProgress

nprogress NProgress.js是一个纳米进度条。以现实的细腻的动画告诉用户正在发生的事情。它是一个灵感源于Google,YouTube,和Medium的轻量级的进度条,完美适用于Turbolinks, Pjax,以及其他 Ajax级别的应用。

39. Tidy Time.js

tidytime 想使用对人友好的语言,来展示一个基于时间的更新?TidyTime.js就是个做这事的插件,它转化标准的时间格式到个人声明的时间格式。

40. Fullpage.js

fullpagejs FullPage.js是一个简单易用的插件,用来创建全屏滑动网页(也被认为是单页面网站)。它允许你创建全屏滑动网站的同时,也添加一些横向打印风格的轮播器到站点的各个部分。它被设计成适用于不同屏幕尺寸,以及平板和移动设备。

41. jQuery Flat Shadow

jquery-flat-shadow jQuery Flat Shadow是一个可以为你想的任何东西添加衰退阴影的插件。它能够定义阴影颜色,角度和启用\禁用阴影衰退。

42. Owl Carousel

Owl Carousel Owl Carousel 是一个允许你快速创建响应式旋转滑动条的jQuery插件。插件是触碰友好并且拥有任意表示的任意HTML内容的特色。它有可选项用来设置分页/滑动速度,启用/禁用自动播放,显示插入导航和其它。

43. S Gallery

s-galalry S Gallery是另外一个在响应式方格展示图片的jQuery图片画册插件。其灵感来源于Sony的产品页面画册 (使用Flash制作) ,并完整模仿了它。一当一个图片项被点击和获得焦点,就可以使用向前-向后按钮或者通过键盘浏览其他的图片项。

44. Pop Easy

pop-easy PopEasy是一个轻量级jQuery插件,对于一个开发人员简单创建模态窗口是必须的。通过在你的页面应用一个遮罩并打开一个可定制的弹出模态窗口,把焦点放在重要的元素上。

45. Scroll Up

scroll-up-jquery ScrollUp是一个轻量级的jQuery插件,用来创建自定义的“滑动到顶部”功能,可以简单地用到任何网站。通过指定一个有效的CSS颜色到activeOverlay设置,创建一个可视线来帮助确定距离顶部的理想滑动距离。

46. Mobiscroll

mobile-scroll Mobiscroll是一个用在触屏设备(Android手机,iPhone,iPad,Galaxy Tab)上的轮滑跑马灯,或者日期时间拾取器的jQuery插件。控制器能轻松地进行定制以支持任意自定义值,并且甚至直接作为原生的选择控制器(下拉列表)的一种替代方案使用。控制器是可以主题化的。在CSS里你能轻易改变外观。它也支持预定义,好看的颜色模式。已在iOS4,Android 2.2,Android 2.3,Chrome,Safari,Firefox,IE9上测试过。

47. Cycle2

Cycle2 Cycle,是过去的一个非常受欢迎的jQuery幻灯片播放插件,现在有了一个增强的版本:Cycle2.该插件对于那些期待创建完全个性化的幻灯片展示效果的人是非常完美的,因为它没有声明任何标记或样式。并且,它的功能非常灵活。Cycle2支持反应灵敏的布局,几乎包含应对所有的选项(全局或者单张幻灯片),通过使用全部特性的API,还可以非常轻松的进行扩展。

48.Tooltipster

Tooltipster Tooltipster 是一个 jQuery 插件,用于快速创建 HTML5 验证和灵活的工具提示。该插件属于“麻雀虽小,五脏俱全”的类型,压缩后仅4.8kb,但是工作起来非常快,并且可以轻松的定制。它的外观可以用 CSS (主题支持) 和箭头进行修改,跟随鼠标的位置改变,延迟等外观特效都可以被定义。

49.FitText

FitText FitText是一个非常简单但是却功能强大的jQuery插件,可用来确保文本能够适应已定义好的元素。它根据元素环绕它的宽度自动更新字体大小,并保证布局不会太零碎(因为字体大小),即使页面是在桌面浏览器或者移动端中显示。还有,该插件提供了一些选项微调,包括设置"水平缩放"的能力和尺寸的最小到最大。

50. Unslider

unslider Unslider是且仅仅是用于图片展示的jQuery滑块插件。没有华丽的特效和多余的装饰,该插件小于3kb。它是流畅、灵活,并且令人难以置信的小。Unslider已经在目前所有的浏览器最新版本中进行了测试,再不是那么新的浏览器中,只能看到它“落寞的辉煌”。如果你需要,你可以添加键盘方向键支持。不是所有的滑块插件生来平等,Unslider深知这一点。(译者:作者在卖萌么?)

from:http://www.oschina.net/translate/jquery-plugins-to-take-your-website-to-another-level

百度音乐播放内核 MuPlayer

MuPlayer 是一款跨平台、轻量级的音频播放解决方案,是百度@音乐前端团队开发维护的浏览端音频播放内核,它基于HTML5 Audio及Flash音频技术,已在百度音乐多个线上产品线中应用,具备很强的灵活性和稳定性。 MuPlayer主要特性 多端通用(覆盖PC & WebApp),提供统一的API调用方式 Audio与Flash内核的平滑切换(支持IE 6在内的所有常见浏览器) 提供了完善的文档、灵活简洁的API设计 针对WebApp端的优化打包,节省加载资源 已经在百度多条产品线上实际应用,稳定可靠 示例演示:Demo,提供了MuPlayer的基本调用Demo,可供参考及测试; API文档:MuPlayer API 关注我们(@音乐前端),了解更多开源项目^^ from:http://www.oschina.net/p/muplayer

龙生   28 May 2014
View Details

jQuery验证控件jquery.validate.js使用说明+中文API

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html   一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script>   二、默认校验规则 (1)required:true                必输字段 (2)remote:"check.php"      使用ajax方法调用check.php验证输入值 (3)email:true                    必须输入正确格式的电子邮件 (4)url:true                        必须输入正确格式的网址 (5)date:true                      必须输入正确格式的日期 日期校验ie6出错,慎用 (6)dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 (7)number:true                 必须输入合法的数字(负数,小数) (8)digits:true                    必须输入整数 (9)creditcard:                   必须输入合法的信用卡号 (10)equalTo:"#field"          输入值必须和#field相同 (11)accept:                       输入拥有合法后缀名的字符串(上传文件的后缀) (12)maxlength:5               输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10              输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10]      输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (15)range:[5,10]               输入值必须介于 5 和 10 之间 (16)max:5                        输入值不能大于5 (17)min:10                       输入值不能小于10   三、默认的提示 messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please […]

龙生   28 May 2014
View Details

15 款优化表单的 jQuery 插件

网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理。这些表单在我们浏览的网页中随处可见,也容易被我们忽略。 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想提的建议或者问题,但是开发者往往只关注网站的设计和用户交互的内容,并不会注意到用户进 行交互的方式——表单。 以下整理的这个列表就是为 Web 开发者准备的,包括了 15 款优化表单的 jQuery 插件。希望大家能从中找到适合自己的 jQuery 插件,优化网页表单,更好的与用户进行交互。看完要记得和大家分享你的感想哦:) 一个精选的 AJAX Contact 表单 Demo || Tutorial 这个插件提供一个简单可靠的反馈表单。 创建一个霓虹灯闪烁效果的表单 Demo || Tutorial 不需要使用 Flash 就可以创建一个霓虹灯效果的表单。 高级 JavaScript 表单分类器 – TinyTable V3 Demo || Tutorial 第三代 TinyTable 表单分类脚本添加了搜索,列平均值和合计,记录号,查看所有函数视图和重置功能。大小接近 6 KB,非常轻量级。 完整经济业务表单 Demo || Tutorial Recurly.js 是完整经济业务表单非常安全,兼容 PCI,支持完全自定义的 CSS。 使用纯 CSS 创建表单,使用 jQuery 优化 Demo || Tutorial 在这个教程中,我们使用纯 CSS 来创建一个表单,使用 jQuery 插件来给表单元素加上皮肤,比如文本框,下拉列表,选项框。 Jq Transform Plug in Demo || Tutorial 这个插件是个 jQuery 样式插件,允许为表单元素加上皮肤。 PrettyCheckboxes Demo || Tutorial 这个脚本提供给想要在各种浏览器中保持一致外观的单选按钮的用户,使用这个脚本就可以保证常规输入的可用性。 使用 JavaScript 创建一个进度条 Demo || Tutorial 使用 jQuery 构建进度条到各种 UI 部件库和交互帮手,用户可以查看表单的完成程度。 jQuery 信用卡验证插件: Smart Validate Demo || Tutorial Smart Validate 是 jQuery 信用卡验证插件,使得信用卡验证变成一个简单的任务。它能保证用户输入有效的信用卡号。 Autotab: jQuery 自动 Tab 和过滤插件 Demo || Tutorial […]

龙生   26 May 2014
View Details

16 款最流行的JavaScript 框架

1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架,它简化了HTML 文档遍历、事件处理、动画和Ajax交互。jQuery插件非常之多。 2. Dojo Javascript框架 Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。 3. Sencha Ext JS4 Javascript框架 Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。是绘画、图表引擎,使用DOM-accessible JavaScript图表和矢量图。 4. Prototype javascript框架 Prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端, 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。 5. Uize Javascript框架 UIZE免费使用、支持移动设备、可CSS更换皮肤。Java (Apache TomCat), C# (IIS / ASP.NET), Visual Basic (IIS / ASP), C/C++, Perl (Perl / Apache), PHP, Ruby (Ruby on Rails), Python, 等等,无论服务器端何种语言,均可使用。具有大量的内置小工具,类似jQuery插件。 6. Qooxdoo Javascript 框架 qooxdoo 是一个用于开发Ajax应用程序的GUI框架,使用它可以开发出类似于Window桌面风格的Web应用程序。使用Qooxdoo并不需要你具备HTML, CSS 和 DOM 的知识。 7. Zepo Javascript 框架 Zepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过不错的API处理绝大多数的基本工作。 8. DHTMLX Touch Javascript 框架 它是针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5,创建移动web应用。它不只是一组UI 小工具,而是一个完整的框架,可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器,用DHTMLX Touch创建的应用,可以在iPad、iPhone、Android智能手机等上面运行流畅。 9. YUI library Javascript 框架 Yahoo! UI Library […]

龙生   20 May 2014
View Details

Js判断键盘按键

window.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : window.event if (evt.keyCode) {    if(evt.keyCode == 116){      //do something    } } } keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 33 = Prior keycode 34 = Next keycode 35 = End keycode […]

龙生   20 May 2014
View Details

js实现判断大写锁定是否开启

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>检测大写锁定键</title> <style type="text/css"> <!-- *{margin:0;padding:0;} body{padding:2em;background:#242424;color:#ccc;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} p{margin:5em;} span{margin:0 0.5em;font-size:85.7%;} --> </style> </head> <body> <h1>检测大写锁定键&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1> <form action="#" method="post"> <p><label for="password">密码:</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下,请注意大小写</span></p> </form> <script type="text/javascript"> //<![CDATA[ function  detectCapsLock(event){ var e = event||window.event; var o = e.target||e.srcElement; var oTip = o.nextSibling; var keyCode  =  e.keyCode||e.which; // 按键的keyCode      var isShift  =  e.shiftKey ||(keyCode  ==   16 ) || false ; // shift键是否按住      if ( ((keyCode >=   65   &&  keyCode  <=   90 )  &&   !isShift) // Caps Lock 打开,且没有按住shift键       || ((keyCode >=   97   &&  keyCode  <=   122 )  &&  isShift)// Caps Lock 打开,且按住shift键      ){oTip.style.display = ";} else{oTip.style.display  =  'none';} } document.getElementById('password').onkeypress = detectCapsLock; //]]> </script> </body> </html>   from:http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html

龙生   20 May 2014
View Details

11个超炫的视差滚动网站欣赏(附神器推荐)

目前这种视差滚动效果被越来越多的国内外网站所应用,成为网页设计的热点趋势。 通过一个很长的网页页面,其中利用一些令人惊叹的插图和图形,并使用视差滚动(Parallax Scrolling)效果,让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。完美的展示了一个复杂的过程,让你犹如置身其中。厌倦了千篇一律,呆板网页设计的你不放一试。 视差滚动效果与少即是多的理念相互交融,能带来清新炫目的感受,例如这组网站。 你也可以试试: 网页特效:滚动视差设计指南 利用ADOBE神器十分钟零代码实现HTML5视差滚动特效 Broken Twill theQ camera Srgint Sojourn Network Fall in Tennessee Made by Block Kill your Darlings WAAAC Spotify Serve Seattle Codetex 原文地址:webdesignledger 转摘请注明优设网译文出处,谢谢各位小编。 from:http://www.uisdc.com/inspiring-examples-of-parallax-scrolling-sites

龙生   19 May 2014
View Details

网站运用新趋势!神奇的鼠标滚轴动画(视差滚动)

动画在每一年都是最具影响力和占据主导地位的。Web开发者通过不同的实验来实现动画,从最简单的基础效果到富有开创性的展示结果。毫无疑问,这种雪崩式的动画效果已经被认为是web技术史上最先进的技术。已经被永不满足现状的Web开发者们发展到了一个全新的水平。这些动画缓慢却很清晰,让网页设计师在页面上把交互和视觉都展现结合的淋漓尽致。 如果你想学今天的这些案例,推荐回顾《让网页舞动起来!25个免费的视差滚动插件》和《网页特效:滚动视差设计指南》这两篇文章:) 小伙伴们!最新的最火爆的最给力的网页设计趋势来了!快来看看这个神奇的视差滚动设计趋势! 小提醒:有些网站效果不能再赞,谷歌、火狐才能打开唷。 新鲜的网站趋势类型好文: 《网页设计新招式:火力全开!引爆网页中的视频应用》 《2014网页菜单新趋势!21例时尚创新的侧边栏菜单网页设计》 Kaipoche 该网站致力于今年的风筝节。通过一个简单的滚动激活动画技术,它有一个真正充满活力和引人瞩目的设计。 Bizbrain 是一个先进的长页面网站。它通过精彩的彩色图熟练地演示了各种数据。各个版块都有各自相应的信息。 Drugs and Alcohol on Campus 这也是一个交互式图表,能够在不知不觉中给你最紧迫的问题提供答案。所有画面都是通过鼠标来激活动画的,使这些问题看起来不那么“干巴巴”的。 Bright Media 该团队利用视觉引导串起所有元素,使用正确的顺序引导用户,每个部分都有装饰的动画元素,你的任务就是顺着线条走就OK了。 Adobe Muse CC 这是一个创新的、干净而复杂的网站,利用艺术方法引导用户来关注自身新产品。主要包括简洁的白色页面、纸张变形模式和滚动动画来实现效果。 Fluger 网站的开发人员在页面上放置了一架小飞机,用户通过滚动鼠标滚轮可以看到小飞机在页面上飞行,实现浏览整个网站的目的。网站是用图片和手绘稿糅合起来的,加上飞机的引导,看起来酷毙了!不过加载时需要等一定的时间。 Fillet 这是一个流行的平面风格网站,拥有很棒的字体。当你向下滚动鼠标时,每个色块都会顺利转化为一串漂亮的字符。整个过程显得很愉快。 NGUMA 这是一个富有魅力的互动机构网站。该网站允许你直接参与它的互动。也是基于滚动动画的设计趋势。 Happy New Year 2014 滚动激活动画模式非常适合于庆祝节日的网站设计。特别是圣诞节。这个网站里面通过一个完整的动画建立起一个温馨的节日气氛,真是让人感到很别致。 Merry Christmallax 和上面的例子一样,这个创意网站的目的就是给用户们一个温暖而衷心的节日祝福。故事开始于一张干净的纸张,最后演变成一个充满活力的插图场景,整个故事就是动过滚动激活动画技术实现的。 Pixelgyar 这是另一个奇妙的和迷人的圣诞故事。圣诞老人的旅程完全取决于你的行动,所以旋转鼠标滚轮,让圣诞老人到达他的目的地吧! Make Your Money Matters 这是一个宣传网站,生动地展示了加入信用联盟的好处。在整个动画过程中你将成为一个积极参与者。这项技术允许我们持有一个既定主题来实现网站设计,做到和用户之间的良好互动。 The Future of Mobile Phones 正如网站标题所言,该网站就是预测未来的手机的。网站的交互式信息里面充满了各种动画图形,都是定期统计的数据展示。 Camplight 这是一个整洁、干净而时尚的在线展示网站。提供了一个较为新颖的展示方式让用户来熟悉公司。 1McHappy Day 这个网站通过橡皮泥一样的图形设计带给用户返老还童式的体验,心灵上很容易就欢快起来。(我觉得要是来点卡哇伊的背景音乐一定会更给力的!) CEZ 提供了另一个惊人的互动之旅,该技术功不可没啊。 What’s behind the number 网站目的是广泛宣传关于防晒霜的防晒指数及其优势。当你向下滚动时,你会享受到一个整体活泼的故事,试图告诉你使用该产品后,在阳光下你的皮肤依然很安全。 InfoGuest Infographic 如其名字一样,它有大量的信息填充内容,通过图表和动画的有效结合展示出来。 Bolia 和上面的例子稍有不同,该创意团队应用基于照片的滚动激活动画来展示椅子的所有面。 Bam 该公司试图利用长页面布局和各种图纸来实现信息填充。为了避免各部分信息过于统一单调,研究小组决定采用滚动激活动画给网站带来生气。 Areal Plankstadt 这是一个宁静的网站,拥有美丽的氛围。为什么?——蓝白两色,青春一生……通过滚动激活动画技术实现页面之间的切换,非常平静安宁。 结语 这里所列出的这些在线信息展示网站、视觉故事网站、创意机构网站以及投资组合网站都实实在在地利用了滚动激活动画这一崭新的设计技法,构造了一个特定的用户体验模式,希望小伙伴们能够有动力去学习这一项新技术。 我最喜欢Adobe Muse CC和Fluger了,看起来真的是十分赞的! 原文地址:designmodo 优设网翻译:@sheisjane 本文由优设网uisdc.com原创翻译,转摘请注明优设网译文出处,谢谢各位小编。

龙生   19 May 2014
View Details

超赞!20个创意十足的网页视差滚动效果欣赏

最近大家伙越来越关注视差滚动的网页了,很多同学都在四处寻找相关的案例来赏析学习。此前我们也分享过相关的制作教程及文章。 那么今天我们继续推荐20个创意十足的视差滚动酷站,希望能为你的案例带来灵感:)强烈推荐收藏。 好文推荐: 《无法抗拒的诱惑,美女封面网站设计欣赏》 《敢于尝试!23个有着非同寻常配色的网页设计》 《极好的交互设计:19个创意网页欣赏》 Beatbox Academy Discover Shadow This is Now Sam Markiewicz Erős Balázs Le Tour de France Pi’s Epic Journey Scroll For Your Health TCM Summer Under the Stars TEDxGUC aBenção – Malhas e Tricots Criativos WAAAC De Might of Mister Miller Negative Space Anthelios SPF Sunscreen InfoQuest Infographic Reunite the River Fillet Eone 原文地址:speckyboy.com from:http://www.uisdc.com/20-webpage-parallax-scrolling-design

龙生   19 May 2014
View Details
1 27 28 29 37