jquery ui放大缩小_jQuery UI

jQuery UI API - 缩放特效(Scale Effect)

所属类别

用法

描述：按照某个百分比缩放元素。

scale

参数

类型

描述

默认值

direction

String

特效的方向。可能的值："both"、"vertical" 或 "horizontal"。

"both"

origin

Array

消失点。

[ "middle", "center" ]

percent

Number

要缩放到的百分比。

scale

String

元素的哪个区域将被调整尺寸："both"、"box"、"content"。当值为 "box" 时，调整元素的边框(border)和内边距(padding)的尺寸。当值为 "content" 时，调整元素内的所有内容的尺寸。

"both"

实例

实例 1：

使用缩放特效(Scale Effect)切换一个 div。

缩放特效(Scale Effect)演示

#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

点击任意地方进行切换。

$( document ).click(function() {

$( "#toggle" ).toggle( "scale" );

});

实例 2：

只在一个方向上使用缩放特效(Scale Effect)切换一个 div。

>缩放特效(Scale Effect)演示

#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

点击任意地方进行切换。

$( document ).click(function() {

$( "#toggle" ).toggle({ effect: "scale", direction: "horizontal" });

});