超全超实用的Javascript类库和jQuery插件大全之一:图片,地图和图形

日期:2012-10-10  来源:GBin1.com

如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。

使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例如,移动设备上使用js类库。很多情况下使用类似jQuery的类库可能有点杀鸡用宰牛刀的感觉,然而,一些超轻量级的类库可能更加的实用。这里我们也会介绍一些。

在这个两个部分的文章中,我们将介绍一些非常实用的javascriptjQuery类库,帮助你解决你经常遇到的问题。你可能知道一些,但是你肯定不会都知道。希望我们这片文章能够帮助你发现一些你能应用到项目中的实用类库。

因为文章篇幅的原因,这里我们分为几个部分:

快速了解:

下面你将看到一个简单的类库列表介绍,每个类库连接到了对应的网站,能够帮助你快速的找到需要的类库工具。

web表单:

forms framework – auto-saving drafts – file upload (and resuming large downloads) – <select> boxes – modal boxes – form accordion – dynamic labels – drop-down with images – tooltips – extended input – form validation – credit card validation (alternative) – email check – password complexity

web印刷排版:

repairing vertical baseline – align text to a grid – responsive measure – fixing widows – fluid line height –scalable headlines (or smart headlines) – Lettering.js – Kerning.js

实用类库:

exchange rates and currency – date/time formatting – relative timestamps – number and currency formatting– cookies.js – zip.js – extra string methods – countdown.js – sticky content – Google Maps – interactive maps– progress bar – favicon notifications (or Notificon)

图片,地图和图形:

world maps – subway map – Google maps – open source maps – SVG fallback – gauges – graphs – timeline– Retina display – magnifying glass – interactive graphs – plots – time visualization

图片,地图和图形

jVectorMap

这个类库可以帮助你创建基于SVG和VML的矢量地图,支持IE6和现代浏览器,我们以前也曾经介绍过。使用javascript,CSS,HTML,SVG和VML。不适用任何第三方插件例如Flash。

相关文章:分享30个绝对让你动心的jQuery插件和CSS3小技巧

JQVAMP

JQVMAP 可以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了SVG(Scalable Vector Graphics)技术生成地图图片,如果你也需要支持老版本的浏览器,例如,IE6/7/8的话,它也可以通过VML来实现

Subway Map Visualization jQuery Plugin

如果你需要处理政府,学校或者其它复杂组织相关项目的话,你有可能需要去设计和开发一个很不错的视觉效果图。那么这个插件可能会成为你的项目效果雏形。

GMaps.js

这个插件可以帮助你更容易的使用Google地图。你不需要自己处理大量代码或者阅读API文档。另外一个不错的插件是: Gmap3 jQuery plugin

相关介绍: 分享一款超棒的jQuery Google地图插件:Gmaps

Leaflet: Open-Source Interactive Maps With JavaScript

一个用来在桌面和移动设备上创建互动地图的类库。API非常易用,并且拥有非常好的灵活性,性能,体验。提供了地图层次,包括了标记,弹出层,GeoJSON等。支持移动设备双击缩放。并且针对iOS提供硬件加速,整个项目开源,大家可以自由使用。

SVGeezy: a JavaScript plugin for SVG fallbacks

一个用来侦测SVG图片的javascript类库,并且自动为老版本浏览器的寻找标准图片的替换方式。

Retina.js

一个用来检查网站图片的js脚本。当找到图片后,使用高分辨率的图片替换低分辨率的图片。

JustGage

我们介绍过的一款动态动画仪表盘js类库。基于Raphael类库来生成图形。

相关阅读: 超棒的仪表盘javascript类库- justGage

arbor.js

一个视觉图形类库,用来创建互联的树形结构。拥有图形组织算法和屏幕刷新处理

Timeline: Generate Timelines To Visualize Data

一个帮助你生成时间轴的超酷类库。可以支持不同的内容源,例如,Twiiter,YouTube,Flickr,Vimeo,Google Maps和Soundcloud等等。

相关阅读: Timeline - 超酷的JavaScript叙事性时间轴(Timeline)类库

Unicon

一个Grunt.js的task,可以帮助你更简单的管理图标和背景图片,使用SVG图标,但是针对老版本浏览器拥有其它fallback处理机制。从CSS角度来看,使用简单,产生基于每个图标的class。不适用CSS sprites。

Foresight.js

这个设备识别类库,能够使得网站可以识别用户端设备的分辨率或者速度,从而自定义src属性来优化网站的展示和提高用户体验

A Magnifying Glass With CSS3 And jQuery

一个CSS3的放大器特效。使用box-shadow和border-radius来创建放大镜本身。用jquery来探测鼠标位置,移动并且展示图片。当鼠标移出图片,放大镜淡出。实现机制是使用一大一小两个图片,当需要查看的时候,展示分辨率更大的图片。

Rickshaw

免费开源的javascript工具帮助你创建互动的图形,例如,悬浮,说明,区域选择等等,基于D3,图形使用SVG和CSS来生成。

Flot: Plotting for jQuery

一个jQuery的图形绘制类库。支持IE6+,chrome,FF2+,Safari3+和opera 9.5+。你可以使用不同类型的图形,支持ajax,提供了缩放及其数据点互动。

Chronoline.js

一个帮助你创建编年体时间轴的类库,你提供时间和事件,它就可以生成一个日历,历史事件等等

相关阅读:分享一个基于事件时间线的Javascript类库-Chronoline

Cubism

一个D3插件帮助你实时视觉化时间序列,构建dashboard,从图形,Cube里抓取数据。帮助你减少服务器负载

Envision.js

一个快速创建动态互动HTML5视觉图形效果的类库

Data Visualization JavaScript Libraries

一套数据视觉展示的js类库,帮助你更简单的生成漂亮有意义的数据视觉图形。如果以上找不到你需要的图形,相信这里肯定能够找到一个。

更多文档

jQuery Fundamentals

这个HTML文档将帮助你更加容易的处理jQuery编程中遇到的问题。你可以互动的阅读并且尝试在线演示。

JavaScript Patterns Collection

帮助你了解js中使用的设计模式,包括:方法模式,jQuery设计模式,jQuery插件设计模式等等。

JavaScript Garden

一个不断添加的javascript高级编程文档。 帮助你了解编程中的错误和bug,并且帮助你如何高效编程,避免糟糕的编程实践。

via smashingmagazine

 

来源:超全超实用的Javascript类库和jQuery插件大全之一:图片,地图和图形

时间: 2024-10-17 08:36:46

超全超实用的Javascript类库和jQuery插件大全之一:图片,地图和图形的相关文章

超全超实用的Javascript类库和jQuery插件大全之二:文字处理,表格和列表处理,实用的javascript开发工具

日期:2012-10-15  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,

超全超实用的Javascript类库和jQuery插件大全之一:Web印刷排版

日期:2012-10-9  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例

jQuery插件expander实现图片翻转特效

  本文给大家分享的是一款基于jQuery插件expander实现图片翻转特效,一共有6种不同的图片翻转样式,十分的炫酷,有需要的小伙伴可以参考下. 分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 引入CSS和JS ? 1 2 3 4 <link href="css/expander.css" rel="stylesheet"> <link hr

利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)_jquery

  <body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="imag

javascript常见数据验证插件大全_javascript技巧

原生Javascript电话号码验证,邮件验证,身份证验证.使用时传入要验证的字符串,返回ture代表符合,返回false代码不符合. 使用: document.getElementById("btnPhone").onclick=function(){ alert(ValidationHandler.IsPhone(document.getElementById("phoneInput").value)==true?"合法":"不合法

编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章

      这些年主要关注于项目管理方面的工作,编码就比较少了.这几天比较空闲,就想把原来的经验沉淀下来,一个是做好记录,以后如果忘记了还能尽快找回来,第二个是写写博文,算是练练手笔吧.       言归正传,这次写的是Javascript类库.大家都知道,Javacript是一种很有意思的语言.虽然它是前端语言,但是它能做的事情远远超出我们的想象.Javascript同样是一种面向对象的语言,使用它,同样可以自定义对象,同样也具备对象的一些特性,即封装,继承,多态性.同时,Javascript

10个精选的颜色选择器Javascript脚本及其jQuery插件

 Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现的颜色选择器,希望对大家工作和项目中有帮助. jQuery插件类 1. Color Picker 2. Farbtasic 3. jQuery Colors Pickers HSL javascript脚本类 4. mooRainbow 5. ColorPicker 0.9 6. ExColor (

jQuery插件boxScroll实现图片轮播特效_jquery

BoxScroll       常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,到了尽头得往回跑,看看注释就知道了.       代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name=

请推荐一款比较成熟稳定的javascript框架或者jquery插件来动态生成网络拓扑图

问题描述 项目组准备用javascript来展示一个小型的网络拓扑结构,本人遍寻google和百度,只找到jquery.topology.js和d3.js.但是不知道是否能符合以下的要求.1.读取后台返回的数据显示出当前网络的连接状态和所有节点的信息,然后画出网络拓扑图.画面渲染时有动画效果.如节点要一个一个的展示出来.2.通过ajax轮询实时展示网络连接等状态.如一个主机掉线了,其连接的线要用红叉划掉,如果从有线连接转为无线连接连接线要从实线转为虚线等.3.开源代码.入手不到一个礼拜,上头一直