表单 input checkbox radio
jquery attr()、prop()区别和属性支持
图片滚动
这个基于 jQuery 的多功能无缝滚动插件是我在几个月之前就写好的,只是碍于时间没有把插件公开出来,近段时间,这个插件陆续在公司的几个项目中得到应用,尝试效果还算不错,期间也修复了一些 bug,自我感觉这个插件在功能上已经比较成熟,可以在大多数的无缝滚动文字或者轮播图上一展身手,现在就分享给大家。
首先,来说明一下,这个“多功能”无缝滚动插件,到底怎么“多功能”?marquee.js 插件一共提供了 19 个可选的配置参数,是我所能想到的一般无缝滚动所可能涉及到的多样化了。
<div id="wrap3" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
$(function() {
$('#wrap3').marquee({
auto: true,
interval: 3000,
speed: 500,
showNum: 5,
stepLen: 5
});
})
auto: true // 是否自动滚动
interval: 3000 // 间隔时间(毫秒)
direction: 'forward' // 向前 - forward / 向后 - backward
speed: 500 // 移动速度(毫秒)
showNum: 1 // 显示个数
stepLen: 1 // 每次滚动步长
type: 'horizontal' // 水平滚动 - horizontal / 垂直滚动 - vertical
prevElement: null // 上一组按钮元素
prevBefore: function() {} // 上一组移动前回调
prevAfter: function() {} // 上一组移动后回调
nextElement: null // 下一组按钮元素
nextBefore: function() {} // 下一组移动前回调
nextAfter: function() {} // 下一组移动后回调
pauseElement: null // 暂停按钮元素
pauseBefore: function() {} // 暂停前回调
pauseAfter: function() {} // 暂停后回调
resumeElement: null // 继续按钮元素
resumeBefore: function() {} // 继续前回调
resumeAfter: function() {} // 继续后回调
js 滑块 刻度条

官网:http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html
| 选项 | 数据的Attr | 默认 | 类型 | 描述 |
|---|---|---|---|---|
type |
data-type |
single |
串 | 选择滑块类型,可以是single– 对于一个手柄,或double对于两个手柄 |
min |
data-min |
10 |
数 | 设置滑块最小值 |
max |
data-max |
100 |
数 | 设置滑块最大值 |
from |
data-from |
min |
数 | 设置左手柄的起始位置(或单手柄) |
to |
data-to |
max |
数 | 设置右手柄的起始位置 |
step |
data-step |
1 |
数 | 设置滑块步骤。总是> 0.可能是分数 |
min_interval |
data-min-interval |
- |
数 | 设置滑块之间的最小间隔。仅适用于双人型 |
max_interval |
data-max-interval |
- |
数 | 设置滑块之间的最小最大值。仅适用于双人型 |
drag_interval |
data-drag-interval |
false |
布尔 | 允许用户拖动整个范围。仅适用于双人型 |
values |
data-values |
[] |
排列 | 设置您自己的滑块值数组。它们可以是数字或字符串。如果设置了values数组,则不能再更改min,max和step param |
from_fixed |
data-from-fixed |
false |
布尔 | 固定左(或单)手柄的位置 |
from_min |
data-from-min |
min |
数 | 设置左(或单)手柄的最小限制 |
from_max |
data-from-max |
max |
数 | 设置左(或单)手柄的最大限制 |
from_shadow |
data-from-shadow |
false |
布尔 | 突出显示左手柄的限制 |
to_fixed |
data-to-fixed |
false |
布尔 | 固定右手柄的位置 |
to_min |
data-to-min |
min |
数 | 设置右手柄的最小限制 |
to_max |
data-to-max |
max |
数 | 设置右手柄的最大限制 |
to_shadow |
data-to-shadow |
false |
布尔 | 突出显示正确的手柄 |
prettify_enabled |
data-prettify-enabled |
true |
布尔 | 提高长数字的可读性:10000000→10 000 000 |
prettify_separator |
data-prettify-separator |
串 | 为长数字设置自己的分隔符:10000000→10,000,000等。 | |
prettify |
- |
null |
功能 | 设置自己的美化功能。可以是任何东西。例如,您可以将unix时间设置为滑块值,然后将它们转换为看起来很酷的日期 |
force_edges |
data-force-edges |
false |
布尔 | 滑块手柄和工具提示将始终位于其容器内 |
keyboard |
data-keyboard |
true |
布尔 | 激活键盘控件。向左移动:←,↓,A,S。向右移动:→,↑,W,D。 |
grid |
data-grid |
true |
布尔 | 在滑块上方启用值网格 |
grid_margin |
data-grid-margin |
true |
布尔 | 设置左右网格间隙 |
grid_num |
data-grid-num |
4 |
数 | 网格单元数 |
grid_snap |
data-grid-snap |
false |
布尔 | 将网格捕捉到滑块步骤(步骤参数)。如果激活,则不使用grid_num。最大步数= 50 |
hide_min_max |
data-hide-min-max |
false |
布尔 | 隐藏最小和最大标签 |
hide_from_to |
data-hide-from-to |
false |
布尔 | 隐藏的和以标签 |
prefix |
data-prefix |
“ | 串 | 设置值的前缀。将在数字之前设置:** $ ** 100 |
postfix |
data-postfix |
“ | 串 | 设置值的后缀。将在数字后立即设置:100 k |
max_postfix |
data-max-postfix |
“ | 串 | 特殊后缀,仅用于最大值。将在手柄到达最大右侧位置后显示。例如0 – 100+ |
decorate_both |
data-decorate-both |
true |
布尔 | 用于双重类型,仅在设置了前缀或后缀时使用。确定如何装饰接近的值。例如:$ 10k – $ 10万或$ 10 – 100k |
values_separator |
data-decorate-both |
- |
串 | 为关闭值设置您自己的分隔符。用于双重类型。默认值:10 – 100。或者您可以设置:10到100,10 + 100,10→100等。 |
input_values_separator |
data-input-values-separator |
; |
串 | 输入值属性中的double值的分隔符。<input value="25;42"> |
disable |
data-disable |
false |
布尔 | 锁定滑块并使其处于非活动状态。输入也被禁用。形式看不见 |
block |
data-blokc |
false |
布尔 | 锁定滑块并使其处于非活动状态。输入未被禁用。可以发送表格 |
extra_classes |
data-extra-classes |
— |
串 | 将额外的CSS类遍历到滑块容器 |
scope |
- |
null |
目的 | 回调范围。传递任何物体 |
onStart |
- |
null |
功能 | 回电话。在滑块启动时调用。获取所有滑块数据作为第一个属性 |
onChange |
- |
null |
功能 | 回电话。IS调用每个值的变化。获取所有滑块数据作为第一个属性 |
onFinish |
- |
null |
功能 | 回电话。在用户释放句柄时调用。获取所有滑块数据作为第一个属性 |
onUpdate |
- |
null |
功能 | 回电话。当滑块由外部方法修改被称为update或reset |
可兼容IE7+
http://pan.baidu.com/s/1hqxQ67y