手机弹窗式触屏相册

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

今天,我们再来介绍一个触屏特效,我记得上周我们做过一个触屏相册,那么,我们今天再来加点难度。我们以前在浏览网站详情页面的时候,经常会看到这样一种效果,当你点击一张图片时,会将其它图片以弹窗的模式显示,接着,你可以通过上下按钮,实现图片的切换。

那,手机上如何实现?

我排列了这样一组小图,当我点击的时候,我通过JQUERY将所以图片放到id为imgs里,接着,通过定位技术,将图片显示出来:

关于点击哪张图片出现哪张的效果,我是通过上面的代码实现的,接着,用户可以实现左右切换,我们在上面也加上了计数的功能。

在这里,我们使用了touchSwipe这个脚本,我们用这个脚本,可以实现简单的swipe功能。大家可以先看下这个网站:http://labs.skinkers.com/touchSwipe/

这种类似JQUERY的写法,可以让我们实现一些简单的SWIPE功能,当然,如果你想实现复杂的菜单,还是看看我之前的作品:“手机触屏TAB菜单”。

但我总觉得这个作品,有个地方,不够完美,当我用竖屏屏示相片时,接着转成横屏,结果宽度没办法自动更新,这样,显示的效果不完美,用户只能点击刷新按钮,弹窗式相册才恢复正常,接下的日子,我们一起完善他。

我们换了一种写法,不再获取documnet的宽度,而是采用数学计算的方式,大家可以参考下“touchSwipe百度新闻手机触屏滑动导航”,这样转屏的问题就解决了啊,开心啊。。。

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

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

下载地址:手机弹窗式触屏相册.rar

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