京东自营 + 国补 iPhone 历史最低价          国家补贴 享8折

before-after左右拖拽分隔条对比图片效果

before-after左右拖拽分隔条对比图片效果,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,适合美容院,医院等照片展示。兼容主流浏览器,推荐下载!


使用方法:

1、在head区域引入样式表文件lrtk.css

2、在head区域引入jquery.js和jquery-ui-1.8.13.custom.min.js和jquery.beforeafter-1.3.min.js

3、在head区域加入

<script type="text/javascript">

$(function(){

$('#container').beforeAfter({imagePath:'js/'});

});

if( self == top ) {

document.documentElement.style.display = 'block' ;

} else {

top.location = self.location ;

}

</script>

4、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可


下载方法:
1、请用微信扫描下方二维码关注时代Java公众号,或者微信搜索时代JavaNowJava关注。
    (如已经关注,请直接发送编号)
2、在时代Java公众号里发送编号:5381
5381
3、发送后,将立刻收到 “验证码已经接收成功” 的回复,即可选择线路下载:
通用网络下载移动网络下载电信网络下载

本文系作者在时代Java发表,未经许可,不得转载。

如有侵权,请联系nowjava@qq.com删除。

编辑于

关注时代Java

关注时代Java