首页

关于

来自于Mozilla Networks演示工作室的超酷CSS3/Javascript动画演示

这个叫做DemoStudio的网站来自于Mozilla Developer networks,收集了很多超酷的CSS3和Javascript特效。因为都是实验产品,所以如果你使用这些技术,有可能在一些老的浏览器,比如,IE中无法正常工作。当然如果你有fallback的话,大可以使用这些技术。相信你肯定会喜欢这些超酷的特效。如果大家喜欢,请给我们留言!

折纸效果

相当不错的折纸效果

Paperfold

RotorJS

旋转3D操作类库 - 轻量级并且可扩展

RotorJS

3D图片过渡

类似flash效果的3D CSS过渡效果

3D Image transition

The Box

一个动画卡片和白纸的3D情节,由回收材料制成。

The Box

3D Flip list menu

一个翻动的3D菜单特效

CSS3 Reflection effect

动画菜单图标

小并且可缩放,纯CSS3实现的动画

Animated Menu Icons

Animated CSS3 Gallery

一个使用淡入缩放图片效果画廊

Animated CSS3 Gallery

The CSS Book

纯CSS实现的3D书效果

The CSS Book

via quaness.com

标签: HTML5, CSS3, Javascript, jQuery, jQuery Mobile, jQuery插件, 图标, 模板, iphone, ipad, 产品, 用户体验

阅读更多

如何在链式操作中使用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, 输入提示

阅读更多

分享一个帮助你了解HTML5各类特性及其推荐应用的网站 - HTML5 Please

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

分享一个帮助你了解HTML5特性应用网站 - HTML5 Please

今天给大家介绍一个非常不错的网站 - HTML5 Please, 如果你到了现在还不知道什么是HTML5,那只能说明你绝对是Out了,或者压根儿您就不是搞网站这块儿的。 开个玩笑,咱言归正传。

HTML5 Please是一个帮助你了解 HTML5,CSS3等特性的网站,如果你需要查询以上相关技术的相关特性的话 ,HTML5 Please是一个不错的工具。它能够帮助你了解相关特性的使用方式。

分享一个帮助你了解HTML5特性应用网站 - HTML5 Please by gbin1.com

简单说来:

  • When Can i Use告诉你浏览器的支持历史
  • Modernizr帮助你检测浏览器的支持特性
  • HTML5 Please帮助并且推荐给你各种特性的实现,并且帮助你应用到你的网站开发中去。

通过HTML5 Please我们能够快速的了解HTML5中特性的推荐使用方式及其执行,如果你对于HTML5不是很了解的话,这是个不错的快速了解HTML5的好网站。

顺便说一句,这个网站的推荐都是来自于很多对于HTML5有很深使用经验的开发人员,这些经验是非常值得大家借鉴的。…

标签: HTML/HTML5, CSS/CSS3, Javascript, ployfill, When Can I Use, Modernizr, polyfills

阅读更多

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

阅读更多

分享6个令人印象深刻的幻灯和演讲稿javascript插件

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

使用HTML,CSS和Javascript来做一个演讲不再是一个不可能的任务。使用现代浏览器支持的CSS3开发幻灯变化不再局限于淡入淡出,滑动等。它允许我们完成非常酷的特效例如旋转,3D变形和变换。

以下我们将介绍6个JS插件将帮助大家完成上面的特效。有一些可以帮助你生成你自己的作品集网站。我个人对于impress.js印象特别深刻。你可以用它来创建不同的幻灯而不依赖于桌面的工具。

impress.js

impress.js是一个演讲工具,灵感来自于prezi.com ,基于CSS3的变形和变换。不是一个简单的演讲稿幻灯。实际上第一次看到时,我不禁感叹太酷了,非常不错的脚本。

分享6个令人印象深刻的幻灯和演讲稿javascript插件 gbin1.com

deck.js

deck.js是一个js类库用来创建一个现代的HTML演讲稿。deck.js非常的灵活,允许高级的CSS和JS的人员创建自定义的样式,但是也为HTML新手提供了模板和主题来创建一个标准的幻灯。

分享6个令人印象深刻的幻灯和演讲稿javascript插件 gbin1.com

reveal.js

一个CSS…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery plugin, javascript演讲类库, js presentation, javascript slideshow

阅读更多

分享超酷的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, 旋转, 轮播, 轮播幻灯

阅读更多

分享一个帮助你迅速生成web页面源代码语法高亮的类库 - Google Code Prettify

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

分享一个帮助你迅速生成web页面源代码语法高亮的类库 - Google Code Prettify gbin1.com

在线演示  本地下载

今天分享一个帮助你迅速生成页面代码语法高亮的类库:Google Code Prettify

主要特性:

  • 能够运行在HTML页面上
  • 即使代码中含有链接,行号也可以正确运行
  • 简单的API : 包含JS和CSS,并且拥有一个onload句柄
  • 轻量级: 下载迅速,并且不会影响页面加载和运行
  • 通过CSS自定的样式. 查看 主题gallery
  • 支持所有的C-like, Bash-like, and XML-like languages.不需要指定任何语言
  • 对于其它语言扩展语言处理,你可以指定语言
  • 跨浏览器支持, code.google.com 和 stackoverflow.com都使用这个类库

如何使用?

第一步:下载代码 http://code.google.com/p/google-code-prettify/

第二步:引入相关代码

<!DOCTYPE html>

<html…

标签: HTML/HTML5, CSS/CSS3, Javascript, 语法高亮类库, 语法高亮, google code prettify, Syntax Highlighting

阅读更多

分享免费的jQuery Mobile Wordpress主题 - jQMobile

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

分享免费的jQuery Mobile Wordpress主题 - jQMobile

jQMobile是wordpress的一个基于jQuery mobile的wordpress主题。能够帮助你迅速的将你的桌面版博客转换成一个移动版本或者平板版本的博客。你同时也可以将它和wordpress mobile pack插件一起使用来生成一个移动版本视图的博客。很轻松的就将一个wordpress博客生成了一个方便的移动设备应用。是不是很方便?希望大家喜欢这个插件。

分享免费的jQuery Mobile Wordpress主题 - jQMobile by gbin1.com

主要特性:

  • 基于 jQuery Mobile框架,强大的移动端解决框架
  • 兼容触摸屏智能手机和平板电脑
  • 包含3个皮肤主题: Default, Valencia, Green
  • 支持ThemeRoller Mobile
  • 支持widget
  • 可适应的布局设计

浏览器兼容:

分享免费的jQuery Mobile Wordpress主题 - jQMobile

主题支持:

分享免费的jQuery Mobile Wordpress主题 - jQMobile gbin1.com

移动设备兼容

分享免费的jQuery Mobile Wordpress主题 - jQMobile gbin1.com

下载地址:http://www.mobilizetoday.com/freebies/jqmobile

在线演示

分享免费的jQuery Mobile Wordpress主题 - jQMobile gbin1.com

来源:…

标签: HTML/HTML5, CSS/CSS3, Javascript, AJAX, jQuery, jQuery API, jQuery plugin, jQuery UI, jQuery Mobile, jQuery插件, wordpress, wordpress插件, wordpress主题, wordpress theme, wordpress移动插件, wordpress jquery mobile插件

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.