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

所属分类：网络编程 / JavaScript 阅读数： 967

收藏 0赞 0分享

iphone手机桌面效果，因为用了css3样式，只测试了谷歌浏览器。

<!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iphone手机桌面效果</title>   </head> <body> <div id="iphone"> <div id="wrap"> <ul id="zm"> <li> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Maps.png)" title="Google Maps"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Photos.png)" title="Photo Gallery"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Chuzzle.png)" title="Chuzzle"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Safari.png)" title="Safari"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Weather.png)" title="Weather"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/nes.png)" title="NES Emulator"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Calendar.png)" title="Calendar"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Clock.png)" title="Clock"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/BossPrefs.png)" title="Boss Prefs"></div> </li> <li> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Chess.png)" title="Chess"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Mail.png)" title="Mail"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Phone.png)" title="Phone"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/SMS.png)" title="SMS Center"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Camera.png)" title="Camera"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/iPod.png)" title="iPod"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Calculator.png)" title="Calculator"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Music.png)" title="Music"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Poof.png)" title="Poof"></div> </li> <li> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Settings.png)" title="Settings"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/YouTube.png)" title="Youtube"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/psx4all.png)" title="PSx4All"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/VideoRecorder.png)" title="Record Video"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Installer.png)" title="Installer"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Notes.png)" title="Notes"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/RagingThunder.png)" title="RagingThunder"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Stocks.png)" title="Stocks"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/genesis4iphone.png)" title="Genesis"></div> </li> <li> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/snes4iphone.png)" title="SNES Emulator"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Calendar.png)" title="Calendar"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Clock.png)" title="Clock"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Photos.png)" title="Photo Gallery"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Maps.png)" title="Google Maps"></div> </li> <li> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Camera.png)" title="Camera"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/iPod.png)" title="iPod"></div> <div class="icon" style="background-image:url(//img.jbzj.com/file_images/article/201212/mobilhdmenu/Calculator.png)" title="Calculator"></div> </li> </ul> <ul id="btn"> <li></li><li></li><li></li><li></li><li></li> </ul> </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

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

react PropTypes校验传递的值操作示例

在Webpack中用url-loader处理图片和字体的问题

React中Ref 的使用方法详解

JS数组降维的实现Array.prototype.concat.apply([], arr)

js最全的数组的降维5种办法(小结)

React生命周期原理与用法踩坑笔记

Vue 3.0 全家桶抢先体验

JavaScript 链表定义与使用方法示例

JavaScript Date对象功能与用法学习记录

Node.js设置定时任务之node-schedule模块的使用详解

网络赚钱

站长故事