首页风格
门户
博客

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

分享20个响应式web设计的必备jQuery插件

响应式设计(responsive design)在近些年是非常流行的web设计,能够帮助你有效的针对不同设备的显示屏幕自适应的显示内容,大大的提高了用户的使用体验和web设计的要求,作为最为流行的jQuery来说,也提供了很多现成的插件帮助你实现响应式设计,在今天的这套插件推荐中,我们将推荐给大家20个不错的响应式设计常用插件,希望大家喜欢!

jQuery Masonry - A layout plugin for jQuery

相信大家对于这个jQuery布局插件肯定不陌生,很多网站都使用它开发瀑布流布局。

jQuery Masonry

Isotope - An exquisite jQuery plugin for magical layouts

另外一个不错的布局插件,以前文章中我们也介绍过。

Isotope -- An exquisite jQuery plugin for magical layouts

jQuery picture

以前文章中介绍过这个超棒的响应式图片处理插件

jquerypicture

还记得这个插件吧,针对不同的屏幕设备应用不同大小的图片

Really Simple Slideshow

simpleslider

超简单的幻灯,支持响应式设计

Hoverizr…

标签: jQuery插件, 响应式设计, jQuery, jQuery plugin, responsive, responsive design

阅读更多

使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单

使用jQuery开发超酷带有背景波浪动画效果的单页面网站导航菜单

在线演示  本地下载

在今天的教程中,我们将使用jQuery开发一个单页面的网站,并且添加超酷的波浪动画背景效果到导航菜单上,希望大家能够喜欢!

主要开发使用插件:

  • jQuery one page nav:用来生成单页面网站典型的滚动效果
  • jQuery scrollTo.js:单页面插件依赖类库
  • jQuery background position:用来生成动画背景效果
  • jquery.animate-shadow-min.js:用来生成背景阴影效果
  • jQuery easing 1.3.js:用来添加更多生成动画效果 
  • Cufon-yui.js:cufon类库,用来生成更加漂亮的字体
  • fixie.js:用来辅助自动生成网站中的文字

本篇文章最后将生成一个单页面的网站设计,并且生成漂亮的动态导航按钮,调试环境firefox和Chrome,如果你使用其它的浏览器,可能无法工作。请自己调试。

如何生成按钮的背景波浪动画特效?

在这里,我们将使用动画背景图片来生成波浪的动画效果,在之前的"使用jQuery…

标签: 波浪动画, 单页面导航, 网站设计, 动画背景导航, navigation, one page, jQuery, jQuery plugin

阅读更多

超棒的jQuery密码强度检验插件 - Complexify

超棒的jQuery密码强度检验插件 - Complexify

在线演示  本地下载

密码强度检验插件对于提高用户的密码安全性,起着至关重要的作用,在今天的jQuery插件分享中,我们介绍来自Dan palmer的密码强度检验插件 - Complexify,希望大家喜欢!

Complexify目的在于提供一个有效的密码复杂度验证手段,提示用户的密码强度,并且强制用户输入足够安全的密码搭配。

如何使用

倒入类库:

<script type="text/javascript" src="/js/jquery.complexify.js"></script>

将插件绑定到密码字段:

$("#password").complexify(options, callback(valid, complexity){...});

相关参数请参考如下:参数说明

在线演示

javascript

   $(function(){

标签: 密码强度, password strength, complexify, jQuery, jQuery plugin

阅读更多

超棒的jQuery响应式图片处理插件:jQuery picture

超棒的jQuery响应式图片处理插件:jQuery picture

在线演示  本地下载

响应式的网站设计中,很重要的一个部分就是图片的响应式设计,今天我们将介绍一个超棒的帮助你生成响应式图片设计的jQuery插件 - jQuery picture。使用它能够帮助你快速的生成支持响应式设计的图片。

主要特性

  • 插件非常小,压缩版2kb
  • 支持figure标签及其新加入的picture标签
  • 支持主流浏览器 
  • 使用方便

如何使用

初始化js插件:

    $(function(){
        $('figure, picture').picture();
    });

HTML:

    <figure data-media="http://placehold.it/370x185" data-media440="http://placehold.it/440x220" data-media600="http://placehold.it/600x300"…

标签: 响应式图片, 响应式插件, responsive picture, jQuery, jQuery plugin

阅读更多

分享10个超棒的文字排版相关jQuery插件

文字排版在网站设计中非常重要,但是往往大家都会有意无意的忽略它们。在今天这篇文章中,我们将介绍一套超棒的字体排版相关的jQuery插件,希望大家喜欢!

FixText.js

FitText是一个简单的jQuery插件,能够帮助你自动的创建符合父元素宽度的字体。非常适合应用到响应式的标题内容中去

分享10个超棒的文字排版相关jQuery插件

Lettering.js

虽然在CSS3中包含了@font-face,大大的提高了排版,但是并没有提供基于字母的控制。如果你需要控制单独的字母的话,这个插件肯定是你需要的。

分享10个超棒的文字排版相关jQuery插件

Kern.js

当需要设计或者开发前端代码的时候,我们需要能够有效地测试。这个其实不是一个插件,而是一个书签,允许你编辑网站,字体缩放或者旋转等等,非常不错的一个测试工具

分享10个超棒的文字排版相关jQuery插件

SlabText.js

一个非常有用的jQuery插件,能够帮助你把标题分割到不同的行中,有效地解决行宽度问题,这意味着当你的用户使用不同的浏览器宽度的时候,都可以让标题看上去非常漂亮,绝对是响应式设计的必备插件。

分享10个超棒的文字排版相关jQuery插件

标签: 字体排版, 文字排版, typograph, jQuery, jQuery插件, jQuery plugin, 插件大全

阅读更多

一个超棒的消息提示jQuery插件 - Noty

一个超棒的消息提示jQuery插件 - Noty

在线演示  本地下载

前面我们介绍过一款基于jQuery,backbone.js和underscore.js的消息提示框架,今天我们介绍另外一款jQuery的消息提示插件 - Noty。使用它能够帮助我们快速创建,警告,提示和错误信息框。大家肯定都使用过缺省的alert('..')代码吧,使用Nody能够创建出漂亮功能更强大的消息提示,希望大家喜欢!

主要特性

  • 内建了alert,warning和error,success,information和confirm对话框
  • 支持主题开发
  • 完全可定制
  • 允许动画定制
  • 支持不同的callback方法(onShow,afterShow,onClose,afterClose)等

如何使用

使用非常简答,你导入对应类库,如下:

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

标签: jQuery, jQuery插件, jQuery plugin, 消息提示插件, alert, error, warning

阅读更多

分享9个单页面网站开发必备jQuery插件

单页面网站作为简单快捷,易于维护的页面设计方案,越来越受到工作室,作品集,或者个人博客类网站用户的青睐,我们可以使用不同的特效来使得页面更加的丰富和炫动,今天我们将介绍几款可以作为单页面开发的jQuery插件,帮助大家快速简便的实现一个单页面的网站设计,希望大家喜欢!

jQuery one page nav 

使用这个插件,可以帮助你快速的搭建一个滚动的页面导航,如果你需要比较简单直接的方式开发一个单页面的网站,这个插件是一个不错的选择。 

分享9个单页面网站开发必备jQuery插件  

jQuery ScrollPath

jQuery ScrollPath是一个非常棒的插件,允许你画出自己自定义的滚动路径。HTML元素可以被放置到路径上,而且类似的鼠标滚轮,键盘上下移动键,或者空格都可以帮助你移动到你需要到达的元素位置。并且一个可选的自定义滚动条可以帮助你方便的点击和拖拽滚动。而且插件允许你使用CSS变形旋转整个页面。

分享9个单页面网站开发必备jQuery插件  

Ascensor.js

使用这个jQuery插件可以帮助我们定位页面任何内容块到画布,并且可以使用键盘来浏览。而且这个部分可以被上下左右的导航和浏览。 

分享9个单页面网站开发必备jQuery插件 

Curtain.js

curtain.js是一个用来使用自定义的窗帘效果显示多个固定面板的jquery插件,拥有非常棒的滚动特效。

分享9个单页面网站开发必备jQuery插件 

Zoonooz.js 

一个缩放的插件,但是可以用来定位单页面中的不同区域 

分享9个单页面网站开发必备jQuery插件 

Pagify.js 

这个插件可以用来创建单页面的网站,这个插件的实现方式是将不同菜单中的内容保存到不同HTML文件中,并且通过定义的div来加载不同的菜单项内容。 

分享9个单页面网站开发必备jQuery插件 

JustaPage

Justapage不仅仅是一个插件,还是一个用来设计单页面网站的模板,这个模板是跨浏览器兼容的,并且支持移动设备!

分享9个单页面网站开发必备jQuery插件

SuperScrollrama

这个超棒的插件可以帮助你生成视差滚动特效,如果你希望你的网站更酷一些,那么就整合这个插件吧!

分享9个单页面网站开发必备jQuery插件

Waypoints

Waypoints可以用作页面内滚动操作的单页面导航设计插件。它可以让你方便的处理页面滚动事件,你可以比较自由的在自己的UI中使用这个插件控制页面滚动事件。

分享9个单页面网站开发必备jQuery插件 

标签: 单页面网站, 单页面网站设计, single page, single page design, jQuery plugin, jQuery插件, jQuery插件大全

阅读更多

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

jQuery插件开发绝对是jQuery框架最强大的一个特性。数以万计的开发人员开发了各种不同功能和特性的jQuery插件,使得jQuery框架如此的成功和流行。随着HTML5,CSS3的发展,javascript在web开发中慢慢变得更加强大,并且更加的可控。在今天的这篇文章中,我们将介绍10款帮助你构建完美UI,特效和动画的jQuery插件。希望大家能够喜欢!

Percentage loader

在我们以前的文章中我们介绍过这个canvas实现的强大进度条,它拥有性感迷人的UI界面,并且能够提供给你方便的callback方法处理进度。相信大家一定会喜欢!

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Knob

Knob是另外一个超棒的旋钮式的UI组件,能够帮助你创建音响上的按钮效果。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Real Shadow

使用这个插件,能够帮助你实现实时的阴影效果,而且能够产生动态阴影变化和颜色。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Photon

一个帮助你实现3D光线效果的引擎。绝对让你震撼!

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

jSignature

一个帮助你创建签名的jQuery插件,允许你的用户使用鼠标,手指或者铅笔生成签名。…

标签: jQuery plugin, jQuery插件, canvas, svg, css3

阅读更多

使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用

使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用

在线演示  本地下载

大家在网站开发和web应用中常常需要处理图片,因为用户上传的图片往往尺寸大小各不相同,如何能够生成统一尺寸的缩略图往往是让我们头疼的问题,常规的方式基本都是使用后台程序PHP,JSP等处理上传后的图片,针对网站或者应用具体需要来切割指定大小的缩略图。主要问题在于你需要开发对应后台相关程序,并且你一旦指定了缩略图大小后,以后如果希望能够随时修改的话,往往需要对后台代码进行修改,非常麻烦!今天我们将介绍一款超强的jQuery缩略图生成插件 - NailThumb,使用这个插件可以帮助你在前台生成无图像扭曲的缩略图,而且支持前台裁剪,添加图片说明及其动画等功能,相信大家一定会喜欢!

主要特性

  • 自动处理图形分别率,不会生成扭曲的图片
  • 能够添加缩略图特效
  • 支持裁剪
  • 方便的添加图片说明

如何使用

导入jQuery类库,插件js和css,如下:

<link rel="stylesheet"…

标签: jQuery, jQuery缩略图插件, jQuery插件, jQuery plugin, NailThumb, js裁剪, js缩略图

阅读更多

下一页

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

?ü?à

今日推荐