ホームページ > 記事 > ウェブフロントエンド > iPhoneデスクトップのスライド効果をcss3で実現_その他の特殊効果

iPhoneデスクトップのスライド効果をcss3で実現_その他の特殊効果

WBOYオリジナル: 2016-05-16 17:45:461541ブラウズ

iPhone デスクトップ効果は CSS3 スタイルを使用しているため、Google Chrome でのみテストされています。

<div id="iphone">
<div id="wrap">
<ul id="zm">
<li>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Maps.png)" title="Google Maps">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Photos.png)" title="Photo Gallery">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Chuzzle.png)" title="Chuzzle">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Safari.png)" title="Safari">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Weather.png)" title="Weather">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/nes.png)" title="NES Emulator">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Calendar.png)" title="Calendar">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Clock.png)" title="Clock">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/BossPrefs.png)" title="Boss Prefs">
</div>
</li>
<li>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Chess.png)" title="Chess">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Mail.png)" title="Mail">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Phone.png)" title="Phone">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/SMS.png)" title="SMS Center">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Camera.png)" title="Camera">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/iPod.png)" title="iPod">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Calculator.png)" title="Calculator">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Music.png)" title="Music">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Poof.png)" title="Poof">
</div>
</li>
<li>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Settings.png)" title="Settings">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/YouTube.png)" title="Youtube">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/psx4all.png)" title="PSx4All">
</div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/VideoRecorder.png)" title="Record Video">
</div>
<script type="text/javascript"> 
function startMove(e,t){if(e.oTimer){clearInterval(e.oTimer)}e.oTimer=setInterval(function(){doMove(e,t)},30)}function doMove(e,t){var n=e.offsetLeft;iSpeed+=(t-n)/5;iSpeed*=.7;n+=iSpeed;if(Math.abs(t-n)<1&&Math.abs(iSpeed)<1){clearInterval(e.oTimer);e.oTimer=null;n=t}e.style.left=n+"px"}function startDrag(e){var t=e.getElementsByTagName("li");e.onmousedown=function(n){var r=n||event;e.iStartX=e.offsetLeft;var i=r.clientX-e.offsetLeft;document.onmousemove=function(t){var n=t||event;var r=n.clientX-i;e.style.left=r+"px";return false};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;if(Math.abs(e.offsetLeft-e.iStartX)>=0){if(e.offsetLeft>e.iStartX){iNow--;if(iNow<0){iNow=0}}else{iNow++;if(iNow>=t.length){iNow=t.length-1}}}startMove(e,-iNow*t[0].offsetWidth);var n=document.getElementById("btn");var r=n.getElementsByTagName("li");for(var i=0;i<r.length;i++){r[i].className=""}r[iNow].className="current"};stopMove(e);return false}}function stopMove(e){if(e.oTimer){clearInterval(e.oTimer)}}var oTimer=null;var iNow=0;var iSpeed=0;window.onload=function(){var e=document.getElementById("zm");startDrag(e);var t=document.getElementById("btn");var n=t.getElementsByTagName("li");n[iNow].className="current"} 
</script><div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Installer.png)" title="Installer"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Notes.png)" title="Notes"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/RagingThunder.png)" title="RagingThunder"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Stocks.png)" title="Stocks"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/genesis4iphone.png)" title="Genesis"></div>
</li>
<li>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/snes4iphone.png)" title="SNES Emulator"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Calendar.png)" title="Calendar"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Clock.png)" title="Clock"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Photos.png)" title="Photo Gallery"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Maps.png)" title="Google Maps"></div>
</li>
<li>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Camera.png)" title="Camera"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/iPod.png)" title="iPod"></div>
<div class="icon" style="background-image:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/Calculator.png)" title="Calculator"></div>
</li>
</ul>
<ul id="btn">
<li>
<li>
<li>
<li>
<li>
</ul>
</div>
</div>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptの小数点四捨五入を複数の方法で実装_基礎知識次の記事：JavaScriptの小数点四捨五入を複数の方法で実装_基礎知識

続きを見る

iPhoneデスクトップのスライド効果をcss3で実現_その他の特殊効果

関連記事