首页风格
门户
博客

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

阅读更多

jQuery导航菜单置顶插件 - stickyUp

jQuery导航菜单置顶插件 - stickyUp

在线演示

stickyUp是一款可以帮助你生成置顶效果的jQuery插件,如果你希望生成一个固定页面顶端的导航效果,可以使用stickUp来快速生成。

主要代码如下:

jQuery(function($) {
    $(document).ready( function() {
    $('.navbar-wrapper').stickUp({
      parts: {
        0:'home',
        1:'features',
        2: 'updates',
        3: 'installation',
        4: 'one-pager',
        5: 'extras',
        6: 'wordpress',
        7: 'contact'
      },
      itemClass: 'menuItem',
      itemHover: 'active',
      topMargin: 'auto'
    });
    });
});

Github:https://github.com/LiranCohen/stickUp

标签: #文章, jQuery插件, 导航菜单

阅读更多

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

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

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

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

相关阅读:

10款精挑细选的jquery插件

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

Noty

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

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

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

阅读更多

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

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

作为前端攻城狮的我们,经常需要处理的就是相关表单的一些应用,包括了:

  • 表单美化
  • 表单验证
  • 表单的自动保存
  • 表单功能的增强
  • 等等

如果开发过程中我们没有使用任何的CSS前端框架(例如,Bootstrapfoundation或者pure)的话,我们可能需要自己动手去添加相关的功能,在今天的这篇文章中,我将介绍几款非常实用的JQuery表单插件,帮助你更快更好的完善表单的用户体验,希望大家喜欢!如果你也有相关的表单优化或者用户体验优化的经验,请和我们分享,谢谢!

iCheck

iCheck是一款针对单选框和多选框美化的jQuery插件,你可以使用很简单的代码来完成checkbox和radio的美化,最重要的是它支 持不同皮肤和风格的UI,包括不同颜色的,相对来说,它提供的功能在jQuery插件中来说是非常丰富的,当然,可能有人说了,如果能够针对每一个表单元 素都能提供一个美化解决方案就更好了

jQuery Switchbutton

标签: #文章, jQuery插件

阅读更多

帮助更语义化的显示时间的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插件 - 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插件

阅读更多

响应式的无限滚动全屏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插件, 原创

阅读更多

BookBlock:一个实现翻页效果的jQuery插件

BookBlock:一个实现翻页效果的jQuery插件

在线演示在线演示在线演示在线下载

BookBlock是一个jQuery插件,可用于创建像小册子那样的组件,实现一个"页面翻转"的导航。可以使用任何内容,如图片或文本。这个插件可以实现在需要的时候转换结构(即当翻转页面时),并使用一些阴影效果为页面创建更多的现实感。

BookBlock:一个实现翻页效果的jQuery插件

结构:

<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<!-- custom content -->
</div>
<div class="bb-item">
<!-- ... -->
</div>
<div class="bb-item">
<!-- ... -->
</div>

标签: jQuery, 翻页效果, jQuery插件, bookblock, jquery plugin

阅读更多

超棒的悬浮层式的页面元素注解jQuery插件 - Chardin.js

超棒的悬浮层式的页面元素注解jQuery插件 - Chardin.js

在线演示

还记得我们以前分享的超酷悬浮覆盖式的注释效果吗?今天这里我们分享一个能够帮助你快速的生成类似页面注释效果的jQuery插件 - Chardin.js,使用它可以快速的帮助你生成针对页面元素的注释效果,非常适合你辅助用户了解页面元素功能或者重点显示页面特定部分。

主要特性

  • 使用Bootstrap
  • 支持SCSS
  • 支持主流浏览器
  • 使用简单

如何使用

引用CSS和js,如下:

<link href="chardinjs.css" rel="stylesheet"> 
<script src="chardinjs.min.js"></script>

Javascript:

$('body').chardinJs('start')

HTML:

<img src="img/chardin.png" data-intro="An…

标签: jQuery, 分享, jQuery插件

阅读更多

jQuery的“回到顶端”插件 - ScrollUp

jQuery的

在线演示

Scrollup是一款jQuery的"回到页面顶端"的插件,能够帮助你快速的实现一个完全自定义的"back to top"的功能。

主要参数:

  • scrollName: 'scrollUp', // Element ID

  • topDistance: '300', // Distance from top before showing element (px) 

  • topSpeed: 300, // Speed back to top (ms)

  • animation: 'fade', // Fade, slide, none

  • animationInSpeed: 200, // Animation in speed (ms)

  • animationOutSpeed: 200, // Animation out speed (ms)

  • scrollText: 'Scroll to top', // Text for element 

  • activeOverlay: false, // 这个属性对于开发者来说可能比较有用,帮助你定位"回到顶端"按钮出现时滚动到的页面位置。

使用代码

$(function…

标签: jQuery, 分享, jQuery插件, 回到顶端效果

阅读更多

超棒的页面checkbox和radio美化jQuery类库 - iCheckbox

超棒的页面checkbox和radio美化jQuery类库 - iCheckbox

在线演示

iCheckbox是一个超棒的界面美化Javascript类库。

主要特性

  • 跨浏览器和设备统一的input样式和UI(包括了桌面和移动设备)
  • 支持触摸设备 - iOS,android,blackberry,windows phone
  • 支持键盘控制 - Tab,空格,方向键和其它快捷方式
  • 完全自定义 - 使用任何HTML和CSS来控制输入的样式
  • 轻量级 - 1kb
  • 15个选项来自定义checkbox和radio
  • 8个回调函数支持
  • 6个方法来编程控制
  • 支持任何jQuery的选择器
  • 支持IE7+(如果不使用CSS chain也可以支持ie6),Chrome,Firefox和Safari等浏览器
  • 支持移动浏览器(Opera mini, Chrome mobile, Safari mobile等),支持iOS, Android, BlackBerry and Windows Phone设备

使用代码

// customize all inputs (will search…

标签: UI, jQuery, 分享, jQuery插件

阅读更多

下一页

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

?ü?à

今日推荐