before-after焦点图插件_V海模板

BEFORE

AFTER

My Sweet Girl

Description ipsum dolor sit amet, pericul sapen ius.
Duo numquam assentior et.
My Storyboard
Scene 1
www.hollywoodplastic.dr
Anytime anywhere
Feel the Difference!

Description ipsum dolor sit amet,
pericula sapentim ei ius.
Pericula sapentim ei ius.
www.tatoo.fr
Tomato Paste Italy Manufacturers

Description ipsum dolor sit amet, pericula sapentim ei ius. Pupolo patrioque elaboraret usu et.
Duo numquam assentior et.
Kriki Choco Item (ENG)

Details ipsum dolor sit amet, pericula sapentim ei ius.
Pupolo patrioque elaboraret usu et. Duo numquam assentior et.

Kriki Choco Item (GER)

You can define Texts on the first level, second level, or on both.
What is your

I.D.E.A.?

来源：version-four　代码整理：模板在线　感谢：wordpress Xcoder

before-after焦点图插件，可以拖动分割条查看对比图片，兼容主流浏览器，模板在线推荐下载！

使用方法：

1、head区域引用头部必要的js和css代码

2、在文件中加入区域代码

3、复制images文件夹里的图片到相应的路径

4、src属性对应之前的图片，alt属性对应之后的图片

<img src="images/beforeafter/8before.jpg" alt="images/beforeafter/8after.jpg" />

See how to create individual banners

Background:

Border:

Round

|

Square

Photo

|

Normal

Shadow 1

|

Shadow 2

|

Shadow 3

Demo Settings

1. Example

2. Example

SOURCE CODE

HTML

		
<li> <img src="images/beforeafter/7before.jpg" alt="images/beforeafter/7after.jpg" />
	<div id="textbox_7">
		<div id="logo_7b" class="faderight"> <img src="images/anim/flower_1_white_bg_30fps.gif" alt="" /> </div>
		<div id="logo_7" class="faderight"> <img src="images/tatoologo.png" alt="" /> </div>
		<div id="description_7" class="fadeup"> Pericula sapentim ei ius.<br>
			<a href="http://wwww.codecanyon.net/user/freshline" target="_new">www.tatoo.fr</a> </div>
	</div>
</li>
		
	

Preperation time: 5 min.

Clean Documentation