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

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

收藏 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实现

jQuery LigerUI 使用教程表格篇(1)

JavaScript中常用的运算符小结

深入理解JavaScript系列(13) This? Yes,this!

javascript （用setTimeout而非setInterval）

JavaScript中两个感叹号的作用说明

javascript写的简单的计算器，内容很多，方法实用，推荐

js的表单操作简单计算器

Jquery中删除元素的实现代码

javaScript 利用闭包模拟对象的私有属性

为JavaScript类型增加方法的实现代码(增加功能)

网络赚钱

站长故事

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

jQuery LigerUI 使用教程表格篇(1)

JavaScript中常用的运算符小结

深入理解JavaScript系列(13) This? Yes,this!

javascript （用setTimeout而非setInterval）

JavaScript中两个感叹号的作用说明

javascript写的简单的计算器，内容很多，方法实用，推荐

js的表单操作 简单计算器

Jquery中删除元素的实现代码

javaScript 利用闭包模拟对象的私有属性

为JavaScript类型增加方法的实现代码(增加功能)

网络赚钱

站长故事

js的表单操作简单计算器