首页风格
门户
博客

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

开源javascript/html/css的在线运行和调试 - editr

开源javascript/html/css的在线运行和调试 - editr

大家肯定熟悉极客社区的gbdebug,jsfiddle和jsbin等在线调试和运行服务,今天这里我们介绍一个开源的在线运行服务,你可以非常方便的整合到自己的网站中。

主要特性

  • 依赖jQuery和ACE Eidtor
  • 配置简单a
  • 支持单页面多个实例
  • 可以通过JS对象或者HTML属性来配置

如何使用

导入js:

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<script src="/editr/editr.js"></script>

导入css:

<link rel="stylesheet" href="/editr/editr.css">

HTML代码:

<div…

标签: HTML, 分享, javascript, CSS

阅读更多

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

还记得Emmet(即Zen coding)吗?最棒的书写HTML代码的利器之一,能够帮助你快速书写HTML代码的工具。在今天这篇文章中,我们将要分享7个超酷的Emmet书写HTML的技巧,希望大家喜欢!

1. 跳过Div

第一个小技巧就是跳过div,Emment非常清楚你需要输入什么内容,你只需要输入class或者是id,Emmet会自动帮助你生成正确的div。如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

大家可以看到,不管你是否添加了div,Emmet都会自动生成需要div元素。

含糊标签名称

这个技巧属于implicit tag names特性,你不需要指定div或者li,Emmet会自动帮助你生成,如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

2. 带有DOM导航的链式缩写

如果你使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法:

  • > 子节点:在DOM树下一层添加创建一个元素
  • + 同级别:在DOM树同一层添加创建一个元素
  • ^…

标签: HTML, Zen-coding, Emmet, 工具

阅读更多

分享一个HTML5画布实现的超酷文字弹跳球效果

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

分享一个HTML5画布实现的超酷文字弹跳球效果

在线演示  本地下载

今天我们分享一个来自于html5canvastutorials的超酷弹跳球效果,这里我们使用纯HTML5的画布来实现动画及其图形。整个效果使用小球来组合生成字体,如果你的鼠标逼近这些小球,它们会四散而逃,当你的鼠标离开后,它们又自动复原,效果很酷,希望大家喜欢!

       <script>
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame…

标签: HTML, HTML5, javascript, canvas, html5画布, 弹跳球, 画布

阅读更多

为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

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

为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣 gbin1.com

我不得不承认,CSS非常棒,但是缺省的语法绝对的烂。你是不是也厌倦了CSS的书写方式呢?特别是当项目越来越大,代码堆积越来越多的时候。如果我们还是继续这种愚蠢的编码方式,那么对于CSS开发的人员来说。绝对是一个不省心的工作!

而当CSS编译器真正来到的时候,完全改变了我们的工作方式。今天我们将要讲解使用CSS编译器的诸多好处并且介绍你如何能够真正在工作中有效使用它。

Time to keep it simple, no time for the stupid!

会议一下作为前台开发人员,你写过多少次这样的代码?

ul { padding: 0px; margin: 0px; }
ul li { padding: 0px 5px; }
ul li a { color: #335345; }
ul li span { color: #434343; }

或许你也感叹过,我到底要写多少个ul li阿? 真是无用功!

没错,的确是!…

标签: HTML, CSS, Javascript, JQuery, Compass, CSS compiler, CSS tools, CSS工具, css编译工具, SASS, Mixins, GBin1.com

阅读更多

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

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

在这篇文章中,我们将分享一些实用的CSS/jQuery代码编写小窍门,小技巧和小花招。包括视觉特效,布局和web表单设计等。希望大家会喜欢!

相关文章:

1. 完美的全页面背景图片

这个技巧允许一个图片填满整个页面,没有任何的空域。图片会根据实际需要缩放并且改变自身尺寸,不产生任何的滚动条

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

2. 非常棒的CSS位置技巧

这里我们将有一个基本的无序list(ul),这个list包含有文字并不排列在其下方的左浮动图片。当然这个技巧也可以在加载其它实例时使用。

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

3. 如何使用CSS来生成超大背景

这个教程使用各种CSS例子来演示如果使用单张或者多张推片来创建一个巨大的背景图片

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

4. 四个生成等高列的方法

这个文章讨论了几种能够兼容各种浏览器的创建等高列的实现方法(包括IE6)。所有的方法都教你如何生成一个3列的布局。

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

标签: HTML, CSS, Javascript, JQuery, Web设计, jquery技巧, css技巧, 设计技巧

阅读更多

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

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

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

在线演示  本地下载

这个教程将实现一个页面部分内容突出显示效果, 大家可能经常见到一些页面组成内容比较多,可能会分散用户的关注点,使用部分内容突出显示,而模糊其它内容会使得用户能够比较专著的阅读页面中自己关心或者感兴趣的内容,今天这个突出内容显示效果就是为了解决这个问题而设计的。

在这个教程中,我们使用了CSS3的transition属性,所以你需要使用现代浏览器来浏览效果,比如:Safari和Chrome。

HTML标签

以下HTML标签包含了页面中需要显示的众多内容块:

<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a href="#">Some…

标签: HTML, CSS, Javascript, JQuery, css3悬浮模糊效果, jQuery模糊悬浮, 模糊, 动画, box阴影, 文字阴影, blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation

阅读更多

分享16个javascript&jQuery的MVC教程

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

2011即将过去我们将在几周后迎来新的一年。 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢!

jQuery MVC

1. AJAX - Spring MVC 3和jQuery的整合

这个教程中我们将使用jQuery的AJAX机制开发一个简单的Spring MVC3应用。我们将介绍如何使用jQuery.post()方法来处理post数据

分享16个javascript&jQuery的MVC教程 by gbin1.com

2. Progressive Enhancement Techniques

如果你开发大量的javascript代码,你就应该考虑使用progressive enhancement模式来工作。基本流程是开发一个无js的基本功能 ,然后使用javascript来增进功能

分享16个javascript&jQuery的MVC教程 by gbin1.com

jQuery with ASP.NET MVC

3. Building Contact Us Form

这个教程中将教会你如何使用jQuery和ASP.NET来开发一个联系我们表单,使用progressive…

标签: HTML, CSS, Javascript, JQuery, JS MVC, javascript MVC框架, jquery MVC框架, MVC框架, MVC架构, MVC架构介绍

阅读更多

分享10个最好的jQuery表单插件

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

作为web设计或者开发者来说,表单是我们经常需要打交道的设计元素之一。不论你开发登陆功能,在线购物功能,或者是注册功能,你都需要使用表单来执行用户输入。但其实并不是很多开发人员都关心开发或者设计表单元素。而表单设计最重要的目的在于能够将表单设计超越它本身结构以达到使用体验及其可用体验的完美结合,因为表单是实现用户和服务器数据交换的重要方式之一。

今天我们将介绍10款我们收集的最棒表单插件,希望大家喜欢!

1. jQuery Form Wizard

jQuery Form 插件可以用来开发无需刷新的基于页面流程的表单设计。这个插件非常易用并且给予开发人员非常大的自由度来设置整个页面流程,并且这个插件还可以根据不同的输入内容来生成不同工作流程的表单。

分享10个最好的jQuery表单插件 gbin1.com

2. Formalize

帮助你在用户的操作环境中有效的控制表单元素而不用明显的修改表单外观,这个工具可以作为webkit版本的表单元素,非常适合开发兼容性界面。

分享10个最好的jQuery表单插件 gbin1.com

标签: HTML, CSS, Javascript, JQuery, form jquery plugin, 表单jquery, jquery表单插件

阅读更多

分享10款最棒的免费HTML5视频播放器

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

最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题。HTML5可以在没有flash的情况下播放视频。现在有很多的漂亮HTML5视频播放界面,包括控制元素,所以你不需要其它的东西来播放视频。这里我们给大家介绍10款最好的免费HTML5播放器,希望大家能喜欢,支持我们,请给我们留言!

The Free HTML5 Video Player

一个免费的开源的使用javascript开发的HTML5播放器。解决了浏览器兼容性问题并且添加了很多非标准的强大功能。

分享10款最棒的免费HTML5视频播放器

VideoJS

videoJS是一个HTML5视频播放器,使用js和css开发,会自动使用一个fallback调用flash来播放视频一旦浏览器不支持HTML5视频

分享10款最棒的免费HTML5视频播放器 gbin1.com

SublimeVideo

一个HTML5的播放器,用户可以在缺少浏览器插件或者flash的情况下播放视频。支持window全屏模式

分享10款最棒的免费HTML5视频播放器 gbin1.com

标签: HTML, CSS, Javascript, JQuery, HTML5, html5 video, html5 video player, html5播放器

阅读更多

分享10个jQuery图片加载插件和教程及其生成器

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

几乎所有经常大量使用图片展示的网站都对针对图片加载执行了一些有效的优化步骤,然而,并不是任何情况都能指望这样做。有时候你的确需要加载非常大的图片,而最后结果往往是图片加载过慢导致页面本身没有加载完整。因此考虑使用一些不错的jQuery插件帮助你异步加载图片以优化页面加载速度往往是一个不错的选择!

Queryloader v2

Queryloader v2简单的扫描指定元素的图片,并且在网站显示之前加载相关图片。

分享10个jQuery图片加载插件和教程及其生成器 gbin1.com

JAIL

JAML是一个异步的图片加载的插件,这个插件非常小(压缩版本仅4Kb ),非常小但是很强大。非常适合去加载大尺寸的图片。优化用户使用体验,主要的实现方式是在页面加载后再加载图片。

分享10个jQuery图片加载插件和教程及其生成器 gbin1.com

Lazy load plugin for jQuery

Lazy load是一个jQuery的插件,帮助长页面延缓加载图片。当图片处于用户的viewport之外,先不加载,当用户滚动后,再加载相应的图片。

使用lazy…

标签: HTML, CSS, Javascript, JQuery, 加载中, jQuery lazy loading, lazy loading, ajax loading, 加载中的生成器

阅读更多

分享8个超棒的基于HTML5和jQuery的开发教程

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

分享8个超棒的基于HTML5和jQuery的开发教程

HTML5和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网站。尤其是最近jQuery 1.0的发布,更助力了移动设备的开发。现在已经有很多的开发人员和设计人员开始使用HTML5和jQuery配合开发来显示各种特效。今天我们将给大家推荐8个精心选择的HTML5和jQuery组合开发的教程,希望对大家有帮助,如果你喜欢这些教程,请给我们留言,谢谢!

精选之英文教程

1.  HTML5和jQuery的灰度图片悬浮效果

在这个教程中,作者使用HTML5的canvas将针对网站图片做不同的灰度处理。这个演示中使用HTML5和jQuery的黄金组合来动态的克隆颜色来实现灰度效果。整个显示非常炫。是学习HTML5 canvas的不错实战教程。

分享8个超棒的基于HTML5和jQuery的教程 gbin1.com

2. …

标签: HTML, CSS, Javascript, JQuery, HTML5, jQuery开发教程, html5开发教程

阅读更多

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件

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

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 by gbin1.com

Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本实现及其传说中的jQuery插件实现的颜色选择器,希望对大家工作和项目中有帮助。这里有简单实现的,也有复杂参数的,请大家酌情自己选择使用。谢谢!

jQuery插件类

1. Color Picker

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

2. Farbtasic

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

3. jQuery Colors Pickers HSL

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

javascript脚本类

4. mooRainbow

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

5. ColorPicker 0.9

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

6. ExColor (V 1.2)

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

7.  Flexi Color Picker

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

8. JSColor

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

9.  仿PS的JavaScript Color Picker

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件 gbin1.com

10. colorpickerjs

分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件

来源:分享10个精选的超酷颜色选择器Javascript脚本及其jQuery插件

标签: HTML, CSS, Javascript, color picker, 颜色选择器, jquery颜色选择器, jquery color picker, js color picker, js颜色选择器, js颜色选择

阅读更多

分享另外一个jQuery的超酷幻灯插件:jQuery Chop Slider 2.0

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

分享另外一个jQuery的超酷幻灯插件:jQuery Chop Slider 2.0 - gbin1.com

在线演示2D  在线演示3D   在线下载

 

在线演示(效果)  在线演示(多个)

 

前段时间我们介绍过一款jQuery的超酷幻灯效果插 件:NivoSlider。今天我们将给大家来带另外一个绝对震撼的jQuery实现的幻灯slider插件:Chop Slider。 这个插件拥有了192个不同的变化效果,绝对能够满足你不同的变换需要。而且支持很多2D和3D的特效。更重要的是它支持了非CSS3的效果,这样你可以 有足够的空间去开发一款所有浏览器都支持的幻灯效果。而且支持开发自定义的变化效果。这需要你自己开发。以下是主要特性:

  • 122个2D变换效果:这里有105个效果支持所有的浏览器,除了IE,在IE中的效果可能略有不同。不过总体来说还是很酷的。
  • 60个3D的变换效果:支持所有现代浏览器。支持:Chrome
  • 5个非CSS3的换效果:非常适合不支持CSS3的变化效果浏览器,例如,IE6-9(微软应该努努力了!)
  • 5个移动设备的变化效果:适合于移动设备上使用

标签: HTML, CSS, Javascript, JQuery, jQuery幻灯插件, jQuery幻灯特效, jQuery插件chopslider, chop slider, gbin1.com

阅读更多

下一页

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

?ü?à

今日推荐