在前端开发中，滑动切换是一个常见的需求。本文将介绍如何使用jQuery来实现一个类似于百度经验的滑动切换效果，并提供示例代码以供参考。
实现思路
要实现这个效果，我们需要以下步骤：
- 使用CSS布局生成两列等宽的容器
- 给左侧容器添加固定宽度和浮动属性。给右侧容器添加
position: absolute和left: 50%样式。 - 使用jQuery为右侧容器添加一个默认的
margin-left值，并且为左侧容器添加click事件监听器。 - 在左侧容器被点击时，获取当前点击元素的索引，然后根据索引计算出右侧容器的新位置，在动画过程中将其应用到
margin-left属性上。
HTML结构
首先，让我们来看一下HTML结构：
-- -------------------- ---- -------
---- ------------------
---- -----------------------
----
------------
------------
------------
------------
------------
-----
------
---- ------------------------
----
--------------
--------------
--------------
--------------
--------------
-----
------
------CSS样式
接下来，我们需要为容器添加CSS样式。这里我们使用了Flex布局来实现两列等宽。
-- -------------------- ---- ------- ---------- - -------- ----- - --------------- - ------ ------ ------ ----- - ---------------- - --------- --------- ----- ---- ---------- ----------------- -
在这个示例中，左侧容器使用float: left属性，右侧容器使用了position: absolute、left: 50%和transform: translateX(-50%)属性。这将使得右侧容器水平居中于其父容器中。
jQuery代码
现在，我们可以开始编写jQuery代码。请注意，代码中包含注释以帮助您理解每个步骤的目的。
-- -------------------- ---- -------
------------ -
-------------------------------
--- ------ - -----------------------------------------
-------------------------
------------------ ---------------- ---------- -
-------------------
--- ----- - ----------------
-----------------
--- ----------- - --- - ----- - --- - ----
---------------------
--------------------------
-------------------------------
-------------- -----------
-- -----
---
---在这个示例中，我们首先获取了右侧容器的默认margin-left值，并将其存储在变量中。然后，我们为左侧容器的每个子元素添加了一个click事件监听器。
当左侧容器被点击时，我们获取当前点击元素的索引，并根据索引计算出右侧容器的新位置。最后，我们使用animate方法来实现动画过渡效果，并将右侧容器的margin-left属性更改为新位置。在这个示例中，我们使用了500ms的动画时间。您可以根据需要自行
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2752