首页 新闻 会员 周边 捐助

请高手解释一下小米4宣传页面的这个特效怎么做的？

0
悬赏园豆：200 [待解决问题]

http://www.mi.com/mi4#fea-ten

网址在上面，就是黑白两色的切换。还可以手动切换。

谢谢！

juggd的主页 juggd | 初学一级 | 园豆：2
提问于：2014-09-06 14:08
< >
分享
所有回答(10)
0

猜测可能是在底下显示白色的图片，然后上面加一层DIV，DIV里按照对应的位置放另一张黑色的图片，通过鼠标拖动的方式来更改DIV的大小。当然也可能反过来，白色的图片在上面，黑色的图片在下面

诶碧司 | 园豆：1912 (小虾三级) | 2014-09-06 14:26
0

两套方案，通过JS+CSS进行全方位的控制达到目的。这个策略上不难，细节上要花点心思，关键是策划，能出这个点子的人。

519740105 | 园豆：5810 (大侠五级) | 2014-09-06 20:08
0

这不算复杂吧？看看页面源代码，应当能够解决

LiuKaiFa | 园豆：1491 (小虾三级) | 2014-09-07 07:58
0

利用Chrome打开页面，然后Ctrl+S。好了，特效代码是你的了，看它实现就可以了。

幻天芒 | 园豆：37207 (高人七级) | 2014-09-07 23:16
0

直接看代码啊，功能都实现了，代码也都在那里，大家都是程序猿，学会看人家的代码是很重要的。

晓菜鸟 | 园豆：2594 (老鸟四级) | 2014-09-09 09:14
1

那个是两张图片，不是一张图片实现的变色

刘宏玺 | 园豆：14020 (专家六级) | 2014-09-09 09:39
0

把这个效果下载下来，然后慢慢删除修改，看明白，就变成你的了。

山水中华 | 园豆：255 (菜鸟二级) | 2014-09-09 12:42
1

图片前后对比 http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/

小镇有你 | 园豆：202 (菜鸟二级) | 2014-09-09 20:18

还有TwentyTwenty插件

支持(1) 反对(0) 小镇有你 | 园豆：202 (菜鸟二级) | 2014-09-09 20:28

这个东西不错！

支持(0) 反对(0) achievie | 园豆：6 (初学一级) | 2014-09-10 17:51
0

就是四张图片几个层

深蓝暖殇 | 园豆：197 (初学一级) | 2014-09-11 10:33
0

实现挺简单的，不过创意不错。

给你说一下大概的做法。

一共两个div，下面的是张黑色的，上面是白的，各用背景图片，中间那个splitter是控制白色的宽度，白色的那张背景是白色的。

白色的那张没有把最上面的菜单盖住是因为设置了z-index。

你可以用chrome F12看下。

南昌炒粉 | 园豆：760 (小虾三级) | 2014-10-30 15:53
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。