11 2011 档案
摘要：日期：2011/11/28 来源：GBin1.comjQuery中的鼠标事件中有mouseout和mouseleave俩个看起来类似的事件。这俩个事件的使用有些区别，如下是jQuery文档中的官方解析：The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would b
阅读全文
摘要：在线演示 偶然发现一个非常不错的生成在线测试的jQuery插件 - jQuizzy，这个插件能够帮助你快速的生成一个非常漂亮的在线测试应用。主要特性：界面非常整洁漂亮界面互动同一个页面多个测试题无需HTML。通过简单的javascript定义测试问题完全支持定制，皮肤并且可以扩展商业使用需要付费15美金Javascript倒入类库及其问题js:<script src="js/init.js"></script><script src="js/jquery.js"></script><script sr
阅读全文
摘要：日期：2011/11/26这里我们收集了10个你可能没有看过的最好的动画教程。有些非常简单但是效果非常棒，如果你想自己开发一些非常酷的应用，这些教程是你能找到的不错的资源之一。希望大家喜欢，如果你有更好的教程和资源，请你给我们留言！1. jQuery开发的令人印象深刻的动画风景标题这是个卡通主题的风景，使用动画滑动显示隐藏的元素。下面的截图演示了页面动画效果在线演示2. jQuery实现的冒烟效果非常棒的一个动画冒烟效果在线演示3. BBC Radio 1 Zoom Tabs学习这个教程你可以明白如何开发一个BBC Radio缩放标签页效果，当鼠标滚动到图片区，标签页滑出，图片缩放了一些用来更
阅读全文
摘要：今天介绍一款全屏的幻灯展示jQuery插件supersized，这个插件可以帮助你全屏展示大图片或者大背景，拥有独立的主题及其动态加载特性。在线演示 主要特性：能够自动修改图片大小适合浏览器的页面大小通过幻灯展示的循环背景可以动态加载并且可以设置变化方式核心版本可以支持仅仅需要背景变化大小的需要键盘导航整合Flickr - 可以从用户，组或者集合中拉取图片参考网站项目页面来查看更多信息Supersized 3.2新特性完整的重写了代码更多地选项，包括阻止幻灯被中断链接到幻灯页面允许直接调用功能（例如，播放，停止，前进，后退等）主题文件和基本文件分离，更加容易升级Javascript倒入jQue
阅读全文
摘要：在线演示在线下载最近需要寻找一个比较酷的页面幻灯显示插件，发现Nivo Slider是一个非常不错的选择。如果你需要演示新产品，或者你需要比较酷的幻灯片转化效果，Nivo幻灯是你的一个选择之一。主要特性：号称世界最棒的jQuery幻灯插件16种幻灯变化的特效简单并且配置灵活体积小并且符合语义jQuery插件使用免费（但是wordpress插件需要付费：20美元）这里我稍微说一下，jQuery的插件到处都有，我们需要有目的的选择一下插件，这个网站拥有自己独立的网站，网站非常正规，别的不说，使用着就放心。而且有技术支持团队，不过只支持付费用户。幻灯效果和效率都不错，堪比flash的幻灯。例如， 这
阅读全文
摘要：日期：2011/11/23 来源：GBin1.com jQuery的平滑页面内锚定插件提供给你一个轻量级的脚本帮助你添加页面内的锚定帮助你平滑的滚动页面。当然这里有其它的类似插件，不过这个是比较轻量级的版本。只有2kb，希望大家喜欢！在线演示 jQuery代码var JQUERY4U = {}JQUERY4U.UTIL = { /* * Utility function used to make anchor links animate smoothly instead of jumping. */ smoothAnchor: function (anchorCla...
阅读全文
摘要：日期：2011/11/21 GBin1.com基于文字的logo是设计者根据文字形状发挥想象创意的设计。Logo的设计是商业的图形化代表，它代表了商业产品特点，因此Logo应该根据公司的信誉来设计。因 为Logo的设计追求简单并且明了然而依然可以清晰的体现logo设计的含义。文字化的logo设计能很好的完成这个需要因为他们简单并且优秀。可能文字 化的logo是最有效的来满足用户及其潜在需要的设计方式。我们的网站GBin1.com同时也是采用了文字化的logo。它简单明了，并且能够让你一眼 就记住网站地址。在今天的这篇文章中，这里我们将介绍50款我们收集的富有创业的文字类型的Logo，希望大家能
阅读全文
摘要：日期：2011/11/21 GBin1.com 即 使web设计已经成为一个真正的产业，开发一个网站仍旧是技术和艺术的结合。一个网站的设计即可以带来大量流量，同时也可以吓走大量用户。当然这些都和设 计师相关。经验，天份和能力三方面的努力是一个设计师最强大的工具，一个设计精良的布局是所有这些的基础。而且，这也是一个非常耗时的工作。设计一个非常好的布局是一件非常不容易的事情，而且判断的方式也非常的主观。任何一个设计可能会取悦你，也可能让其它人厌恶。尽管这样，这里仍旧有些大家都承认的设计误区。为了帮助大家来避免这些错误和误区，我们列出了一些设计的小技巧。我们同时也希望大家能够帮助我们完善这些小技巧。
阅读全文
摘要：日期：2011/11/19 来源：GBin1.com一个快速添加悬浮效果，快速轮换，jQuery实现的幻灯播放效果。在线演示 原文来自： 使用jQuery实现鼠标悬浮图片轮换效果
阅读全文
摘要：日期：2011/11/19 昨天我们介绍了一款HTML5文件上传的jQuery插件：jQuery HTML5 uploader，今天我们将开发一个简单的叫upload center的图片上传程序，允许用户使用拖拽方式来上传电脑上的图片，使用现在浏览器支持新的HTML5 API。图片将会有一个预览和进度条，都由客户端控制。目前，图片都保存在服务器上的一个目录里，当然你可以自己加强相关功能。在线演示 在线下载 什么是HTML文件上传？使用HTML5上传文件其实综合使用了3种技术，新的File Reader API，还有新的Drag&Drop API，以及AJAX技术（包含2进制的数据传输）
阅读全文
摘要：随着HTML5的使用越来越被大家接受，基于HTML5的技术和插件也会变得越来越广泛，今天我们介绍一款基于HTML5和jQuery的上传插件: jQuery HTML5 uploader。使用这个插件将会使得文件上传变得简单和有趣，你只需要拖拽文件到页面特定区域就可以上传文件。在线演示 在线下载 使用方法：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><s
阅读全文
摘要：日期：2011/11/17 来源：GBin1.com 今天介绍一个非常可爱漂亮的滚动到顶端的插件,无需设置。它能快速的将页面里的元素添加滚动到顶端的功能。而且只在滚动时才出现，当滚动到顶端自动消失。在线演示在线下载支持：Firefox, Chrome and IE7+Javascript<script type="text/javascript" src="js/jquery.backtotop.js"></script><script type="text/javascript"> $("
阅读全文
摘要：日期：2011/11/16 在这篇文章中，我们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的，希望大家能够喜欢！1. 尽量使用最新版本的jQuery类库jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag，何乐而不为呢？我们也可以使用免费的CDN服务，例如， Googl...
阅读全文
摘要：日期：2011/11/16 来源：GBin1.com 记 得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验？ 是不是立刻就想到了flash实现？这彷佛年代久远的事了。使用现在最流行的web技术 HTML5，CSS3和jQuery，同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。也许你可能刚知道Adobe停止开 发移动版flash的消息，虽然在桌面中我们还拥有大量的flash的应用，但是随着HTML标准的完善，可能flash也要退出历史舞台了。在今天这篇 文章中，我们 将介绍一些非常实用的教程，技巧和资源来帮助大家构建一个更加丰富的用户界面。请大家给积极
阅读全文
摘要：日期：2011/11/15 来源：GBin1.com 毫无疑问，图形领域的私有软件使得刚起步的一些其它软件需要更多时间来适应。但是这里仍旧有一些非常棒的图形软件值得大家关注。当然他们可能无法取代已经被我们耳熟能详的大品牌软件。我们也没有办法比较孰优孰劣。所有这些都在于我们究竟要用它做什么。这 些软件是由社区开发的，因此我们不能指望它能像Photoshop那样变化。 这不代表它好或者差。 只是有些区别。 当然可能对于一个项目来说我们需要使用不同的平台和许可。所以你不得不使用多个工具完成一个项目，这也是为什么大家选择知名软件例如,photoshop 的原因。GIMPGIMP 是必须要提的软件， 名
阅读全文
摘要：日期：2011/11/15 来源：GBin1.com 使用程序或者某些工具自动生成的Javascript格式有时候可能会非常糟糕，这个时候如果我们拥有一个可以自动帮助你美化代码的工具将会非常的给力！今天我们介绍使用Beautify.js来帮助你自动规整jQuery代码。在线工具地址：http://jsbeautifier.org/在线下载地址：https://github.com/einars/js-beautify在线演示 Javascript代码：$(document).ready(function() { $('.beautify').each(function() {
阅读全文
摘要：日期：2011/11/14 来源：TerryjQuery sparklines是一个jQuery的图表插件，可以帮助你快速构建行内的小图表，今天我们将使用Sparklines开发一个动态监视首页PV变化 的应用。希望大家能喜欢，并且多多留言！请点击演示中的"Click ME!!!"，查看动态PV变化效果。在线演示如果你不知道什么是jQuery sparklines，请查看如下资源：jQuery sparklines官方网站5个最顶级jQuery图表类库插件-Charting pluginHTML代码：<div id="container">
阅读全文
摘要：日期：2011/11/12在线演示Topup是一个使用非常简单的javascript类库用来使用web2.0的弹出方式展示图片。这个类库基于jQuery和jQuery UI以保证跨浏览器的兼容性。提供如下特性：主要特性：绝对免费，甚至对于商业使用也同样免费配置非常简单，只需要包括一个include语句，没有其它更多配置使用Topup能保持你的HTML代码简单清晰，不需要添加多余的代码能够显示图片，flash，电影(Quicktime, windows media和realplay),iframe, DOM元素和纯HTML可以和prototype一起使用能够使用Yahoo！YUI Compres
阅读全文
摘要：这个文章是适合真正想去做HTML5应用的设计人员和开发人员阅读。这里我将不再重复HTML5开发的重要性。因为大家都已经知道这点。这里我收集了10个HTML5的工具帮助你在不同的方面简化你的开发和设计。如果你也喜欢这个文章，请在我们的网站GBin1留言支持！1. FindmebyIP一个列出了所有浏览器对于HTML5支持细节的网站。特别适合对于浏览器的兼容有问题的朋友。优点是在线，可以方便大家查看。类似的网站还有这个：Caniuse.com2. Video JS一个基于javascript的HTML5视频播放器。拥有三个部分：一段嵌入代码，一个javascript类库以及HTML/CSS的皮肤。
阅读全文
摘要：日期：2011/11/10 所有的开发人员都应该注意了，你们绝对应该看看这篇文章，帮助你快速创建HTML5/CSS3的开发框架。可能你也看到过其它的框架，但是你应该看看这些框架，因为你以前可能没用过他们中的大部分。 看看最新的实用HTML5和CSS3框架吧！希望你们喜欢！1. HTML5boilerplateH5BP 带给你非常漂亮的文档，一个网站优化的编译脚本，还有一个自定义的boilerplate编译器。除此之外，我们还支持lighttd，Google App Engine和NodeJS以及优化的服务器配置（包括Apache， Nginx，和IIS），并且已经把boilerplate的大小
阅读全文
摘要：日期：2011/11/10 来源：GBin1Javascript没有任何内建的格式化函数，这里我们通过Google收集了5个javascript的数字格式化函数，希望对于大家的web开发能够带来方便。十进制四舍五入这两段代码帮助你做到四舍五入，对于你显示价格或者订单比较有用：代码1：function CurrencyFormatted(amount) { var i = parseFloat(amount); if(isNaN(i)) { i = 0.00; } var minus = ''; if(i < 0) { minus = '-'; } i =
阅读全文
摘要：日期：2011/11/10 来源：GBin1.com 介绍约 束和创新是一对天生的冤家，为了更好的提升其中一个方面你不得不需要牺牲另外一个方面。同样的原因造成了设计者仍然在黑暗中摸索如果有效的结合SEO和设 计理念。SEO往往遵循着特定的原则，但是伟大的设计往往超越了传统，可能带来了互相冲突的地方。但是我们都知道，一个好的设计应该是没有意义的，除非它 能得到在线的关注。因此，我们将开辟一个前人没有尝试过的方式，来处理这些令人沮丧的麻烦。下面的这些步骤能帮助你使得“具有SEO意识的网站设计”更加 的具体和明了。敏感性实验我 研究过不同的网站发现虽然他们看起来非常的炫酷但是对于初次访问的用户来说几
阅读全文
摘要：Iphone5如此的流行，我觉得我们有必要为我们的读者收集一套时尚的iphone墙纸。 知道设计和开发社区是多么喜欢装饰他们的移动设备，我们收集了各大社区最好的iphone墙纸，帮助你更好的装饰你的iphone设备。 因为有如此多的墙纸设计，我们专注于比较知名的网站和设计人员。Veerle’s Blog Download Download Download Download DownloadI Love Typography Download Download Download Download DownloadVlad Studio Download Download Download Do
阅读全文
摘要：整合jQuery的全景图片展示插件，能帮助你的网站访客更好的浏览你的网站图片。帮助你构建虚拟旅程，全景展示和滚动，无限的图片幻灯，希望大家喜欢！相关的插件：分享8个图片360度旋转展示的jQuery插件1. 360° panoramic view plugin for jQuery一个全景图由一系列图片经过软件合成的一个广视角效果。它给予访客一个身临其境的感受。2. jQuery 360* Panorama非常小的一个用来生成全景效果的jQuery插件（4Kb）。非常容易自定义，只需要全景图片，一个DIV，还有些CSS定义，最后再来点儿javascript。3. jQuery sph
阅读全文
摘要：感谢设计社区的开放性，我们可以让web设计人员，图形设计人员拥有无数的网络资源。社交网站的发展使得我们可以拥有一个展现自己的平台，用来和不同的人分享自己的设计和概念。许多人都使用它来展示自己的作品，更多的人通过它来发现自己作品的问题。这里我们发现了和很多有趣的设计和灵感，帮助你拍拖设计上颈瓶。希望能帮助你扩展你设计的思路。个人来说，我喜欢抽象设计，所以这里有很多抽象的设计。希望大家喜欢！Simple Desktop一些抽象设计的墙纸，我发现非常有创意，简单然后非常具有灵感Subtle Pattern你可以得到所有平铺的背景，有些可能你很熟悉。一个非常好的寻找背景的网站PatternTap你可以
阅读全文
摘要：昨天介绍了javascript的开发工具sublime 2 edit，今天我们将介绍如何10分钟快速配置sublime2支持jQuery开发。希望大家能喜欢着款jQuery开发工具。相关介绍：使用sublime text 2开发Javacript和jQuery安装Sublime 2Sublime2下载地址：http://www.sublimetext.com/download 安装jQuery插件jQuery插件下载地址：https://github.com/mrmartineau/jQuery 安装配置jQuery插件包以上俩个都是zip包。先解压sublime2的压缩包，因为我使用WIN7
阅读全文
摘要：来源：GBin1.com 经常听见大家抱怨javascript开发没有好的IDE，当然我也同意。但是如果你尝试sublime text 2后估计你可能改变这个观点。下载地址：http://www.sublimetext.com/download 主要特性：jQuery功能版本：绝对是我这个jQuery坚决支持者的最爱！你只需要简单的输入$.ajax，然后按Tab键，自动加载模板。对于jQuery方法同样适用。运行速度快：快速代码编辑器，你可以快速查询，替换代码中字符串平台无关：你可以在Mac和windows上使用可定制：你可以自己定制自己喜欢的编码方式自动补齐括号：这个非常实用代码长度方便浏览
阅读全文
摘要：今天继续给大家介绍HTML5和jQuery插件结合使用生成的图形特效，这里我继续使用星际争霸2的图片元素给大家介绍一个360度全景预览兵种的特效实现，希望大家喜欢！请大家多多留言！在线演示 在线下载友情提示：以上演示中图片使用较大，如果加载不流畅，请下载到本地运行。如果你不清楚什么是360度全景预览或者不明白Reel是什么插件的话，请参考这篇文章：分享8个图片360度旋转展示的jQuery插件如果你没有用过jQuery插件Reel的话，请你访问官方网站：Reel 1.1.3HTML代码<header> <h1>Starcraft 2 Unit Animation Dem
阅读全文
摘要：开发过AJAX的朋友都可能需要自己生成"加载中”的图片显示效果，用来提示用户当前操作正在处理中。这里GBin1.com提供一个快速的方法生成这种效果。你只需要使用ajaxStart和ajaxStop方法，你可以将整个页面的ajax方法都加上“加载中”效果。如下：在线演示 Javascript代码：<script type="text/javascript">$(document).ready(function () {$('#loading') .hide() .ajaxStart(function() { $(this).show()
阅读全文
摘要：今天分享一个新闻行情的jQUery插件，可以帮助大家使用比较小的页面区域来展示最新最重要的信息。在线演示jQuerynews ticker是一个非常方便的jQuery插件，能够快速让你生成这样的一个新闻行情效果。它能够通过列表，HTML甚至是RSS（只能加载本站的RSS feed）来生成新闻内容，并且支持前后播放和停止。这个插件支持一系列的自定义选项，例如：播放速度播放效果播放方向显示时间代码开发简单高效。首先引入jQuery news ticker类库及其jQuery类库：<link href="css/ticker-style.css" rel="sty
阅读全文
摘要：日期：2011/11/04 来源：GBin1.com 今天GBin1带给大家一段来自fontdragr.com非常实用的代码片断，能够帮助大家实时的修改网站页面字体。这个代码片断可以帮助web设计人员实时的修改网站页面字体，或者直接演示给客户或者其它人员。希望大家喜欢！如何使用？第一步：请先拷贝并且粘贴到一个新的书签中第二步：访问你需要测试的网站或者页面第三步：点击书签第四步：拖拉你需要动态显示的字体（比如，微软雅黑）到出现的工具条上第五步：指定jQuery selector就可以动态选择不同字体预览了书签代码javascript: (function (d) { var s = d.crea
阅读全文
摘要：日期：2011/11/03 来源：tympanus 编译：GBin1.comCSS3的功能非常强大，这个毋庸置疑。在这篇教程中我们将使用一些独特的方式来实现一些特效。我们使用CSS3的transition属性来创建图片缩略图的悬浮效果。当鼠标悬浮在缩略图上，我们将显示一些图片说明，没一个演示中我们使用一种独特的方式。在线演示 在线下载友情提示：因为使用CSS3，所以大家请使用支持CSS3的现代浏览器比如，Safari来查看演示，否则，你看到的所有的演示的行为都一样。原文来自： 2011年最新使用CSS3实现各种独特悬浮效果的教程
阅读全文
摘要：介绍视差滚动特效(parallax scrolling)是web开发目前比较火的一个小技巧，我们需要特别感谢Nike Better World带给我们的这个超酷的设计。 它带给web设计和开发很大的反响。几乎每个人都在讨论。我对于这个创新的特效也非常的欣赏。这个技巧综合了大图片，滚动，数字计算等技巧，为了能够精确的计算合适的位置和时机来展示这种视差效果。当然这个特效的使用也需要权衡， 在研究这个特效的过程中，我也看到了很多失败的案例。整体的性能即使在最新的浏览器和主机上的运行也非常拖沓。其次，设计上的关联有时候也需要非常严密的计划，有些实现让我们觉得非常困惑，甚至让你有些恶心。Via Gbin
阅读全文
摘要：来源：GBin1.com如果更好的提高博客的流量对于我们这些博主来说都非常重要，当然也是非常富有挑战的。为了让访问者更加有兴趣浏览你的博客及其内容，我这里有8个小技巧，希望大家能够用用！1. 高质量的文章高质量的文章比较受搜索引擎偏爱，这一点大家一定要相信。宁愿花1周时间打造一篇高质量的文章，也不要花几小时撰写一篇。2. 按时发布一些文章告诉用户你更新的时间，可能你的用户就会在那个时间过来访问你的博客3. 使用容易阅读的标题名称标题名称现在对于搜索引擎来说意义重大，你起一个有意义的标题，可能会让用户更容易的使用搜索引擎找到你4. 和你的读者互动一个有生气的博客更容易得到流量，用户在阅读你的文章
阅读全文
摘要：日期：2011/11/02 原文：jquery4u.com 编译：GBin1.com今天分享8个可以帮助你360度旋转显示图片的jQuery插件，这些插件能帮助你更好的提供图片商品的浏览体验。一旦你用上，肯定会喜欢的！1. Reel 1.1.3 Reel是一个jQuery的插件可以帮助你将图片生成一个实时的动画。它提供了360度的视图，可以作为flash和Java的另外一个选择2. Multiple 360 images添加多个图片到一个页面。生成数量不限的javascript视图。3. jQuery threesixty 体积非常小的一个插件，帮助你创建flash类型的360度视图4. pi
阅读全文
摘要：日期：2011/11/01 来源：GBin1.com因为本人是星际争霸系列游戏的忠实拥簇，所以在今天的jQuery教程中，我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图。希望大家喜欢！如果你不熟悉jQuery插件Quicksand，那么推荐你查看这篇文章：2010年最佳jQuery插件 ，或者去Quicksand插件 查看具体介绍。在线演示 在线下载 HTML5代码首先我们使用HTML5的代码来创建一个html文档，将所需的quicksand类库，及其jquery类库，还有HTML5类库倒入，如下：<!DOCTYPE html><h
阅读全文
