09/8
2015
现在支付宝在二维码付款时,右上角有个帮助区域,可以切换两张图片。这时候我想到了一个问题,如果这里是使用banner切换的思路做的话——那样的话图片需要用排列,圆点指示器也得用html元素做出来,用在这么简单的一个地方,就显得太繁重了。于是我看了下源代码,不得不赞一声,毕竟是支付宝,人家不会像我一样低级。
支付宝是怎么做的呢?一个图片容器,里面两张图片,就这么简单。
你可能会问,指示器哪里去了呢?其实支付宝这里的指示器是做到图片上的,当图片切换的时候,指示器看起来就像是切换了一样。我一看到指示器和切换,就想到banner那里去了,这是思维定势,毕竟图样图森破。
但是我们点击指示器的时候,图片确实会切换。我想了一下,应该是在鼠标点击时判断点击位置,如果点击在左半边,图片就切换到第一张;如果点击在右半边,图片就切换到第二张。
于是做了个demo:
做出来之后才发现一件好玩的事情,指示器(实际上并没有真正的指示器)的心理作用大于实际作用,因为你即使在指示器之外点击鼠标(哪怕是点击图片左上角和右上角),图片也会正确的切换。
如果要切换的图片多的话,用这种方法就不那么简便了。
Read More →
仿支付宝帮助图片切换效果
07/21
2015
之前发了个《js左右切换展示的效果》,作用是在小区域内展示内容并且可以左右来回切换。放在大区域用就不合适了,于是改大之后加上了指示器,加上了指示器跳转,加上了自动播放,改到最后改成了banner……很无语,单独放出来吧。
代码也很简单,需要修改功能的话也不难。
js左右切换带控制按钮的banner
07/21
2015