jQuery
手册网
Hi,我也是一名程序猿我建立这个手册网(shouce.ren)是为了和同行的朋友一起成长。
展开
-
一款实用的 jQuery progression 表单进度
progression.js是一款表单输入完成进度插件。支持自定义提示框大小、方向、左边、动画效果、间距等,也支持是否显示进度条、字体大小、颜色、背景色等。在线实例实例演示使用方法<form id="myform"> <p> <label>点击一个字段</label> ...2016-07-21 08:57:42 · 114 阅读 · 0 评论 -
jQuery Drop-Down 自定义下拉框
在线实例实例演示使用方法 <section class="main"> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-1" tabindex="1">2016-07-22 08:55:27 · 229 阅读 · 0 评论 -
BootstrapValidator 验证表单
在线实例实例演示使用方法<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> <div class="form-group"> <label class="col-2016-07-25 09:02:31 · 327 阅读 · 0 评论 -
一款经典的 jQuery Lightbox 灯箱效果
一个灯箱效果的图片展示插件。版本:jQuery v1.2.3+jQuery Lightbox v2.7.1github实例预览使用方法载入 CSS 文件<link rel="stylesheet" href="lightbox.css">复制载入 JavaScript 文件<script sr...2016-07-26 08:58:09 · 182 阅读 · 0 评论 -
jQuery LazyLoad 图片延迟加载
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。版本:jQuery v1.4.4+jQuery Lazy Load v1.7.2注意事项:需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original ...2016-07-27 08:45:48 · 116 阅读 · 0 评论 -
jQuery Jcrop 图像裁剪使用实例教程
Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能。版本:jQuery v1.5.1+jQuery Jcrop v0.9.12github在线实例实例预览 jQuery Jcrop 图像裁剪插件 Hello World 基础示例实例预览 jQuery Jcrop 图像裁剪插件 Basi...2016-07-28 09:02:35 · 561 阅读 · 0 评论 -
jQuery cxScroll 间歇式无缝滚动
版本:jQuery v1.7+jQuery cxScroll v1.2.2注意事项:内部会自动创建 prev 及 next 切换按钮,也可以在外部直接创建,若外部已创建或设置prevBtn: false及nextBtn: false,内部将跳过此步骤;若(滚动的列表宽度 ≤ 父元素的宽度),则不会自动创建 prev 及 next 切换按钮,也不会自动滚动。git...2016-07-29 08:49:35 · 208 阅读 · 0 评论 -
jQuery cxSlide 焦点图轮换
cxSlide 是一个简单易用的焦点图展示插件,支持水平、纵向切换,透明过渡切换。已支持 CSS 动画过渡切换。通过 CSS 动画切换,可以展示更多效果。版本:jQuery v1.7+jQuery cxSlide v2.0.2注意事项:内部会自动创建切换按钮元素,也可在外部直接创建,若外部已创建,内部将跳过此步骤;展示图片未超过 1 张时,会隐藏切换按钮元素。...2016-08-01 09:07:19 · 188 阅读 · 0 评论 -
一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。版本:jQuery v1.3.2+在线实例实例预览 kxbdMarquee 模拟 Marquee 无缝滚动使用方法载入 JavaScript 文件<script src="jquery....2016-08-02 08:37:54 · 273 阅读 · 0 评论 -
jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮。版本:jQuery v1.4.3+jQuery Wookmark Load v1.4.8注意事项:项目中的 img 元素的 width 和 height 属性需要写,否则定位会不准确。(可以用 JavaScript 实时获取图片的宽高,但图片数量过多时,...2016-08-03 16:52:16 · 127 阅读 · 0 评论 -
jQuery corner 圆角插件实例代码
jquery.corner是一款强大的圆角插件(所产生的不止只是圆角效果),兼容包括IE6、IE7、IE8、firefox、Opera 、Safari、Chrome等主流浏览器,唯一的缺点是为了产生边角效果,生成了相当数量的层,加重了浏览器的负担。jquery.corner支持的所有边角样式,默认为圆角。版本version 2.11使用方法$('.de...2016-08-04 08:51:36 · 115 阅读 · 0 评论 -
很常用的一款jQuery soChange幻灯片
soChange一款多很经典的幻灯片的jQuery插件。实例预览引入文件<link rel="stylesheet" type="text/css" media="all" href="style.css" /><script type="text/javascript" src="jquery1.4.2.min.js"&2016-08-05 08:48:12 · 220 阅读 · 0 评论 -
jQuery coveringBad 效果对比
Covering-Bad 是一个可拉动大小的元素,覆盖在原有的元素上面,从而两者进行对比。在线实例实例演示1 实例演示2使用方法<div class="covered" data-passive="images/2.jpg" data-active="images/1.jpg"> <div class="handle">&2016-08-08 08:34:33 · 108 阅读 · 0 评论 -
Ideal-image-slider 幻灯片实例演示
在线实例实例演示 默认效果实例演示 淡入淡出实例演示 带链接实例演示 项目导航实例演示 带标题描述实例演示 回调函数实例演示 自定义切换使用方法<div class="demo"> <div id="slider"> <img src="/api/jq/5733e32bf23bb/img/...2016-08-09 09:01:24 · 168 阅读 · 0 评论 -
jQuery Flipping Gallery 翻转画廊
在线实例简单配置翻转方向鼠标滚动自动播放绑定事件使用方法<div class="main"> <div class="page_container"> <div class="gallery"> <a href="#">2016-08-10 08:39:19 · 116 阅读 · 0 评论 -
jQuery pgwslideshow 空间相册
一个响应式相册插件,你可以自定义幻灯片最大高度,滑动效果,是否显示控制按钮,自动轮播或间隔时间。pgwslideshow相册插件有以下特点 支持响应式 支持桌面和移动设备 代码简单,只有4kb不到在线实例实例演示使用方法<ul class="pgwSlideshow"> <li><img src="img/d...2016-08-12 08:35:17 · 128 阅读 · 0 评论 -
jQuery eislideshow 图片轮播
在线实例基础演示自动播放使用方法<div id="ei-slider" class="ei-slider"> <ul class="ei-slider-large"> <li> <img src="images/large/4.jpg&quo2016-08-13 08:30:17 · 152 阅读 · 0 评论 -
jQuery Devrama Slider 幻灯片
Devrama Slider 是个图像滑块,带有许多非常有趣的特性。它不仅支持图像还支持 HTML 内容。 响应式 方便 CSS3 转换 转换效果 进度条 高级的预加载和延迟加载 CSS 自定义 用户可以定义导航或者控制器在线实例实例演示使用方法<div class="slide1" data-lazy-background="4247776023_81a3f048...2016-08-16 08:33:39 · 135 阅读 · 0 评论 -
jQuery Flickerplate 幻灯片
Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb。它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备在线实例默认圆点导航位置动画方式深色主题HTML data属性使用方法<div class="flicker-example"> <ul> <...2016-08-17 08:20:08 · 172 阅读 · 0 评论 -
ResponsiveSlides.js 幻灯片实例演示
在线实例默认效果导航和分页缩略图描述说明回调函数使用方法<div class="wrap"> <ul class="rslides" id="sucaihuo"> <li><a href="#" ><img src="/a2016-08-18 08:39:15 · 271 阅读 · 0 评论 -
jQuery owlcarousel 旋转木马
owlcarousel是一款猫头鹰旋转木马插件。OwlCarousel优势兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延迟加载支持自适应高度在线实例默认单个自动播放显示上一张自适应高度延迟加载加载JSON自定义JSON进度条随机显示使用方法<d...2016-08-19 08:34:14 · 211 阅读 · 0 评论 -
jQuery fsBanner 手风琴
fsbanner是一款自定义功能丰富的响应式网站Banner手风琴特效jQuery插件。该手风琴特效兼容性很好,支持点击和鼠标滑过等触发事件,并且可添加标题或描述。在线实例默认带标题鼠标滑过带文字介绍带文字介绍(默认隐藏)onChanged事件使用方法<div class='fsbanner' > <div s...2016-08-22 08:35:23 · 88 阅读 · 0 评论 -
jQuery flickity 滑动触屏
flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式、循环滚动、自动播放、是否支持拖动、是否开启分页、是否自适应窗口等。在线实例实例演示使用方法<div class="hero-gallery js-flickity"> <div class="hero-gallery__cell hero-gallery__ce...2016-08-23 09:53:16 · 666 阅读 · 0 评论 -
jQuery orbit 幻灯片
在线实例默认带缩略图带描述使用方法<div class="wrap" style="width: 565px; height: 290px; margin: 0 auto;"> <div id="featured"> <a class="orbit-item" href="#"2016-08-24 08:23:32 · 93 阅读 · 0 评论 -
jQuery siteslider 动画幻灯片
在线实例效果一效果二使用方法<div class="container demo-1"> <div id="slider" class="sl-slider-wrapper"> <div class="sl-slider">2016-08-25 08:46:02 · 188 阅读 · 0 评论 -
一款很实用的jQuery iPresenter 3D图片旋转
在线实例效果一效果二使用方法<div class="htmleaf-container"> <div class="htmleaf-content"> <div class="container"> <div id="ipresenter">2016-08-26 08:28:21 · 201 阅读 · 0 评论 -
腾讯用过的插件jQuery twentytwenty 效果对比
在线实例左右对比上下对比使用方法<div class="twentytwenty-container"> <img src="/api/jq/5733e37340d99/img/2.jpg" alt=""> <img src="/api/jq/5733e37340d99/img/1.jpg" alt=&qu2016-08-27 08:21:23 · 174 阅读 · 0 评论 -
一款实用的viewer.js 图片相册
Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小、旋转、撤回等,底部有缩略图列表可切换。支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转)支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保)支持缩略图支持标题显示支持多种自定义事件在线实例默认效果j...2016-08-29 08:29:09 · 506 阅读 · 0 评论 -
cssSlidy.js 响应式手机图片轮播
cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等。在线实例实例演示使用方法<div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2....2016-08-30 08:27:29 · 161 阅读 · 0 评论 -
一款经典的jQuery slidizle 幻灯片
jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换在线实例默认效果水平/左右切换垂直/上下切换循环自动播放缩略图进度条回调函数使用方法<div class="sucaihuo" data-slidizle> <ul data-slidizle-content> ...2016-08-31 08:25:51 · 127 阅读 · 0 评论 -
炫酷的jQuery jquery.windy 快速浏览内容插件
在线实例效果一效果二效果三使用方法<div class="container"> <section class="main"> <div class="windy-demo"> <ul id="wi-el" class="wi-2016-09-01 08:36:21 · 191 阅读 · 0 评论 -
常用的jQuery als.js 跑马灯
ali.js是一款滚动插件,滚动的内容可包含文字和图片。它的API也很强大,包括滚动区域可见个数、每次滚动个数、滚动方向、是否循环滚动、是否自动滚动、滚动间隔时间、滚动动画速度、动画效果、滚动方向以及开始滚动索引。在线实例实例演示使用方法<div id="lista1" class="als-container"> <span class=...2016-09-02 08:32:24 · 326 阅读 · 0 评论 -
8种效果实例-jQuery anoSlide 焦点图轮播
anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件。在线实例单个多个动画延迟自动播放显示分页显示标题延迟加载自适应高度使用方法<div class="carousel"> <a class="prev"></a> <ul> ...2016-09-05 08:32:58 · 140 阅读 · 0 评论 -
很实用的baguetteBox.js 图片弹出层
lightbox JS插件--baguetteBox.js,它是用纯Javascript创建的图像展示效果,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示。baguetteBox.js 优势javascript完成,不需要jQuery库支持支持触屏手机端支持显示标题和说明等支持响应式效果支持CSS3过渡效果使用 SVG 按钮,没有多余的文件下载启用 gzip 压缩后仅...2016-09-06 08:32:59 · 477 阅读 · 0 评论 -
小清新的jQuery 幻灯片jQuery ck-slide 图片轮播
ck_slide 是一款小清新的jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,基本功能可以满足。它支持淡入淡出/左右滚动、箭头/圆点控制、自动播放。在线实例默认(淡入淡出)左右滚动自动播放使用方法<div class="ck-slide"> <ul class="ck-slide-wrapper"> ...2016-09-07 08:16:00 · 211 阅读 · 0 评论 -
大气的jQuery classicAccordion 手风琴插件
参数详解参数描述默认值captionWidth标题宽度300captionHeight标题高度100captionTop标题顶部距离100captionLeft标题左侧距离30shadow是否显示阴影层truelinkTarget打开链接方式,默认新窗口_blankopenPa...2016-09-08 09:13:10 · 127 阅读 · 0 评论 -
简洁实用jQuery cxMenu 手风琴导航
版本:jQuery v1.7+jQuery cxMenu v1.2注意事项:自动判断是否有子导航,有则显示并不触发链接,无则触发链接。实例预览使用方法载入 JavaScript 文件<script src="jquery.js"></script> <script src="jquery.cxmenu.js"&g...2016-09-09 09:27:51 · 86 阅读 · 0 评论 -
jQuery Portamento 滑动定位
版本:jQuery v1.3.2+jQuery Portamento v1.1.1注意事项:在不支持position:fixed的浏览器里效果不是很好(例如 IE6、iOS4),可以在参数中设置disableWorkaround: true来禁止对这类浏览器的支持;需将 portamento.js 放在</head>之后</body>之前,否则有...2016-09-10 08:22:20 · 162 阅读 · 0 评论 -
jQuery Transit 过渡效果
jQuery Transit 使用 CSS3 的新特性来实现过渡效果,比默认的.animate方法要顺畅得多。因为使用 CSS3 进行过渡效果,所以对不支持 CSS3 的浏览器效果有所下降。语法和.animate方法相同,因此很好上手。版本:jQuery v1.4+jQuery Transit v0.9.12为 jQuery 的 .css 方法支持以下属性:...2016-09-12 08:25:15 · 305 阅读 · 0 评论 -
SWFObject Flash 增强插件
SWFObject 2提供两种优化flash播放器的嵌入方法:基于标记的方法和依赖于js的方法。SWFObject 2提供一个js的API,为嵌入SWF文件和获取Flash播放器的相关信息提供了一个完整的工具箱。只用了一个很小的js文件 (10Kb / GZIPed: 3.9Kb)。是SWFObject 1.5, UFO and the Adobe Flash Playe...2016-09-13 08:25:20 · 180 阅读 · 0 评论