首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

10款精挑细选的jquery插件

10款精挑细选的jquery插件

1. Perimeter.js

可以在指定的元素周围生成一个区域,帮助你触发特定的动画,例如,用户鼠标接近某一个按钮的时候,提示语变化或者出现特定的效果

10款精挑细选的jquery插件

2. Ezdz [izy-dizy]

一个帮助你将任何标准输入框类型变成可拖拽的区域的jquery插件,并且带有验证和预览效果

10款精挑细选的jquery插件

3. Validetta

一个帮助你做客户端表单验证的jquery插件, 帮助你降低使用验证功能的难度。

10款精挑细选的jquery插件

4. jQuery Selectric

帮助你处理样式和选择器的jquery插件

10款精挑细选的jquery插件

5. Device.js

基于不同操作系统,横竖屏和设备类型来帮助你快速书写条件CSS或者javascript的js类库

10款精挑细选的jquery插件

6. Flat Shadow by Pete R.

帮助生成flat UI元素阴影的jquery插件

10款精挑细选的jquery插件

7. Garlic.js

保存表单数据到本地,直到你成功递交表单

10款精挑细选的jquery插件

8. Zebra_Datepicker

帮助自动针对输入框生成日期选择器的jquery插件

10款精挑细选的jquery插件

9. Pikachoose

轻量级的一个jquery幻灯插件,拥有丰富的选项

10款精挑细选的jquery插件

10.…

标签: jquery, jquery插件, jquery plugin, 插件

阅读更多

帮助自定义选择框样式的Javascript - DropKick.js

DropKick - 自定义你的<select>的样式

在线演示   在线下载

当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了。

我们可以使用CSS来给<select>定一个样式,但是只用CSS的话,这里就会有很大的局限性。通常情况下,唯一的可行选择就是用JavaScript来做下拉框的样式。

在这篇文章中,我们使用DropKick - 一个jQuery的插件,来创建我们的下拉列表。它做了什么呢?DropKick <select>列表转换成完全自定义的HTML元素做的下拉列表,而当你选择了一个下拉选项时,这个选项对应的选项值会更新成表单的一部分。好了,现在让我们开始吧!

创建<select>

我们要做的第一件事,是创建一个<select>列表,我们在例子中创建一个一周工作日的列表:

<select id='mySelect'>

标签: jquery插件, html5, css, 自定义样式

阅读更多

超棒的旋转式幻灯jQuery插件 - Roundabout

超棒的旋转式幻灯jQuery插件 - Roundabout

在线演示

相关阅读:

分享40多个新鲜的jQuery图片和内容幻灯插件 

分享一款强大的jQuery旋转轮播式插件 - CarouFredSel 

可能大家都厌倦了千篇一律的平面幻灯特效,在这篇文章中我们将介绍一款超棒的立体动态旋转式的jQuery幻灯插件 - Roundabout。

使用这款jQuery插件可以帮助你快速的生成一个旋转式的幻灯效果,相信如果你能够很好的整合到你的网站或者web应用中去,肯定会给你的网站增色不少!

主要特性

  • 支持jQuery1.2以上
  • 高度可自定义,甚至拥有扩展的API
  • 除了点击操作,也支持拖拽操作
  • 除了宣传式的幻灯,你可以开发其它运动方式的幻灯
  • 支持现代浏览器及其一些老的浏览器

如何使用

HTML

<ul>
<li><img src="images/firefox.png" alt="firefox" /></li>

标签: jquery, jquery plugin, 旋转式幻灯插件, jquery插件, 幻灯插件

阅读更多

介绍一个快速导航插件:Windy

介绍一个快速导航插件:Windy

在线演示

windy 是一个jQuery插件,使用CSS 3D变换和转换来略过一堆物品从而实现快速导航。连续导航的效果就是提醒一副牌或表单快点飞走,因此得名Windy。这个插件的想法是受CSS着色器示例 的影响。使用这个插件时需要一个无序列表的class:"wi-container"

<ul id="wi-el" class="wi-container">
<li>
<img src="images/demo1/1.jpg" alt="image1"/>
<h4>Coco Loko</h4>
<p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
</li>

标签: jquery, jquery plugin, 导航插件, jquery插件, 导航

阅读更多

超简洁的响应式幻灯 - unslider

响应式幻灯

在线演示

Unslider是一款超迷你的响应式幻灯,如果你需要找到一款纯粹的幻灯插件的话。unslider就是你的不错选择,支持响应式,并且支持触摸设备。没有多余的功能,纯粹的幻灯实现。主要特性:

  • 支持不同浏览器
  • 支持键盘导航支持
  • 自动修改图片高度
  • 支持响应式
  • 如果需要支持触摸设备的话,可以使用jQuery.event.swipe插件

如何使用?

导入类库:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.js"></script>

HTML代码:

<div class="banner">
<ul>
<li>This…

标签: 响应式幻灯, jquery, unslider, jquery插件

阅读更多

一个帮助你生成iOS文件夹效果的jQuery插件 - App-Folders

一个帮助你生成iOS文件夹效果的jQuery插件 - App-Folders

在线演示

如果你是iOS的狂热分子的话,对于iOS风格app目录肯定非常熟悉,今天这里我们介绍一个实现iOS app风格目录的jQuery插件:App-Folders

相关阅读:

使用jQuery开发iOS风格的页面导航菜单

这个插件同时支持桌面和Mobile应用,所以你可以创建俩种不同的样式,如下:

一个帮助你生成iOS文件夹效果的jQuery插件 - App-Folders

或者是移动设备的效果,如下:

一个帮助你生成iOS文件夹效果的jQuery插件 - App-Folders

HTML代码

    <!--This is what you call in the function above-->
<div class="app-folders-container">

<!-- jaf-row 1 (You can have as many rows as you like) -->
<div class="jaf-row jaf-container">

<!--You can have as many folders as you…

标签: ios, app, app folder, ios文件夹, jQuery, jquery插件, app-folders

阅读更多

帮助你生成放大镜效果的jQuery插件 - Melens

帮助你生成放大镜效果的jQuery插件 - Melens

在线演示  本地下载

大家肯定在以前gbin1发布的文章中看到过帮助你生成图片"放大镜"效果的插件,今天这里我们再介绍一款jQuery插件 - Melens。如果大家需要让有兴趣的用户查看更清晰的图片,放大镜效果往往是不错的选择。

主要特性

  • 支持同一页面多个实例
  • 支持放大镜的边框类型(圆形或者矩形)
  • 支持修改边框颜色
  • 支持修改边框大小(矩形可支持圆角)

如何使用

倒入类库代码:

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="js/jquery.mlens-1.0.js"></script>

生成放大镜效果代码:

$("#green_monster").mlens(…

标签: melens, jquery插件, jQuery, 放大镜效果

阅读更多

一款帮助你生成非常有趣的扇形扑克牌风格特效的jQuery插件-Baraja

前面文章中我们曾经介绍过折叠方式展示元素的jQuery插件,那么你有没有试过使用扑克牌风格的扇形页面的展示效果呢?如果没有,那你可千万不要错过我们今天介绍的jQuery插件-Baraja。Baraja是一款帮助你以特效风格展示页面元素的jQuery插件,使用它可以我们可以制作出一组类似桌面纸牌牌的演示效果。为了达到不同的旋转效果和展开方式,你可以通过使用不同的CSS设定来实现不同的过渡和转换效果。相信追求另类的朋友肯定会非常喜欢!

在线演示  本地下载

你可以使用CSS对它的展开方向、速度、范围和视图效果进行自定义,同时它还支持Prev-Next进行排序方式的浏览。当全部设定好点击图像时,它们就自动散开成扇形排列,非常的有趣!赶快试试吧!

友情提示:因为使用CSS的过渡和动画效果,所以只能使用支持CSS动画和过渡的浏览器查看效果。

标签: Baraja, 扇形, jQuery, jquery插件

阅读更多

分享5个viewport相关的jQuery插件

在web和网站开发中我们常常需要处理viewport相关的功能,在前面的文章中我们曾经介绍过javascript响应式视图(viewport)切换工具类库,今天这里我们再介绍5个和viewport相关的jQuery插件,希望大家喜欢!

Viewport Selectors for jQuery

这个简单的jQuery插件可以快速帮助你检测元素是否处于viewport中。

分享5个viewport相关的jQuery插件

jQuery Bullseye - Viewport detection plug-in for jQuery!

功能丰富的轻量级jQuery插件,帮助你添加进去和离开viewport的方法

分享5个viewport相关的jQuery插件 

Within Viewport

这个jQuery插件帮助你判断元素是否处于viewport中。同时允许你指定网站的有效viewport,比如,固定的菜单和导航条。

分享5个viewport相关的jQuery插件 

jQuery viewportOffset

这个jQuery插件和jQuery内建的.offset()方法类似,但是计算的是left和top距离viewport的距离而不是document。

分享5个viewport相关的jQuery插件

jQuery.Viewport

非常好用的轻量级jQuery插件,帮助你设置一个元素作为viewport,使用绝对定位来显示元素。

分享5个viewport相关的jQuery插件

via…

标签: jQuery, jquery插件, viewport

阅读更多

超棒的响应式jQuery网格布局插件 - grid-a licious

超棒的响应式jQuery网格布局插件 - grid-a licious 

在线演示 

大家应该还记得我们在过去的文章中介绍过的几款知名的响应式布局插:isotopeFreetile.jsmasonary吧?使用这些插件可以方便的帮助你构建自适应的网格布局。

今天我们介绍另外一个超棒的网格布局插件-Grid-A-Licious,和前面介绍过的isotopemasonary不太一样,这个插件使用更加完整的响应式实现,你不需要定义固定的宽度,它自己会根据不同的设备来自动的选择浮动,不需要使用absolute方式来定位元素。除此之外还提供了一些选项来帮助你自定义插件选项,包括:

  • 宽度
  • 动画速度
  • 持续时间
  • 特效
  • 其它

 

标签: jQuery, jquery插件, 布局插件, grid-a-licious

阅读更多

6款不容错过的超棒倒计时jQuery插件

6款不容错过的超棒倒计时jQuery插件

如果你曾经开发过类似限时抢购的网站或者应用的话,或者你需要在发布一款超棒游戏之前添加一些神秘元素的话,一个超棒或者超酷的倒计时页面绝对是非常有必要的,制作一个倒计时的功能虽然不是非常复杂,但是如果你有现成的代码能够直接使用的话,相信各位也绝对不会拒绝!在今天的这篇文章中,我们收集了六款超棒的倒计时jQuery插件,能够快速高效的帮助你搭建一个漂亮的倒计时页面,还等什么,看看吧!

jQuery超酷倒计时插件

在这篇教程中,将介绍如何使用jQuery来开发一个漂亮的倒计时效果,当然,最后的代码做为一个jQuery插件的方式提供给大家免费使用,相信如果你对于如何实现功能有兴趣,可以看看这篇教程

6款不容错过的超棒倒计时jQuery插件

 jQuery uLED plugin by Class.PM

这款插件在前两天的jQuery插件推荐中我们也曾经介绍过,可以帮助你生成漂亮的倒计时,时钟,或者随机数

6款不容错过的超棒倒计时jQuery插件

jQuery Countdown Script

这个脚本可以帮助你生成电子钟类型的倒计时效果,支持更换皮肤(深色和浅色),使用简单并且整合方便

6款不容错过的超棒倒计时jQuery插件

jquery-countdown

这个倒计时jQuery插件拥有漂亮的UI界面,整个动画也非常精美,相信如果你需要在网页中使用是一个不错的选择

6款不容错过的超棒倒计时jQuery插件

KK…

标签: jQuery, jquery插件, 倒计时, countdown, 倒计时插件

阅读更多

超棒片状过渡效果的jQuery图片幻灯插件 - jq-tiles

超棒片状过渡效果的jQuery图片幻灯插件 - jq-tiles

在线演示  本地下载

今天介绍一款拥有不同片状动画过渡效果的jQuery插件-jq-tiles,使用它能够帮助你生成基于CSS3的片状动画效果。同时支持自定义选项:

  • 效果选择
  • x,y坐标片状数量选择
  • 速度
  • 其它

支持图片缩略图预览功能,并且拥有图片导航功能,最后针对每张图片还支持不同类型的回调方法,如果你需要一个高性能的动画幻灯,使用CSS3的jq-tiles肯定是一个不错的选择。当然,如果你还需要支持臭名远扬的老版本IE的话,可能会让你失望了,希望大家喜欢这个插件!

标签: css3, jq-tiles, jQuery, jquery插件

阅读更多

2012年最新的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。可以用来制作超棒的悬浮层效果,支持不同的屏幕尺寸和设备

标签: jQuery, jquery插件, 2012年jquery插件

阅读更多

一个超棒的jQuery通知栏插件 - jBar

一个超棒的jQuery通知栏插件 - jBar

在线演示  本地下载

以前我们分享过一款基于jQuery,backbone的通知类库: Backbone.Notifier,今天我们分享另外一个款超棒的通知插件 - jBar。

jBar是一款基于jQuery的用户行为调用的通知栏实现,和一般的通知不太一样的地方在于它并不弹出一个窗口或者其它提示,当有新的信息或者消息需要传递给用户的时候,它会在页面顶端或者底端生成一个工具栏,用户可以选择查看或者稍后查看,整个过程不会打断用户目前的浏览操作,也不会让用户感觉到干扰。

主要特性

  • 轻量级的jQuery插件
  • 代码容易实现
  • 支持自定义,方便的修改CSS
  • 并且支持整合jQueryUI
  • 支持现代浏览器

如何使用

使用jbar非常简单,你只需要引入jQuery类库和jBar类库,如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

标签: jQuery, jquery插件, jquery plugin, notification, 通知栏, jBar

阅读更多

下一页

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐