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

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

<!DOCTYPE HTML> 
<html> 
<meta charset="utf-8"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>iphone手机桌面效果</title> 
<style type="text/css"> 
body,div,ul,li{padding: 0; margin: 0; } 
li{list-style: none; } 
body {background: #333; } 
#iphone {width: 900px; height: 600px; background: url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/bg.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; } 
#wrap {width: 240px; height: 360px; position: absolute; top: 121px; left: 326px; overflow:hidden; } 
#iphone ul#zm {width: 1200px; height: 360px; cursor: pointer; position: absolute; top: 0px; left: 0px; background:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/background.jpg) center center;} 
#iphone ul#zm li {float: left; width:240px; height:350px;padding-top:10px;overflow:hidden;} 
#iphone ul#zm li div{float: left; width:60px; height:80px; background-repeat: no-repeat;margin: 10px;position: relative;} 
#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;} 
#iphone ul#btn{position:absolute;left:60px;bottom:5px;width:140px;height:30px;} 
#iphone ul#btn li{float:left;width:6px;height:6px;border-radius:50%;background:#fff;margin:10px;} 
#iphone ul#btn li.current{background:#00A2D6;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20startMove(e%2Ct)%7Bif(e.oTimer)%7BclearInterval(e.oTimer)%7De.oTimer%3DsetInterval(function()%7BdoMove(e%2Ct)%7D%2C30)%7Dfunction%20doMove(e%2Ct)%7Bvar%20n%3De.offsetLeft%3BiSpeed%2B%3D(t-n)%2F5%3BiSpeed*%3D.7%3Bn%2B%3DiSpeed%3Bif(Math.abs(t-n)%3C1%26%26Math.abs(iSpeed)%3C1)%7BclearInterval(e.oTimer)%3Be.oTimer%3Dnull%3Bn%3Dt%7De.style.left%3Dn%2B%22px%22%7Dfunction%20startDrag(e)%7Bvar%20t%3De.getElementsByTagName(%22li%22)%3Be.onmousedown%3Dfunction(n)%7Bvar%20r%3Dn%7C%7Cevent%3Be.iStartX%3De.offsetLeft%3Bvar%20i%3Dr.clientX-e.offsetLeft%3Bdocument.onmousemove%3Dfunction(t)%7Bvar%20n%3Dt%7C%7Cevent%3Bvar%20r%3Dn.clientX-i%3Be.style.left%3Dr%2B%22px%22%3Breturn%20false%7D%3Bdocument.onmouseup%3Dfunction()%7Bdocument.onmousemove%3Dnull%3Bdocument.onmouseup%3Dnull%3Bif(Math.abs(e.offsetLeft-e.iStartX)%3E%3D0)%7Bif(e.offsetLeft%3Ee.iStartX)%7BiNow--%3Bif(iNow%3C0)%7BiNow%3D0%7D%7Delse%7BiNow%2B%2B%3Bif(iNow%3E%3Dt.length)%7BiNow%3Dt.length-1%7D%7D%7DstartMove(e%2C-iNow*t%5B0%5D.offsetWidth)%3Bvar%20n%3Ddocument.getElementById(%22btn%22)%3Bvar%20r%3Dn.getElementsByTagName(%22li%22)%3Bfor(var%20i%3D0%3Bi%3Cr.length%3Bi%2B%2B)%7Br%5Bi%5D.className%3D%22%22%7Dr%5BiNow%5D.className%3D%22current%22%7D%3BstopMove(e)%3Breturn%20false%7D%7Dfunction%20stopMove(e)%7Bif(e.oTimer)%7BclearInterval(e.oTimer)%7D%7Dvar%20oTimer%3Dnull%3Bvar%20iNow%3D0%3Bvar%20iSpeed%3D0%3Bwindow.onload%3Dfunction()%7Bvar%20e%3Ddocument.getElementById(%22zm%22)%3BstartDrag(e)%3Bvar%20t%3Ddocument.getElementById(%22btn%22)%3Bvar%20n%3Dt.getElementsByTagName(%22li%22)%3Bn%5BiNow%5D.className%3D%22current%22%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div id="iphone"> 
<div id="wrap"> 
<ul id="zm"> 
<li> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Maps.png)" title="Google Maps"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Photos.png)" title="Photo Gallery"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Chuzzle.png)" title="Chuzzle"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Safari.png)" title="Safari"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Weather.png)" title="Weather"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/nes.png)" title="NES Emulator"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Calendar.png)" title="Calendar"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Clock.png)" title="Clock"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/BossPrefs.png)" title="Boss Prefs"></div> 
</li> 
<li> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Chess.png)" title="Chess"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Mail.png)" title="Mail"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Phone.png)" title="Phone"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/SMS.png)" title="SMS Center"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Camera.png)" title="Camera"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/iPod.png)" title="iPod"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Calculator.png)" title="Calculator"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Music.png)" title="Music"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Poof.png)" title="Poof"></div> 
</li> 
<li> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Settings.png)" title="Settings"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/YouTube.png)" title="Youtube"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/psx4all.png)" title="PSx4All"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/VideoRecorder.png)" title="Record Video"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Installer.png)" title="Installer"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Notes.png)" title="Notes"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/RagingThunder.png)" title="RagingThunder"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Stocks.png)" title="Stocks"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/genesis4iphone.png)" title="Genesis"></div> 
</li> 
<li> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/snes4iphone.png)" title="SNES Emulator"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Calendar.png)" title="Calendar"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Clock.png)" title="Clock"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Photos.png)" title="Photo Gallery"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Maps.png)" title="Google Maps"></div> 
</li> 
<li> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/Camera.png)" title="Camera"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.com/file_images/article/201212/mobilhdmenu/iPod.png)" title="iPod"></div> 
<div class="icon" style="background-image:url(http://files.glzy8.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需刷新才能执行]

教程首页更多教程