twentytwenty图片对比插件
图片对比效果的需求,twentytwenty 的插件就挺合适。滑动条一拉,前后对比立马出来,视觉冲击力还蛮强的。用法也不复杂,js 和 css 一引,写个div.twentytwenty
,里面塞两张图片,滑动方向直接用data-orientation
控制,挺方便。
视觉稿验收、效果图前后对比、产品包装新旧展示,都比较适用。尤其是给客户看效果变化,现场说服力强。你还可以自定义对比条样式,调下颜色、宽度什么的,适配页面风格,前端自由度挺大。
事件接口也留了,支持拖拽、点击,扩展逻辑不用愁。jQuery 环境下用起来最顺手,如果有老项目或者喜欢 jQuery 语法,直接用,响应也快,代码也简单。
资源包texiao199_1560681080
一般都带源码和 demo,实际集成不难。唯一要注意,图片大小最好一致,对比条才不会错位。你要做图像相关的展示,可以大胆试试 twentytwenty,效果真的还不错。
下载地址
用户评论