Article Sujet apprentissage Télécharger Questions et réponses Dictionnaire de programmation Jeu mises à jour récentes

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Maison > interface Web > js tutoriel > le corps du texte

iphone手机桌面滑动效果使用css3实现_其他特效

WBOY

Libérer： 2016-05-16 17:45:46

original

1520 Les gens l'ont consulté

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

<meta charset="utf-8"> 
 
<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.jb51.net/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.jb51.net/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> 
<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 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> 
<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需刷新才能执行]

Étiquettes associées：

Ordinateur de bureau mobile 滑动效果

source：php.cn

Article précédent：javascript小数四舍五入多种方法实现_基础知识 Article suivant：纯js网页画板(Graphics)类简介及实现代码_javascript技巧

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

BlackRock Labels BTC a Unique Diversifier

2024-09-20 15:51:33
Prévision du prix des ordinateurs Internet (ICP) : le prix de l'ICP atteindra-t-il 24 $ ?

2024-09-20 15:47:32
Worldcoin (WLD) Price Prediction 2022-23

2024-09-20 15:45:32
Meilleures pièces de monnaie dans lesquelles investir aujourd'hui

2024-09-20 15:39:32
Floki (FLOKI) Price Prediction: Will the Revamped Marketing Help Floki Catch Up on October Gains?

2024-09-20 15:38:32
Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist

2024-09-20 15:27:32
Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization

2024-09-20 15:26:32
ZChains dévoile une série de mises à jour et de lancements passionnants pour améliorer son écosystème

2024-09-20 15:12:32
如何下载小狐狸支付平台的Apple版本

2024-09-20 14:53:01
新手如何在MetaMask进行交易及优缺点

2024-09-20 14:51:01

Derniers numéros

Alternative pour copier ou télécharger le code QR (vue-qrcode) généré à l'aide de VueJs J'utilise le plugin "vue-qrcode" pour générer un code QR permettant aux utilisat...

Depuis 2023-11-06 00:01:12

0

1

301

Exécuter plusieurs requêtes MYSQL en utilisant PHP J'essaie d'exécuter des instructions MYSQL consécutives en utilisant PHP comme indiqué dan...

Depuis 2023-10-25 11:41:44

0

1

238

Concevoir des tableaux de produits multifonctionnels avec plusieurs paramètres pour différents types de produits Je n'ai pas beaucoup d'expérience en conception de tables. Mon objectif est de créer une o...

Depuis 2023-10-18 17:44:13

0

2

328

Mise à l'échelle des polices en fonction de la taille du conteneur J'ai du mal à comprendre le problème de mise à l'échelle des polices. J'ai actuellement un...

Depuis 2023-10-08 21:42:41

0

2

231

Quelles sont les bonnes pratiques pour les images utilisées comme sections principales ? J'ai une section qui utilise une image comme section principale. Le problème est que l'ima...

Depuis 2023-09-19 20:54:07

0

1

286

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

À propos de nous Clause de non-responsabilité Sitemap: Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！