6 个效果震撼的 jQuery 图片播放器

很多时候,尤其是当我们需要展示或者宣传自己的产品时,我们都会用到图片轮播的特效,但是,选择什么样的图片播放器更实用、更美观、更大气呢?下面就给大家推荐几款简单实用却又美观大气的jQuery图片播放器,希望能给大家带来帮助。

1、jQuery图片水平播放插件

这是一个非常简洁但又十分实用的jQuery图片水平播放插件,这个jQuery图片播放插件允许你自己定义同时滚动几张图片,并且滑动很平滑。

2、jQuery仿苹果图片播放器

这是一款基于jQuery的仿苹果样式的图片播放器,这个图片播放器配置简单,外观简洁但不是美观,和苹果的特点非常相符。这个图片播放器非常适合放在你的首页上作为产品图片轮播组件。

3、jQuery幻灯片式播放的相册插件

这是一款基于jQuery的相册插件,该jQuery图片播放插件将相片的缩略图展示在一个导航网格中。我们不仅可以手动地点击按钮切换当前的图片,也可以让相册自动播放图片,当然也可以展开网格点击缩略图来浏览整张图片。

4、jQuery图片水平滚动插件

这是一款基于jQuery的图片水平滚动插件,这个插件在滚动图片的时候十分流畅,同时支持自动播放,你也可以利用鼠标滚轮来使图片左右滚动。

5、jQuery图片播放插件

这是一款基于jQuery的图片播放插件,一共分5屏,有JS代码基础的朋友也可以根据自己的需求修改需要展示的图片数量,这个jQuery图片播放插件整体滑动比较流畅,兼容所有主流浏览器。

6、jQuery图片层叠展示特效

这是一款基于jQuery的图片展示插件,该图片展示插件将图片交错地叠在一起,当鼠标点击图片时,下一张图片将会浮现上来,效果非常棒。

以上就是比较实用的jQuery图片播放器,希望得到大家的支持。

来自html5_dev的专栏

6 个基于 jQuery 的表单向导插件推荐

表单向导可以很好地引导用户进行一步一步的操作,从而降低用户错误输入的几率。尽管互联网中有大量的类似插件,但真正好用的不多。

本文整理了6个比较优秀的表单向导插件,希望能够为你带来帮助。

1. Smart Wizard

这是一个灵活的向导插件,可以将内容分成几部分,以节省页面空间。同时,还提供了一个灵活的、时尚的用户界面。

源码 / 演示

2. jquery.quickWizard

该插件可以将一系列表单元素转换成简单的向导模式。可以和jQuery验证插件、jQuery UI效果和jQuery过渡插件结合使用。

源码 / 演示

3. jQuery Formwizard Plugin

该插件可以用来创建向导形式的表单,且在向导步骤切换时无需重新加载页面。

源码 / 演示

4. jWizard

用于创建向导式表单的jQuery UI部件。

源码 + 演示

5. jQuery Stepy

该插件基于FormToWizard,可以产生一个可定制的向导。

源码 + 演示

6. FormToWizard plugin

这个详细的教程将告诉你如何把一个长表单转换成拥有几部分的步进式表单。另外,还提供了一个插件。

源码 / 演示

英文原文:6 jQuery Form Wizard Plugins

最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天的这篇文章中,我们将介绍一组相关CSS和javascript的强大教程和插件,希望大家喜欢!

CSS动画和过渡效果

随着CSS3标准的来到,CSS过渡效果和动画效果常常应用到互动的用户体验中,设计师可以通过CSS创建出令人惊叹的效果和体验,这里我们将挑选最棒的特效,希望大家能够从中受益。

使用jQuery和CSS3创建一个全屏幕幻灯效果

使用jQuery和CSS3创建一个全屏幕幻灯效果

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

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

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

互动的CSS3光线效果

使用3D变形,CSS梯度和Mask来来实现的光线效果,使用box-shadow和transform实现的阴影。

CSS3 12面体

一个超棒的实验12面体,使用CSS变形和js脚本生成

CSS 3D 光线引擎

一个使用webkit对象实现的JavaScript类库可以添加简单的光线效果到DOM元素,同时你也可以添加其它引擎

3D Thumbnail Hover Effects With CSS

使用CSS3 3D变形生成的折叠效果,超棒并且整洁的动画效果

Slide In Image Boxes

当悬浮对象后创建滑进效果

CSS3 bitmap graphics

使用CSS生成的bitmap图形,没有图片,没有canvas,没有其他标签,使用CSS梯度来生成界面

Paperfold CSS

一个折叠效果的留言插件。

Beercamp: An Experiment With CSS 3D

一个帮助你了解SVG和CSS能够实现什么效果的文章。

Covers: A JS / CSS Experiment

使用CSS和javascript生成的音乐封面

Animation on Apple’s page

apple网站的iPhone 4S页面上应用的效果

Experimental animations for image transitions

一个3d图形过度效果,使用CSS3动画和jQuery

Maintaining CSS style states using “infinite” transition delays

这个演示允许你使用d-pad来移动角色,没有使用任何javascript。主要效果使用无限的过渡效果延迟。

CSS 3-D clouds

使用js和CSS3变形创建的3D云

动画弹出个人信息框

使用css过渡来实现的动画弹出profile菜单

Animated Profile Popover With CSS

CSS3 scrolling effects

各种滚动效果的类库,例如,curl,波浪,反转,飞行等等,使用CSS3和js实现。

CSS3 Scroll Effects

Spin those icons with CSS3

一个简单的创建干净并且滚动的社交图标的文章

Scrolling the Z Axis with CSS 3D Transforms

如何创建z-scroll效果的文章

实用的CSS技巧

CSS3 Family Tree

不使用flash或者javascript,而只使用CSS显示组织结构和家族图谱的演示 ,拥有悬浮效果。一定要看看这个文章Introduction to CSS Pseudo Element Hacks.

CSS3 Family Tree

iOS-style popover

一个简单的生成ios选择框及其悬浮效果的技巧。

iOS-style Popover

Timeline-Style Comments

一个干净并且简单的技巧来展示时间轴类型的留言方式

CSS Table Grid

非常棒的一个用来对齐列的技巧。

CSS Table Grid

Confirmation Feedback Buttons

这个文章介绍了如何根据不同状态来创建按钮的技巧。

纯CSS实现的3D简洁按钮设计

纯CSS实现的3D简洁按钮设计

分享来自Zocial的72个超棒免费CSS3按钮

分享来自Zocial的72个超棒免费CSS3按钮

A calendar in CSS3 and jQuery

一个帮助你使用一些jQuery动画创建CSS3日历的教程。

Outdenting properties for debug CSS

学习如何debug CSS,一个简单的技巧就是标志一个CSS属性做为临时属性或者debug属性,然后将它添加到0列中去。

Outdenting properties for debug CSS

Show Markup in CSS Comments

如何添加一些基本的标签到CSS注释中去的一篇文章

Show Markup in CSS Comments

Selectively displaying data

这个技巧展示了如何选择性的显示内容,并且添加响应式的断点来创建响应式的,复杂的多列表。

Remove Margins for First/Last Elements

如果你想删除顶端或者左边的margin,或者右边,下面的magin,你可以使用:first-child和:last-child

CSS Diagnostics Stylesheet

一个非常有用的代码片段帮助你debug你的CSS,或者找到HTML中的错误

Radio Buttons With Two-Way Exclusivity

学习:empty伪类选择其和jQuery,保证当你点击一个radio按钮的时候,其他列都关闭

Radio Buttons with 2-Way Exclusivity

Tabbed Navigation With CSS

一个优雅的带有下拉菜单的tab导航菜单 ,没有javascript。非常干净的解决方案。

Tabbed Navigation With CSS

Menu With Notification Badges With CSS

一个实用的代码片段用来生成带有通知标识的导航菜单。

Menu with Notification Badges With CSS

Styling based on sibling count (slides)

一个超棒的基于sibling计算的样式。非常实用的技巧。

Styling based on sibling count (Slides)

Stuff you can do with the “Checkbox Hack”

使用checkbox hack技术,你可以使用一个连接label和checkbox来控制其它页面元素 。

CSS3 Facebook Buttons

Nicolas Gallagher开发了一套不同颜色的facebookCSS按钮,大家也可以看看CSS3 Social Sign-In buttonsFree Social CSS3 Buttons

YouTube Popup Buttons

这篇文章讲解了如何创建缺省状态的youtube按钮,拥有非常简单的细微边框斜面并且:hover和:focus时展示

YouTube Popup Buttons

Centering in the Unknown

Chris教你如何实现居中web设计,对于父元素越了解,你就约容易的实现居中。

Micro Clearfix: Force Element To Self-Clear its Children

Chris Coyier 教你几个常用技巧来强制自清理子元素,包含了Nicolas Gallagher的代码片段

Conditional CSS

一个非常不错的技巧帮助你条件式的加载内容。

* { box-sizing: border-box } FTW

一旦你开始在CSS混合匹配各种不同单位, 例如,使用%来设定宽度,em设定padding,px设定border,你肯定遇到box-model问题,你可以使用box-sizing:broder-box来解决,这个IE8支持。

Multiple Attribute Values

如何不使用class来处理多属性值

Diagonal CSS Sprites

使用diagonal来创建sprite。

Double Click in CSS

有没有方法在mobile上检测是否是tap还是双击?阅读这篇文章你就可以了解!

Replacing the -9999px hack (new image replacement)

用来隐藏文本的代码

Fighting the Space Between Inline Block Elements

如何处理inline元素间的小空间,这里chris coyier将讲解几个小窍门

CSS pointer-events and a pure CSS3 animating tooltip

pointer-event属性允许你指定鼠标如何和元素接触的互动方式。看看我们什么时候可以使用它。

Anatomy of a mobile-first responsive Web design

一个来自Brad Frost的如何设计超棒响应式设计的文章 。如何开始?你需要执行什么样的功能?如何使用本地存储和appcache来优化?

SouthStreet Progressive Enhancement Workflow

超棒的响应式设计相关工具。你绝对会用的到!

这里我们收集最新的CSS悬浮和导航特效,希望大家能够喜欢!

分享5个来自tympanus的超炫图片幻灯效果和教程

Tympanus是一个超酷的前端技术博客,经常发布超酷的前端特效教程,今天小编我给大家推荐五个超酷的幻灯效果,希望大家能有机会用在自己的网站和项目中

分享5个来自tympanus的超炫图片幻灯效果和教程

Circle Navigation Effect With CSS3

一个气泡式的CSS3导航

Create a CSS3 Image Gallery With a 3D Lightbox Animation

扩展使用CSS的lightbox画廊,添加了一些hover特效,3D内容旋转 ,全部使用CSS

3D Gallery With CSS3 and jQuery

一个纯3D实现的画廊。 这里查看中文教程

Creative CSS3 animation menus

Mary lou展现给你超酷的导航菜单特效。

How to spice up your menu with CSS3

另外一个超酷的悬浮特效,这里查看中文教程

Create a zoomable user interface

如何使用css transform来创建一个可缩放的CSS3界面

Flipboard Navigation

一个实验性的页面布局

Multi-direction hover

不同方向的hover效果展示

Experimental Hover Effects

悬浮效果的实验性展示

Over-the-top hover effect

CSS和js技巧用来创建顶层的悬浮效果,使用transfomr-origin和transform-style属性及其3D属性。

Accordion With CSS3

来自Mary lou的accordion文章,使用纯CSS3实现。

Expanding Text Areas Made Elegant

一个可自动扩展的textarea实现

Filter Functionality With CSS3

使用CSS3实现的过滤特效

An accessible, keyboard-friendly custom select menu

一个新的方式来实现更强的可用性。

视觉技巧

我们在web开发中使用很多图片和视觉元素来创建特定的效果,使用CSS3,我们不但能够提高加载速度,也可以是的视觉效果更加突出!

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

创建一个图片叠加效果的特效

CSS3 Unfold Map with Pins

一个CSS3实现地图标示的代码片段。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

jQuery插件开发绝对是jQuery框架最强大的一个特性。数以万计的开发人员开发了各种不同功能和特性的jQuery插件,使得jQuery框架如此的成功和流行。随着HTML5,CSS3的发展,javascript在web开发中慢慢变得更加强大,并且更加的可控。在今天的这篇文章中,我们将介绍10款帮助你构建完美UI,特效和动画的jQuery插件。希望大家能够喜欢!

Percentage loader

在我们以前的文章中我们介绍过这个canvas实现的强大进度条,它拥有性感迷人的UI界面,并且能够提供给你方便的callback方法处理进度。相信大家一定会喜欢!

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Knob

Knob是另外一个超棒的旋钮式的UI组件,能够帮助你创建音响上的按钮效果。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Real Shadow

使用这个插件,能够帮助你实现实时的阴影效果,而且能够产生动态阴影变化和颜色。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Photon

一个帮助你实现3D光线效果的引擎。绝对让你震撼!

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

jSignature

一个帮助你创建签名的jQuery插件,允许你的用户使用鼠标,手指或者铅笔生成签名。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

滚动特效

超酷的CSS3实现的滚动特效。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

飞行状下拉菜单特效

这个超棒的下拉菜单,将飞行特效融入了动画中,让它和其它的菜单比较起来更加与众不同。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

SigmaJS

一个超棒的图形绘制类库,使用HTML canvas来绘制图形。可以展示互动的静态图形,也可以快速的展示动态图形。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Refine Slide

一个超棒的CSS过渡和3D变形的幻灯。支持响应式设计,并且可以使用javascript来兼容老版本浏览器。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

SeuratJS

一个超棒扩展自Raphael的javascript类库 ,允许你创建超炫的动画和像素作品。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

 

来源:GBin1.com

10 款简单精美的 jQuery 和 CSS3 表单

表单在网页中扮演着十分重要的作用,从用户登录注册到留言评论,都离不开表单。一个设计精美方便的表单,可以提高用户交互的质量。下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单,希望对大家有所帮助。

1、发光的HTML5表单

这是一款非常漂亮的HTML5登陆表单,当表单获取焦点时,表单四周就会呈现出发光动画的效果,并不断地进行颜色渐变;当表单失去焦点时,停止发光。其中颜色渐变的动画只有基于webkit的浏览器才有效果,比如chrome和safari。

2、带滑动条、日历、取色器等常用功能的HTML5表单

这是一款非常经典的CSS3&HTML5表单,我之所以称之为经典,是因为在这个表单中集成了不少我们开发中常用的控件,比如Slider 滑动条、数字框、日历、取色器、url地址框、email地址框,不像有些CSS3表单,纯粹是外观上比较迷人但功能却不是很丰富。就外观上而言,这个 CSS3表单也非常不错,还算大气。

这个CSS3表单主要用到了Webforms2,Modernizr, jQuery UI以及其他的jQuery插件

3、HTML5 CSS3表单

4、jQuery和CSS3的多步骤注册表单

这是一款基于jQuery和CSS3实现的多步骤注册表单,当用户注册时,该表单将引导用户分步完成注册信息的填写并作注册信息的合法性验证,每一个注册环节都会在下面的进度条中体现出来,在IE8及以上浏览器中测试通过,IE6应该也支持的,大家可以帮忙试试。

5、5个精美实用的CSS3留言表单

在很多网站中,我们经常会用到留言功能,留言一般会让用户填写昵称、电子邮箱、网站和留言信息,如何设计一款漂亮的留言表单?下面分享5个比较精美的CSS3留言表单供大家参考。

6、HTML5 CSS3联系表单

7、HTML5和CSS3登录表单

这是一款基于HTML5和CSS3的登录表单,非常简洁而又美观。该HTML5表单所用到的HTML 5的特性:

◆ placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失
◆ required – 指定该输入元素是否必须提供
◆ autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点
◆ type=”password” – 指定密码输入(非HTML5专有)

8、简单美观的CSS3登录表单

这是一款基于CSS3的简单美观的登录表单,仅仅用几行简洁的CSS3代码,就能打造出一个非常实用的登录表单,一起来看看吧。

9、基于jQuery的仿Twitter下拉登录表单

这是一个基于jQuery的仿Twitter的下拉登录表单,让用户直接可以在当前页面登录而不用跳转到另外的登录页面,另外由于可以展开和折叠,也并不会占用太大空间。

10、下拉菜单表单

以上就是设计比较简单精美的CSS3和jQuery表单,

转载请注明出处:html5_dev的专栏