css3+js实现iphone5s手机桌面效果

最新推荐文章于 2021-08-04 00:16:29 发布
最新推荐文章于 2021-08-04 00:16:29 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： web前端
本文介绍如何使用CSS3和JavaScript实现iPhone5s手机桌面的仿真实现，包括图标布局、滑动切换等功能。代码示例详细展示了元素定位、事件监听等关键步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css3+js实现iphone5s手机桌面效果
 <!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<meta charset="utf-8" />  
<title>iphone5s手机桌面效果</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://www.cctv3ok.com/images/tupian/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://www.cctv3ok.com/images/tupian/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>
</head>
<body>
<div id="iphone">
 <div id="wrap">
  <ul id="zm">
   <li>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/Maps.png)" title="Google Maps"></div>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/Photos.png)" title="Photo Gallery"></div>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/Chuzzle.png)" title="Chuzzle"></div>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/Safari.png)" title="Safari"></div>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/Weather.png)" title="Weather"></div>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/nes.png)" title="NES Emulator"></div>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/Calendar.png)" title="Calendar"></div>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/Clock.png)" title="Clock"></div>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/BossPrefs.png)" title="Boss Prefs"></div>
         </li>
   <li>
                <div class="icon" style="background-image:url(http://www.cctv3ok.com/images/tupian/Chess.png)" title="Chess"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Mail.png)" title="Mail"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Phone.png)" title="Phone"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/SMS.png)" title="SMS Center"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Camera.png)" title="Camera"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/iPod.png)" title="iPod"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Calculator.png)" title="Calculator"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Music.png)" title="Music"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Poof.png)" title="Poof"></div>
            </li>
   <li>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Settings.png)" title="Settings"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/YouTube.png)" title="Youtube"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/psx4all.png)" title="PSx4All"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/VideoRecorder.png)" title="Record Video"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Installer.png)" title="Installer"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Notes.png)" title="Notes"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/RagingThunder.png)" title="RagingThunder"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Stocks.png)" title="Stocks"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/genesis4iphone.png)" title="Genesis"></div>
            </li>
   <li>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/snes4iphone.png)" title="SNES Emulator"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Calendar.png)" title="Calendar"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Clock.png)" title="Clock"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Photos.png)" title="Photo Gallery"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Maps.png)" title="Google Maps"></div>
            </li>
            <li>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Camera.png)" title="Camera"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/iPod.png)" title="iPod"></div>
                <div class="icon" style="background-image:url( http://www.cctv3ok.com/images/tupian/Calculator.png)" title="Calculator"></div>
            </li>
  </ul>
        <ul id="btn">
         <li></li><li></li><li></li><li></li><li></li>
        </ul>
 </div>
</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>
</body>
</html>


图片

图片

图片

图片

图片
js 可拖放、合并文件夹仿手机桌面效果
03-05
基于jtop库实现的可自由拖放、合并文件夹仿手机桌面图标效果，自适应屏幕尺寸、自动删除文件夹、图标网格吸附效果
js 模拟手机桌面，拖拽、合并文件、换位置
12-25
实现功能有，拖拽、合并文件、换位置
html仿苹果桌面导航js css,JS+CSS仿苹果手机(Iphone)的滑动效果的焦点图
weixin_29009501的博客
06-04 727
JS+CSS仿苹果手机(Iphone)的滑动效果的焦点图_网页代码站(www.webdm.cn)TABLE {FONT-SIZE: 12px}.dis {DISPLAY: block}.undis {DISPLAY: none}#hot {FILTER: progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=1.0); WIDTH:...
用js和css实现的苹果机桌面特效，非常经典
08-28
用js和css实现的苹果机桌面特效，非常经典
html模拟手机桌面,html+css+js 模拟win7桌面
weixin_39605905的博客
05-30 646
to&lowbar;char函数TO_CHAR 是把日期或数字转换为字符串,不能指定字符串长度. 使用TO_CHAR函数处理日期:TO_CHAR(number, '格式') eg:TO_CHAR(salary,'$99,999.99 ...问题：QXcbConnection&colon; Could not connect to displayWkhtmltopdf 失败 (错误代...
iPhone5S土豪金模板是一款适合App Store开发企业网站模板。_html网站模板_网页源码移动端前端_H5模.rar
08-04
这款模板以iPhone5S的经典土豪金色调为主题，结合了现代网页设计的流行元素，如响应式布局、H5技术以及优雅的CSS3动画效果，旨在为App Store开发企业创造一个既时尚又实用的在线存在感。HTML网站模板作为网页的骨架...
iPhone5s黄色主题Bootstrap应用模板详解
3. iPhone5s手机介绍模板：作为该模板的主体，其设计应该围绕展示iPhone5s手机的功能、应用特性等方面展开。模板可能包括产品图片展示、功能亮点说明、用户评价、购买链接等元素，以便于用户了解并可能引导用户购买...
iPhone5S数码产品模板
11-24
【标题】"iPhone5S数码产品模板"是一个专为展示iPhone5S或其他类似尺寸智能手机设计的网页模板。这款模板主要用于电子商品网站，尤其是那些专注于手机销售或相关服务的平台。它通常包含一系列精心布局的板块，能够...
iphone5s页面全屏幻灯片滚动.zip
07-04
总的来说，"iPhone5s页面全屏幻灯片滚动"是一个集视觉设计、交互体验和前端技术于一体的网页组件，它体现了现代网页开发中对用户体验的重视，以及利用JavaScript和CSS3实现动态效果的能力。通过分析和学习这个压缩包...
iPhone5s官网介绍页面制作教程
iPhone5s介绍页面使用该插件来实现向下滚动时的幻灯片播放效果。 - **jQuery.resizeEnd.min.js**：这个插件主要用于响应式网页设计中，当窗口大小调整（resize）结束时触发特定的函数或操作。它帮助页面内容在不同的...
jQuery+CSS3模拟苹果桌面系统
03-04
想要把你的网站改成漂亮的苹果桌面系统么？jquery+css3也能实现这样的效果啦
CSS3仿苹果手机iPhone桌面文件夹特效
06-11
CSS3仿苹果手机iPhone桌面文件夹特效，一款纯css3绘制的iPhone界面样式，点击app文件夹打开展示，效果很流畅，与iPhone桌面打开文件夹效果一样。
纯 js 仿手机桌面左右滑动切换图片
03-17
纯 js 仿手机桌面左右滑动切换图片
仿小米，IOS桌面图标拖拽分组效果源码，已在实际项目上应用，很稳定
07-13
这是仿IOS，仿小米桌面图标拖动分组的源码，分组后以文件夹形式展示，已经在实际应用上应用，是很好的源码，可以直接使用
HTML5 css3绘制的iphone手机苹果图标.rar
07-10
HTML5 css3绘制的iphone手机苹果图标，苹果手机中的图标，你相信这是用CSS3绘制出来的吗？比图片设计软件设计的更精彩，而且还是氏量格式，放大网页也不会失真的iphone图标，相信你会觉得很精彩。
Sortablejs + css 模仿安卓桌面，实现可拖拽排序的主页图标+文件夹收纳
sinat_27171121的博客
07-03 6930
Sortablejs 已有功能可以参考官方demo (http://sortablejs.github.io/Sortable/#grid),这里简要说一下，Sortablejs 已经实现了：拖拽动画、多选、跨容器拖拽、网格、等等，详细的可以在主页(https://github.com/SortableJS/Sortable)的参数列表中查看，里边还有各种回调，不过用不到呵呵，我选择直接改 Sortable.js 其中网格通过将item项的样式改为 display:inline-grid 实现。原本demo
js仿苹果手机屏幕可拖动图标AssistiveTouch
Owen的博客
03-13 1051
$(document).ready(function () { var _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start; //按下 document.getElementById("id").addEventListene...
5c5cSs,暗光提升明显 iPhone 5s/5c/5样张对比
weixin_33038783的博客
08-04 679
【PConline 对比评测】iPhone 5s作为iPhone 5的升级版本，其主要升级点在三个方面——64位架构中央处理器、Touch ID指纹识别、全新iSight摄像头，当然你硬要说iPhone 5s最大的升级在于土豪金配色的发布我也拦不住你。我们知道iPhone 5s摄像头虽然仍维持在了800万像素的水平，但其摄像头光圈增大，感光原件尺寸也增大，那么相比较同是800万像素的iPhone ...
js+css模拟操作系统界面
yangpanwww的博客
12-23 335
先看图，所谓有图有真相！   实现了操作系统的模拟，拖动窗口等 。非常的炫！   里面主要是 _Window.js 是个工具文件.所有的实现都是通过它封装的方法实现   而且写的非常的不错！  强烈建议学习下！...
使用HTML+CSS3实现Windows 7桌面效果
任务栏程序鼠标 Hover 效果与桌面程序鼠标 Hover 效果类似，也是通过使用 CSS3 的 :hover 伪类选择器来实现的。当鼠标悬停在任务栏程序图标上时，会触发 Hover 效果，显示出程序图标的详细信息。 三、开始菜单效果 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值