首页

关于

分享一款能充分挖掘设计者想象力的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幻灯导航

阅读更多

使用CSS3实现的超酷幻灯图片效果

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

使用CSS3实现的超酷幻灯图片效果

在线演示  本地下载

这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板。主要想法是在面板中使用背景图片,然后在点击标签后使之动画。

HTML标签

HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下:

<section class="cr-container">    

<!-- radio buttons and labels -->
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, jQuery特效, CSS幻灯呢个效果, 纯CSS幻灯

阅读更多

分享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悬浮方法使用

阅读更多

分享最新10款超棒的jQuery插件

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

据最新的消息称jQuery已经应用到了10000个顶级网站中的50%。jQuery社区最让人感到振奋的事情在于他们一直在努力的提供非常不错的jQuery插件,帮助网站开发新的功能。今天我们收集了10个不错的新jQuery插件,希望大家喜欢!

地铁地图视觉插件

允许你使用HTML创建互动的地铁地图视觉效果。基于伦敦地铁的样式,使用光滑的曲线和换乘显示方式,及其45度对角线。

分享最新10款超棒的jQuery插件 gbin1.com

jQuery的网站旅程

允许你创建网站的旅程。可以很方便的给你的访问用户介绍你的网站功能及其互动方式

分享最新10款超棒的jQuery插件 gbin1.com

jQuery的嵌入式帮助系统

jQuery的HOW TO电子帮助插件帮助你生成一个帮助界面,很容易整合到任何的web界面中。特别对于web应用,CMS和电子商务系统有很大帮助

分享最新10款超棒的jQuery插件 gbin1.com

jQuery Runloop插件

使用你选择的keyframes来创建你自己的小runloop,每一个使用代码来执行。你可以在keyframe中添置任何你想使用的代码,很容易的重新组织keyframes,并且使用可重用的代码段或者动画来在runloop中分享使用,允许你基于创建和互动创建更加强大的动画变化效果和互动效果

分享最新10款超棒的jQuery插件 gbin1.com

标签: Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile jQuery插件, jQuery特效, waypoint

阅读更多

分享10款绝对让你心动的jQuery插件

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

jQuery使用事件管理,动画及其AJAX互动来帮助加强Web开发。在这篇文章里我们分享10个非常绝对让你激动的jQuery插件,这些插件能够帮助你开发绝对吸引眼球的web程序。希望大家喜欢!

1. Ninja UI

一个jQuery的插件帮助你创建超级漂亮的web UI界面。拥有按钮,自动补齐,图片,对话框,画布,标签,Slider等组件,支持HTML5浏览器。

分享10款绝对让你心动的jQuery插件 gbin1.com

2. Elycharts

一个纯JS的图表库,使用简单并且支持完整的自定义。帮助你创建漂亮的互动类型图表,拥有很多特性:图例,标签支持,鼠标定位,提示,模板,动画等。

分享10款绝对让你心动的jQuery插件 gbin1.com

3. Timelinr

一个非常不错的jQuery插件,以前的文章中我们曾经介绍过。能够帮助你实现一个漂亮的时间轴特效。支持水平及其垂直方向显示。自定义选项,例如,速度,透明度等,类似的插件还有TimergliderJS

分享10款绝对让你心动的jQuery插件 gbin1.com

4.…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery插件, jQuery特效, 最佳插件, 最好插件

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.