首页

关于

分享一款能充分挖掘设计者想象力的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, 输入提示

阅读更多

分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

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

分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

在线演示  在线下载

今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen,它能够帮助网站实现针对阅读内容的全屏显示功能。

这个插件基于Full Screen API.,目前有半数的浏览器支持这个API。

  • 支持 Firefox 10, Safari and Chrome;
  • 使用requestFullScreen() 方法触发;
  • 可以支持任何元素的全屏显示,而不仅仅是页面
  • 由于安全原因,只支持用户触发全屏
  • 也由于安全原因,输入被严格控制,除了方向键其它按键不能使用
  • API还不完善,只能使用浏览器指定方法(前缀为moz and webkit)

jQuery代码

jQuery(document).ready(function($){
if($.support.fullscreen){

标签: jQuery, jQuery API, jQuery plugin, jquery fullscreen, jquery全屏显示, 全屏阅读, 指定元素全屏

阅读更多

分享一个超酷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幻灯

阅读更多

分享超酷的jQuery相册插件 - fotorama

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

分享超酷的jQuery相册插件 - fotorama gbin1.com

在线演示  本地下载

今天我们介绍一款jQuery的相册插件- fotorama,它是一款使用创新控制元素的图片库插件。支持桌面和移动设备例如,iphone及其其它的移动设备。使用简单,并且免费使用。

HTML标签

<div id="fotorama">
<img src="images/1.jpg" alt="photo #1" />
<img src="images/2.jpg" alt="photo #2" />
<img src="images/3.jpg" alt="photo…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, 图片库幻灯, 图片库插件, 相册插件, jquery相册插件, jquery图片库

阅读更多

分享一款强大的jQuery旋转轮播式插件 - CarouFredSel

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

分享一款强大的jQuery旋转轮播式插件 - CarouFredSel gbin1.com

在线演示  本地下载

今天我们介绍一款使用简单,支持自定义样式并且灵活健壮的jQuery旋转轮播插件:CarouFredSel ,能够帮助你迅速的构建一个轮播式的幻灯展示,使用简单,功能强大,希望大家喜欢!

主要特性:

  • 支持完整自定义和皮肤
  • 支持responsive/fluid/liquid,保证各种客户端的显示
  • 支持可变的显示项目个数
  • 支持键盘和鼠标导航
  • 7个内建的效果: none, scroll, directscroll, fade, crossfade, cover and uncover.
  • 内建自定义的智能事件和加载选项
  • 定义的高和宽中保证显示项目对齐(左/中/右).
  • 支持动态添加和删除显示项目
  • 幻灯创建后也可以支持获取,重置或者设置配置选项

如何使用?

以下是基本使用代码范例,如果大家有兴趣,可以参考CarouFredSel网站上的其它例子

HTML代码:

<div…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, CarouFredSel, 旋转播放插件, carousel, jquery, plugin, infinite, circular, circulair, carousel, caroufredsel, scroll, fade, crossfade, cover, uncover, imagescroller, contentslider, jcarousel, cycle, 旋转, 轮播, 轮播幻灯

阅读更多

分享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

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.