文章专题学习下载问答编程词典手游最近更新

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

首页 > web前端 > js教程 > 正文

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

WBOY

发布： 2016-05-16 17:45:46

原创

1557 人浏览过

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需刷新才能执行]

相关标签：

手机桌面滑动效果

来源：php.cn

上一篇：javascript小数四舍五入多种方法实现_基础知识下一篇：纯js网页画板(Graphics)类简介及实现代码_javascript技巧

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

什么是 NullPointerException，如何修复它？

2024-10-22 09:46:29
从新手到程序员：您的旅程从 C 基础知识开始

2024-10-13 13:53:41
使用PHP解锁网络开发：初学者指南

2024-10-12 12:15:51
揭秘 C：为新程序员提供一条清晰简单的道路

2024-10-11 22:47:31
释放您的编码潜力：绝对初学者的 C 编程

2024-10-11 19:36:51
释放你内心的程序员：C 绝对初学者

2024-10-11 15:50:41
使用 C 自动化您的生活：适合初学者的脚本和工具

2024-10-11 15:07:41
PHP 变得简单：Web 开发的第一步

2024-10-11 14:21:21
使用 Python 构建任何东西：释放创造力的初学者指南

2024-10-11 12:59:11
编码的关键：为初学者释放 Python 的力量

2024-10-11 12:17:31

最新问题

google 浏览器手机版显示的怎么实现老师您好，google 浏览器怎么变成手机版样式的？

来自于 2024-04-23 00:22:19

0

9

1588

SASS样式优先于媒体查询我正在尝试使用媒体查询来覆盖桌面设备的样式，但似乎不起作用。我将边框颜色设置为h2元素，并进行了测试以更好地可视化此问题。如您所见，h2的边框颜色设置为黄色。这是我的SASS样式：...

来自于 2024-04-05 15:03:00

0

1

3396

推出一款透明浏览器，提升Web应用和PWA体验【支持静态HTML、CSS和JavaScript】【让用户在我们的Web应用/PWA中查看桌面壁纸】我是一个初级前端开发者和设计师，目前正在使用socket开发一个网络应用程序（聊天）。我和我的朋友使用的语言有：Scala，HTML，CSS，JavaScript。我正在处理HTM...

来自于 2024-04-05 13:50:12

0

1

1367

如何使用其 SKU'连接”多个产品？我想根据WooCommerce的SKU合并两个或多个产品的库存。示例：（共享相同库存的两种产品）透明手机壳iPhone11-SKU12345个性化iPhone11手机壳-SKU56...

来自于 2024-04-05 08:53:52

0

1

3478

强制刷新是Next.js中访问未定义路径或错误页面的后果访问未定义的路径或错误页面会导致Next.js进行硬刷新，从而导致我的上下文回到默认状态（即存储在userProfile状态变量中的值变为null）我有一个布局，使用{stuctu...

来自于 2024-04-05 08:32:46

0

1

400

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1417431
php入门教程之一周学会PHP

4258590
JAVA 初级入门视频教程

2481150
小甲鱼零基础入门学习Python视频教程

504143
PHP 零基础入门教程

844465

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责声明 Sitemap: PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！