手机触屏相册带计数功能

作者:林炜贤来源:www.163css.com发表时间:(2012-11-20)

首先,我们看个图:

你这样的图片,你会不会在网易的新闻客户端或是其它APP上见过?那么,我们现在通过WEBAPP的模式来实现。

你会觉得难点在哪?首先是触屏,要实现100%划动,这样的效果,我们可以参考下“手机触屏TAB菜单”,接着,又有一个难题,就是图片切换的时候,上面的标题会跟着变,这个代码,我们采用了JQUERY,当然,手机上我们有一个类似JQUERY的脚本,zepto。

我们必须注意,关于触屏的东西,我们必须写在function(index)里,es[index]表示我们每次的切换,我们获取下面的页码也是同样的做法。

大家可以参考下代码,关于简介那一块,就是一个TOGGLE,不过,按钮的写法,我都采用了CSS3,大家可以看下,CSS3让我们在手机上可以大展身手,毕竟用代码写出来感觉比直接切图片强多了。。。

由于服务器原因(采用了1.3的jquery),我的加上了JQUERY代码,下载文件中,是不需要的。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/11/albumtouch/index.html

下载地址:手机触屏相册带计数功能.zip

返回作者主页:www.163css.com阅读 (6068)
更多 1