前&后简码

Smooth Version

Just move the mouse over the image or swipe on touch devices.

  1. 前
  2. 后
Get The Code

[before_after width="719" height="404" before_src="http://121.42.157.29/3clicks/wp-content/uploads/2013/03/banda_before_1_v01.png" after_src="http://121.42.157.29/3clicks/wp-content/uploads/2013/03/banda_after_1_v01.png"]

Flip Version

Click the handler at the bottom.

  1. 前
  2. 后
Get The Code

[before_after width="719" height="404" before_src="http://121.42.157.29/3clicks/wp-content/uploads/2013/03/banda_before_1_v01.png" after_src="http://121.42.157.29/3clicks/wp-content/uploads/2013/03/banda_after_1_v01.png" type="flip"]

Hover

Hover over the image to show its alternative version.

  1. 前
  2. 后
Get The Code

[before_after width="719" height="404" before_src="http://121.42.157.29/3clicks/wp-content/uploads/2013/03/banda_before_1_v01.png" after_src="http://121.42.157.29/3clicks/wp-content/uploads/2013/03/banda_after_1_v01.png" type="hover"]

Shortcode documentation

  • id
    ID属性指定HTML元素的ID
    必须是HTML文档中唯一的
    （主要为附加的CSS/JS）
  • class
    这个类属性指定HTML元素类名
    （主要为附加的CSS/JS）
  • type
    适用的选项:
    • smooth - 分隔的图像
    • flip - 点击翻转图像
    • hover - 悬停变化
  • before_src
  • after_src
  • width
    宽（单位像素）
  • height
    高（单位像素）