博客

jQuery UI 幻灯片效果

  • Post category:jquery

以下是关于 jQuery UI 幻灯片效果的详细攻略：

jQuery UI 幻灯片效果

jQuery UI 提供了一个名为 slide 的方法，用于实现幻灯片效果。该方法可以使元素在水平和垂直方向上滑动，可以设置滑动的方向、距离和持续时间。

语法

$( ".selector" ).effect( "slide", {
  direction:,
  distance: number
}, duration );

参数

  • direction：设置滑动的方向，可以是 up、down、left 或 right。
  • distance：设置滑动的距离，以像素为单位。
  • duration：设置滑动持续时间，以毫秒为单位。

示例一：基本幻灯片效果

<div id="myDiv" style="width: 200px; height: 200px; background-color: red;"></div>

<script>
$( "#myDiv" ).effect( "slide" );
</script>

这使 id 为 myDiv 的元素具有幻灯片效果，并且默认向下滑动，滑动距离为元素的高度，持续时间为 400 毫秒。

示例二：设置滑动方向和距离

<div id="myDiv" style="width: 200px; height: 200px; background-color: red;"></div>

<script>
$( "#myDiv" ).effect( "slide", {
  direction: "left",
  distance: 100
}, 1000 );
</script>

这将使 id 为 myDiv 的元素具有幻灯片效果，并且向左滑动，滑动距离为 100 像素，持续时间为 1000 毫秒。

总结：

jQuery UI 的 slide 方法可以实现元素的幻灯片效果，并且可以设置滑的方向、距离和持续时间。使用该方法可以方便地实现元素的幻灯片效果。

以上是关于 jQuery UI 幻灯片效果的详细攻略，包括语法和两个示例。

Tags: