首页风格
门户
博客

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

25个帮助大家设计超棒滚动体验的jQuery插件

大家都知道在最近几年的web设计趋势和流行设计元素中,超棒的滚动效果绝对是不可或缺的一个设计元素,特别是在单页面网站,或者个人作品集中,大家往往更容易看到类似的设计效果,特别是视差滚动,相信大家看到的网站肯定不在少数,在今天这篇文章中,我们将汇集了25个超棒的滚动相关的jQuery插件,帮助你创建超棒的各式滚动效果,希望大家喜欢,推荐大家收藏并且保存到自己的收藏夹里,绝对物超所值!

Scrolld.js

 

Cool Kitten

 

FoldScroll 

 

fullPage.js

 

AnimateScroll

 

Parallax.js

 

Jarallax

 

jInvertScroll

 

jQuery Full Content

 

One Page Scroll

 

jQuery Parallax

 

Scroll…

标签: jQuery, #文章, jQuery插件, 视差滚动

阅读更多

超棒的视差效果jQuery插件 - FractionSlider

在线演示

如果你希望找到一款与众不同的jQuery幻灯插件的话,Fractionslider/ 肯定会让你眼前一亮,和传统幻灯不同的是,它可以让页面中的任何元素生成独立的动画效果。

使用非常简单,如下:

引入CSS和JS





    
  1. <link href="fractionslider.css" rel="stylesheet" />
  2. <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
  3. <script type="text/javascript" src="jquery.fractionslider.js"></script>

HTML





    
  1. <div class="slider"><!--…

标签: #文章, jQuery, jQuery插件, 幻灯特效

阅读更多

超轻量级的jQuery Dashboard插件 - sDashboard

超轻量级的jQuery Dashboard插件 - sDashboard

sDashboard是一个款超简单的轻量级的Dashboard jQuery插件,能够将一组对象数组生成一个dashboard。每一个数组中的对象元素都可以渲染生成一个dashboard的组件,并且支持拖拽重新组织。

sDashboard内建了针对数据库和flotr2图表支持。同时支持时间的监听例如,表格中行的单击,数据选择及其单击事件。

sDashboard基于如下类库:

  • jQuery
  • jQuery UI
  • 数据库
  • Flotr2图表

类库要求: jQuery

 


在线演示: http://modeln.github.io/sDashboard/

标签: jQuery, jQuery插件, dashboard

阅读更多

10款超实用的jQuery即时通知插件

10款超实用的jQuery即时通知插件

如果大家使用Gmail邮件的话,肯定对于它位于顶端的即时通知非 常熟悉,你的所有操作或者操作中出现的错误都会在这里及时的显示并且提醒用户, 和传统的alert风格的提示不一样的地方在于,它不打断当前的用户使用,能够带给用户更好的用户体验,而传统的alert方式,必须让用户点击一下确认 才可以继续操作。

在今天这篇文章中,我们将介绍10款帮助你快速开发即时通知功能的JQuery插件,希望大家喜欢!

相关阅读:

10款精挑细选的jquery插件

推荐9款提高表单用户使用体验的超棒jQuery插件

Noty

Noty是一款使用非常简单的即时通知插件,你可以使用非常简单的代码生成提示效果,并且支持主题设置,自带有几款主题,所有的CSS都被写入了 Javascript中,修改也很方便,支持大量选项,可以方便的生成提示,警告,报错样式,提示的页面位置也可以方便的设置,推荐使用!

在gbtags.com的社区中,使用的也是这款插件

标签: jQuery, jQuery插件, 极客标签

阅读更多

极客技术专题【009期】:web技术开发小技巧

极客技术专题【009期】:web技术开发小技巧

技术专题:Seajs介绍 (分享人:choaklin

专题演讲稿:SeaJS的交流分享

授课时间:2013/08/27(周二)  20:00-21:00

课程时间:40min

课程大纲:

前端JS开发结合SEAJS的交流分享介绍

"课程平台"使用帮助:如何使用极客社区"在线课程平台"?

如何进入课程

  • 已报名用户:进入课程日历后底端有工具条提示,可提前进入指定课程
  • 未报名用户:需要等待课程开始时间后,进入课程日历后,点击对应日历项进入课程

标签: jQuery, 分享, GB互动技术分享

阅读更多

使用jQuery创建模态窗口登陆效果

使用jQuery创建模态窗口登陆效果

在线演示 在线下载

隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素。社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单。在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中。

我将演示如何利用jQuery插件leanModal建立一个常规模态窗口。如果你有MIT general license,那么这个插件是完全开源和免费的,我很喜欢这个插件,用起来相当方便,还能自行添加CSS,达到自定义的效果。

在线演示--下载源代码

使用jQuery创建模态窗口登陆效果

开始

首先创建两个命名为"index.html"和"style.css"的文件,在同一个目录中,创建另一个文件夹命名为/js/,包含进刚才两个文件。第一个是微型jQuery库,第二个是leanModal插件,命名为jquery.leanModal.min.js。

<!doctype…

标签: jQuery, 模态窗口登录, 模态窗口, javasctipt

阅读更多

17种新型的响应式开发框架

对于所有Web开发人员和设计者而言,在建立网站的时候有很多不同资源供他们使用。其中之一便是框架,框架定义为一个普遍的或受规范准则、概念和实 践来解决典型问题。因此,如果它是在网页设计领域的定义,它实际上捆绑的文件夹带有JSS文件,CSS和HTML,还有结构化文件。它主要用于开发初期网 站使用一个共同的结构,并可以重复使用而不用重新编码。下面将介绍17种最新好用的响应式框架,有助于Web开发人员在涉及网站设计的不同进程时使用。你 不需要数学的专门知识或技术知识,运用框架将节省编程时间,使得网站开发过程更容易更快捷。

One% CSS Grid

正如它的名字本身就代表了它的功能,由于它是一个12柱的流场中CSS网格系统,推荐给需要创建一个更好的响应基础的设计者。

MUELLER Grid System

它允许网站开发人员完全控制基线网络,列宽,媒体查询和分割线宽度,还适应于响应和无响应布局。

Profound Grid

它是一个灵活的框架,在不固定或固定的时候都能实现,因为它是通过SCSS建立的。它使得Web开发人员能够增加媒体布局,创建计算列的负利润率。

34…

标签: jQuery, 分享, 网页设计, Foundation前端框架

阅读更多

极客技术专题【007期】:jQuery初学者入门 - jQuery Event

极客技术专题【007期】:jQuery初学者入门 - jQuery Event

技术专题介绍

专题:jQuery初学者入门[第三讲:jQuery Event]

分享人:极客标签技术编辑 - Lana (请站内关注分享人)

授课时间:2013/08/22(周四)  20:00-21:00

课程类型:公开

专题难度:初级

课程时间:60min

课程介绍:

上周我们介绍了jquery的DOM操作,本周我们将继续了解-- jquery Event

  • 授课方式:课程平台 - 请选择当前技术分享日期并且点击进入即可
  • 报名方式:社区用户请在课程日历中点击"课程报名"即可,这样会在你的近期课程日历中添加对应课程的报名提示

"课程平台"介绍和帮助:如何使用极客社区"在线课程平台"?

特别提醒:

如果大家想订阅我们的课程时间列表,请任选我们下方的三种方式,我们会在第一时间将课程公布这里。

1.公众微信号 :极客标签社区

2.极客官方微博:www.weibo.com/gbtags

3.QQ社区群的每日看板

极客标签社区会员群1:73850481(已满)

极客标签社区会员群2:105369095

标签: jQuery, 分享, GB互动技术分享

阅读更多

帮助更语义化的显示时间的jQuery插件 - tidyTime.js

帮助更语义化的显示时间的jQuery插件 - tidyTime.js

网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢?

08:15  显示成  "八点过一刻了"    

05:45  显示成  "醒醒啦,差一刻就早上六点啦"

14:29  显示成  "快到下午两点半啦"

大家是否觉得上面的时间显示更贴近生活呢? 如果自己处理这样的时间显示会稍微有些麻烦,要是有现成的类库是不是更完美?

今天这里我们介绍的jQuery类库 tidyTime.js 就可以帮助你实现更友好的显示时间的功能,你可以简单的配置和使用即可生成以上的时间显示方式。

帮助更语义化的显示时间的jQuery插件 - tidyTime.js

如何使用

导入类库:

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

标签: jQuery, 分享, jQuery插件, tidyTime.js

阅读更多

帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit

帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit

如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择。

它是一个开源的jQuery插件,可以帮助大家快速针对页面元素来生成固定页面的效果。往往大家在开发导航栏的时候,需要类似这样的功能。

主要的特性

  • 支持多个元素的固定展示
  • 支持元素展示的位置及其viewport
  • 使用非常简单,类库非常小

如何使用

$("#sticky_item").stick_in_parent() 

或者

$("#sticky_item").stick_in_parent(options) 

网站地址:http://leafo.net/sticky-kit/

标签: jQuery, jQuery插件, sticky

阅读更多

JQuery插件:动态列和无间隙网格布局Mason.js

JQuery插件:动态列和无间隙网格布局Mason.js

在线演示

JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest)。这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘。 Mason.js是一个jQuery插件,巧妙地填充了这些间隙。

当创建一个网格时候,插件就开始计算这些间隙,然后就使用预定义的元素或是在网格中复制的内容来填充这些间隙。

可以定义用于元素的大小,列/行的大小,断点的大小,或者布局是流动还是固定的。

网站: http://masonjs.com/

via 极客社区

标签: jQuery, 分享

阅读更多

实现单页面导航效果的jQuery插件 - SMINT

实现单页面导航效果的jQuery插件 - SMINT

在线演示

实现单页面导航效果的插件很多,今天这里我们介绍一款比较酷的jQuery插件,可以快速的帮助你实现滚动效果的导航,而且UI设计比较漂亮,适合需要快速实现页面导航的朋友。

主要特性

  • 自动生成贴边式的导航菜单(sticky navigation)
  • 无需自己定义CSS来自定义样式,几乎是ready-to-use
  • 代码简单并且轻量级

如何使用

JS代码如下:

$(document).ready( function() {   $('.subMenu').smint(); });

实现单页面导航效果的jQuery插件 - SMINT

网站地址:http://www.outyear.co.uk/smint/#

via 极客标签

标签: jQuery, 分享, jQuery插件, 导航菜单

阅读更多

帮助你生成超酷计时器和时钟效果的jQuery插件 - FlipClock.js

帮助你生成超酷计时器和时钟效果的jQuery插件 - FlipClock.js

在线演示

FlipClock.js 是一款功能强大并且支持自定义的时钟和计时器的jQuery插件,和其它的jQuery时钟插件不同,它拥有更强大API帮助你生成自定义的效果。

主要功能

  • 生成一个时钟
  • 生成一个计时器
  • 生成倒计时器
  • 使用纯CSS生成的主题
  • 简介干净的语法
  • 整个代码都是使用重用的对象实现
  • 完整特性的开发人员API帮助你实现真正的自定义时钟

网站地址:http://flipclockjs.com/

via 极客标签

标签: jQuery, 分享, jQuery插件

阅读更多

支持Lazy loading的图片画廊jQuery插件 - Least.js

支持Lazy loading的图片画廊jQuery插件 - Least.js

在线演示

Least.js是一个jQuery开发的图片画廊,可以用来展示Pininterest风格的图片布局,它将无需的列表项目通过随机方式来加载。如果你点击任何图片的话,并不显示一个更大版本的图片,而是滑动其它的图片,在顶端生成更大的图片,类似Google图片搜索风格。

这个插件使用HTML5/CSS3的特性并且支持响应式的布局。

如何使用

导入类库

JS

<!-- least.js CSS-file -->
<link href="css/least.min.css" rel="stylesheet" />
<!-- jQuery libary -->
<script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>
<!--…

标签: 分享, jQuery, CSS3, HTML5, js图片特效

阅读更多

响应式的无限滚动全屏dribbble作品集布局展示效果

响应式的无限滚动全屏dribbble作品集布局展示效果

在线演示/下载

大家还记得前面分享过的两个魔术布局效果吧:

今天分享一个使用jQuery sly插件构建的全屏响应式布局布局效果,支持无限滚动。

相关插件:

  • Jribbble :一个帮助你方便调用dribbble API的jQuery插件
  • Sly:一个帮助你生成水平方向滚动效果的jQuery插件

主要Javascript代码:

 var options = {
scrollBy: 200,
speed: 200,
easing: 'easeOutQuart',
scrollBar: '#scrollbar',
dynamicHandle: 1,
dragHandle: 1,
clickBar: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1
};
var frame = new Sly('#frame',…

标签: jQuery, jQuery插件, 原创

阅读更多

下一页

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

?ü?à

今日推荐