Saber 酱的抱枕

Fly me to the moon

09/8
2015
学习

仿支付宝帮助图片切换效果

现在支付宝在二维码付款时,右上角有个帮助区域,可以切换两张图片。这时候我想到了一个问题,如果这里是使用banner切换的思路做的话——那样的话图片需要用排列,圆点指示器也得用html元素做出来,用在这么简单的一个地方,就显得太繁重了。于是我看了下源代码,不得不赞一声,毕竟是支付宝,人家不会像我一样低级。

支付宝是怎么做的呢?一个图片容器,里面两张图片,就这么简单。

你可能会问,指示器哪里去了呢?其实支付宝这里的指示器是做到图片上的,当图片切换的时候,指示器看起来就像是切换了一样。我一看到指示器和切换,就想到banner那里去了,这是思维定势,毕竟图样图森破。

但是我们点击指示器的时候,图片确实会切换。我想了一下,应该是在鼠标点击时判断点击位置,如果点击在左半边,图片就切换到第一张;如果点击在右半边,图片就切换到第二张。

于是做了个demo:

做出来之后才发现一件好玩的事情,指示器(实际上并没有真正的指示器)的心理作用大于实际作用,因为你即使在指示器之外点击鼠标(哪怕是点击图片左上角和右上角),图片也会正确的切换。

如果要切换的图片多的话,用这种方法就不那么简便了。
Read More →

仿支付宝帮助图片切换效果

07/21
2015
学习

js左右切换带控制按钮的banner

之前发了个《js左右切换展示的效果》,作用是在小区域内展示内容并且可以左右来回切换。放在大区域用就不合适了,于是改大之后加上了指示器,加上了指示器跳转,加上了自动播放,改到最后改成了banner……很无语,单独放出来吧。

代码也很简单,需要修改功能的话也不难。

查看demo

js左右切换带控制按钮的banner

07/21
2015
学习

js左右切换展示的效果

今天设计的专题里有一块是要左右切换展示几位医生,写了这个效果之后单独摘出来做了个demo,方便以后使用。

我做的时候展示的区域很小,demo里给改大了。但是大了之后没有指示器,看起来很不正常,所以这个demo只适合小区域的、切换数量少的展示。可以做banner或者大区域内容展示的请看此处

这个没有指示器,不会自动切换,也不会首尾循环切换。有了上面那个,这个基本就没用了。

查看demo

要点如下:
li(或者相当于li的子区域)的class设置为srcoll_li;
ul宽度设置为所有li的宽度之和,然后li浮动。
用ul外层元素的超出隐藏来防止乱版。

js左右切换展示的效果