首页风格
门户
博客

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

使用jQuery开发一个带有密码强度检验的超酷注册页面

使用jQuery开发一个带有密码强度检验的超酷注册页面

在线演示  本地下载

在今天的jQuery教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢!

相关的插件和类库

主要功能

  • 注册中包含一个密码强度检验组件,用户需要设置一定强度的密码才可以注册
  • 密码强度使用仪表盘类库justgage来显示,不同的强度的密码将显示不同的颜色
  • 密码强度符合要求后,显示注册按钮

代码说明

HTML:

  <div id="page-wrap">
<div id="title">注册新账号 - gbtags.com</div>
<p>
<input type="text" name="email"…

标签: 密码强度, jQuery密码强度, password strength, jQuery教程

阅读更多

如何在链式操作中使用hide(), delay()和show()?

日期:2012/03/01  来源:GBin1.com

jQuery开发中最快速的编程方式就是链式操作,在开发一个简单的定制加载页面过程中,我需要能够让一个页面元素出现,延时1000毫秒,最后消失,本来这个过程非常简单,我觉得直接使用如下代码即可搞定:

$("#gbin1-text").show().delay(1000).hide();

但是,让我费解的是,这个代码即不出错,也不显示我希望出现的元素,然后消失。

本身这个代码没有任何问题,如果大家尝试使用下面的代码,可以正常工作。

$('#gbin1-text').slideUp(300).delay(800).fadeIn(400);

本身这俩行代码没有太多区别啊,但是上面代码就是无法正常工作,无奈之下,Google了一下,发现原因了。

如果你将以上代码修改为

$("#gbin1-text").show(0).delay(1000).hide(0);

标签: delay(), hide(), show(), Javascript, AJAX, jQuery, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, jQuery Quiz, jQuery测试, jQuery在线检测

阅读更多

分享一款能充分挖掘设计者想象力的jQuery幻灯插件 - Sequence

日期:2012/02/20  来源:GBin1.com

分享一款能充分挖掘设计者想象力的jQuery幻灯插件 - Sequence

在线演示  本地下载

今天我们要介绍一款非常特别的jQuery幻灯插件 - Sequence ,之所有称之特别,是因为它并没有特定的主题显示方式,所有的显示都可以由开发者自己控制和实现。任何类型的内容都可以有效地显示在幻灯中。

因为使用CSS3特效,所以,你需要使用现代浏览器来查看特效,但是也可以很好的支持老版本的留言其,同时它支持responsive布局及其触摸类设备,例如,ipad等。

主要特性:

  • 使用CSS3实现的独特过渡效果
  • 支持所有现代浏览器
  • 很优雅的支持老版本浏览器
  • 支持responsive布局
  • 支持触摸设备和swiping
  • 很多开发特性
  • 使用语义并且使用简单的标签
  • 开源

如何使用?

倒入类库:

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

标签: jquery幻灯插件, sequence.js, HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, UI, 设计, 工具素材, Photoshop, 互联网, 人物, 移动

阅读更多

分享8个帮助你学习快速编程的实用网站

日期:2012/02/20  来源:GBin1.com

作为一个合格的前端开发人员,我们不得不学习很多最新的技术和实现,不论是html5,CSS,CSS3, javascript,还是后台的最新数据库技术nosql。如果你不能有效的学习这些生存技能,意味着你随时被市场抛弃。

为了能够有效而高效的学习各种技术和编程,找到几个非常不错的网站还是很有必要的。,这里我们推荐8个非常不错的技术网站,帮助你有效的快速学习编程,他们带给你的不单单是学习的内容,还有学习的乐趣,enjoy!

Javasript学习: LifeHacker Learn to code

这个网站通过4个课程学习javascript。每一个都配有video并且也提供相关的文章

分享8个帮助你学习快速编程的实用网站

Javasript学习:CodeCademy

一个互动的方式来学习javascript。为了更加有趣,每次你完成一个课程,你可以得到徽章和点数。

分享8个帮助你学习快速编程的实用网站

CSS,CSS3,HTML,HTML5学习:TeamTreeHouse

一个在线付费的学习服务网站,包含了很多最新的技术

分享8个帮助你学习快速编程的实用网站

标签: 学习网站, 学习教程, 编程学习, 编程教程, js教程, html教程, HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, UI, 设计, 工具素材, Photoshop, 互联网, 人物, 移动

阅读更多

使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

日期:2012/02/14  来源:GBin1.com

使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

在线演示  本地下载

今天是情人节,这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节,可能大家使用过很多的评论或者留言系统,基本都是静态输入的形式,今天我们创建的这个留言板灵感来自于一些超棒的网页设计,在用户输入过程中,会动态的显示输入框,产生类似flash的效果。提高用户的体验。希望大家喜欢!

注:由于使用了Cufon英文字体美化UI界面,所有不支持中文输入,如果你需要输入中文,请将Cufon相关代码移除即可。

jQuery插件

1. jQuery validation engine plugin  -  表单验证插件

2. jQuery placehoder plugin  -  输入提示插件

3. jQuery pretty form plugin  -  美化表单插件

4. Cufon …

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, UI, 动态留言, 超酷留言, 表单验证, 表单验证插件, cufon, placehoder, 输入提示

阅读更多

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)

日期:2012/01/21  来源:GBin1.com

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation) gbin1.com

在线演示  在线下载

这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航,包括了16个幻灯,4个一行,一共4行。并且通过了CSS3箭头添加了动画导航效果。而且提供一个迷你的导航条能够帮助用户记录访问过的幻灯页面。希望大家喜欢!

HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fullscreen Javascript Slide navigation | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, jQuery教程, 幻灯导航, 全屏幕幻灯导航, js幻灯导航

阅读更多

分享10个你需要了解的最佳javascript开发实践

日期:2012/01/08  来源:GBin1.com

分享10个你需要了解的最佳javascript开发实践 gbin1.com

Javascript的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。

尽管很多的开发人员都乐于颂扬javascript,但是仍旧有人看到它的阴暗面。

使用很多javascript代码的web页面会加载很慢,过多的使用javascript使得网页丑陋和拖沓。很快如何有效地使用javascript成为一个非常火热的话题。

这里让我们列出10个最佳javascript实践,帮助你有效地使用javascript。

1. 尽可能的保持代码简洁

可能大家都听到过了N遍这个代码简洁问题了。作为一个开发人员你可能在你的代码开发过程中使用了很多次,但千万不要在js开发中忘记这点。

  • 尽量在开发模式中添加注释和空格,这样保持代码的可读性
  • 在发布到产品环境前请将空格和注释都删除,并且尽量缩写变量和方法名
  • 使用第三方工具帮助你实现压缩javascript。

2.…

标签: HTML/HTML5, CSS/CSS3, jQuery, jQuery API, jQuery plugin, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, javascript编写, javascript最佳, javascript技巧

阅读更多

分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果

日期:2012/01/07  来源:GBin1.com

分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果

在线演示  本地下载

今天我们为大家介绍一个使用jQuery实现的缩略图逼近效果。主要的想法是当鼠标接近缩略图后,当前的缩略图会放大,并且周围相邻的缩略图也会相应变大一些,当你移动鼠标时,会影响移动方向上的缩略图大小变化,具体效果请大家查看演示。

你可以在这个网站http://porscheeveryday.com/ 看到这个效果的原型,这里我们使用jQuery实现了一个jQuery版本的基本效果,希望大家喜欢!

在这个教程中,我们将使用James Padolsey jQuery Proximity plugin

HTML标签

以下代码生成一个无序的缩略图并且添加相关图片描述:

<ul id="pe-thumbs" class="pe-thumbs">
<li>
<a href="#">

标签: HTML/HTML5, CSS/CSS3, jQuery, jQuery API, jQuery plugin, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, 逼近悬浮, 悬浮特效, 缩略图悬浮, 缩略图悬浮特效, proximity effect, proximity jquery plugin

阅读更多

使用jQuery开发一个超酷的倒计时效果

日期:2011/01/05  来源:GBin1.com

使用jQuery开发一个超酷的倒计时效果

在线演示  在线下载

今天我们分享一篇来自tutorialzine的教程,本文将使用jQuery开发一个超酷的倒计时效果插件,使用这个插件你可以生成一个非常炫的倒计时器,你可以方便的整合到你需要的web功能模块中,希望大家喜欢!

HTML代码

我们将使用如下代码生成一个倒计时器的界面:

使用jQuery开发一个超酷的倒计时效果 gbin1.com

<div id="countdown" class="countdownHolder">
<span class="countDays">
<span class="position">
<span class="digit static"></span>
</span>
<span class="position">

标签: HTML/HTML5, CSS/CSS3, jQuery, jQuery API, jQuery plugin, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, Countdown, jQuery倒计时器, 倒计时器, 倒计时, timer

阅读更多

jQuery迷你教程之Hover方法

日期:2011/12/31  来源:GBin1.com  

在jQuery开发过程中,我们常常需要设计一些相关鼠标悬浮的元素,比如,生成一个动态的提示菜单,或者悬浮的元素动画或者特效。这个过程往往需要调用jQuery的hover方法。一般使用如下代码:

$('.selectorClass').hover(
function(){
  $(this).stop().fadeTo('slow',0.4);
},
function(){
  $(this).stop().fadeTo('slow',1);
});

其实hover方法和jQuery的俩个方法调用效果一致,mouseleave和mouseenter,因此以上代码你也可以书写为如下形式:

$('.selectorClass').hover(function(){
this.check = this.check || 1;
$(this).stop().fadeTo('slow',this.check++%2==0…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery插件, jQuery特效, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, hover, hover(), jQuery hover, jQuery悬浮方法使用

阅读更多

如何使用jQuery或者javascript处理Cookie?

日期:2011/12/30  来源:GBin1.com

Cookie是我们做前台开发过程中时常需要用到的技术,做为HTML5之前客户端唯一可以使用的本地存储方式,它能够有效的帮助我们实现一些简单数据的本地保存。今天我们介绍使用Javascript和jQuery方式来处理和保存Cookie。

Javascript

javascript处理cookie:

function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+";…

标签: jQuery, jQuery API, jQuery插件, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery cookie plugin, cookie, cookie js, javascript cookie, javascript处理cookie, jQuery处理cookie, jQuery插件处理cookie

阅读更多

jQuery技术在线小测试

日期:2011/11/30  来源:GBin1.com

你对于jQuery有多了解?来试试我们给你推荐的在线测试吧!

标签: Javascript, AJAX, jQuery, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, jQuery Quiz, jQuery测试, jQuery在线检测

阅读更多

下一页

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

?ü?à

今日推荐