首页 新闻 搜索 专区 学院

请高手解释一下小米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。好了,特效代码是你的了,看它实现就可以了。

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

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

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

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

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

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

山水中华 | 园豆:248 (菜鸟二级) | 2014-09-09 12:42
1
小镇有你 | 园豆: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看下。

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