来源: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