请高手解释一下小米4宣传页面的这个特效怎么做的?_html/css_WEB-ITnose

http://www.mi.com/mi4#fea-ten
网址在上面，就是黑白两色的切换。还可以手动切换。
谢谢！

回复讨论(解决方案)

上下2张图片不行？

提取网页上的代码，做了个 演示代码，里面用了四张图片，主要是计算宽度和高度
因为演示代码的窗口比较小，所以把拖动按钮的位置向上一了(样式.mi4-content-feature-h .feature-float-control里面的margin-top)

提取网页上的代码，做了个 演示代码，里面用了四张图片，主要是计算宽度和高度
因为演示代码的窗口比较小，所以把拖动按钮的位置向上一了(样式.mi4-content-feature-h .feature-float-control里面的margin-top)

http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-35.png
http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-37.png

确实是两个图。 2楼组装能力真强

示例是从官网上摘下来的，两个图是黑白手机正面的，四个图是黑白手机正反两面的

http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-35.png
http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-37.png
确实是两个图。 2楼组装能力真强