iphone手机桌面滑动效果使用css3实现

iphone手机桌面效果，因为用了css3样式，只测试了谷歌浏览器。
</p> <p><title>iphone手机桌面效果</title> </p> <p>body,div,ul,li{padding: 0; margin: 0; }<br /> li{list-style: none; }<br /> body {background: #333; }<br /> #iphone {width: 900px; height: 600px; background: url(//files.jb51.net/file_images/article/201212/mobilhdmenu/bg.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; }<br /> #wrap {width: 240px; height: 360px; position: absolute; top: 121px; left: 326px; overflow:hidden; }<br /> #iphone ul#zm {width: 1200px; height: 360px; cursor: pointer; position: absolute; top: 0px; left: 0px; background:url(//files.jb51.net/file_images/article/201212/mobilhdmenu/background.jpg) center center;}<br /> #iphone ul#zm li {float: left; width:240px; height:350px;padding-top:10px;overflow:hidden;}<br /> #iphone ul#zm li div{float: left; width:60px; height:80px; background-repeat: no-repeat;margin: 10px;position: relative;}<br /> #iphone ul#zm li div.icon::after{bottom: -8px;color:#fff;content: attr(title);font-size: 12px;height: 20px;left: -8px;overflow: hidden;position: absolute;text-align: center;white-space: nowrap;width: 74px;text-shadow: 0 0 3px #222;}<br /> #iphone ul#btn{position:absolute;left:60px;bottom:5px;width:140px;height:30px;}<br /> #iphone ul#btn li{float:left;width:6px;height:6px;border-radius:50%;background:#fff;margin:10px;}<br /> #iphone ul#btn li.current{background:#00A2D6;} </p> <ul id="zm"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <ul id="btn"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• javascript判断iphone/android手机横竖屏模式的函数
• iphone safari不支持position fixed的解决方法
• 仿iPhone风格对话框(附件包含例子/jar包/jar包源码)
• Android之IphoneTreeView带组指示器的ExpandableListView效果
• 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
• iphone的safari浏览器中实现全屏浏览的方法
• 如何在iphon IOS设备上使用二维码