小兔网

所属类别

特效(Effects)

用法

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

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。

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>缩放特效(Scale Effect)演示</title>  <link rel="stylesheet" href="https://zhishitu.com/">  <style>  #toggle {    width: 100px;    height: 100px;    background: #ccc;  }  </style>  <script src="/images/2021/07/13/07/2021071307094711654180.js"></script>  <script src="/images/2021/07/13/07/2021071307094712124771.js"></script></head><body> <p>点击任意地方进行切换。</p><div id="toggle"></div> <script>$( document ).click(function() {  $( "#toggle" ).toggle( "scale" );});</script> </body></html>

实例 2:

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

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>>缩放特效(Scale Effect)演示</title>  <link rel="stylesheet" href="https://zhishitu.com/">  <style>  #toggle {    width: 100px;    height: 100px;    background: #ccc;  }  </style>  <script src="/images/2021/07/13/07/2021071307094711654180.js"></script>  <script src="/images/2021/07/13/07/2021071307094712124771.js"></script></head><body> <p>点击任意地方进行切换。</p><div id="toggle"></div> <script>$( document ).click(function() {  $( "#toggle" ).toggle({ effect: "scale", direction: "horizontal" });});</script> </body></html>