学会偷懒,并懒出境界是提高工作效率最有效的方法!
Ctrl + D 收藏我吧~
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、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可