本文实例讲述了JS CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下：
首先来看一下运行效果图：
具体实现代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿安卓手机拨号界面按键特效</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Current Tab */
$('.phone-tabs li a').click(function() {
$('.phone-tabs li').removeClass('current');
$(this).parent().addClass('current');
});
/* Simple Tab */
var tabContents = $('.phone-tab-contents');
$('.phone-tabs .getphone').click(function() {
tabContents.removeClass('getpeoples');
tabContents.removeClass('getclock');
});
$('.phone-tabs .getclock').click(function() {
tabContents.removeClass('getpeoples');
tabContents.addClass('getclock');
});
$('.phone-tabs .getpeoples').click(function() {
tabContents.removeClass('getclock');
tabContents.addClass('getpeoples');
});
/* Delete */
$('.delete-btn').click(function() {
var numbers = $('.number-area .numbers').text();
var numbers2 = $('.number-area .numbers').text().length;
$('.number-area .numbers').text(numbers.substr(0, numbers2 - 1));
});
/* Pusher */
var pusher = {
number: function(num) {
$('.numbers-container .pushed' + num + '').click(function() {
$('.number-area .numbers').append('' + num + '');
});
}
}
pusher.number(1);
pusher.number(2);
pusher.number(3);
pusher.number(4);
pusher.number(5);
pusher.number(6);
pusher.number(7);
pusher.number(8);
pusher.number(9);
pusher.number(0);
$('.numbers-container .pushedasterisk').click(function() {
$('.number-area .numbers').append('*');
});
$('.numbers-container .pushednumber').click(function() {
$('.number-area .numbers').append('#');
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
::selection{
background:transparent;
}
body{
color:#4196b7;
font:normal 12px arial,sans-serif;
}
.nexus{
position:relative;
margin:10px auto;
width:314px;
height:600px;
border-radius:80px / 40px;
border-top:3px solid #222;
background:#6d6d6b;
background:-moz-linear-gradient(left, #6d6d6b 0%, #3b3b3c 1%, #979797 3%, #686868 4%, #2e2e2e 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#6d6d6b), color-stop(1%,#3b3b3c), color-stop
(3%,#979797), color-stop(4%,#686868), color-stop(100%,#2e2e2e));
background:-webkit-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background:-o-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background:-ms-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background:linear-gradient(to right, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6b', endColorstr='#2e2e2e',GradientType=1 );
}
.nexus:before{
position:absolute;
content:'';
z-index:-1;
top:-6px;
left:0px;
background:#babbbb;
width:314px;
height:78px;
border-radius:25% / 45%;
border-top:1px solid #444;
}
.nexus:after{
position:absolute;
content:'';
z-index:-1;
bottom:-5px;
left:0px;
background:#babbbb;
width:314px;
height:78px;
border-radius:25% / 45%;
border-bottom:2px solid #555;
}
.speaker{
position:absolute;
left:0px;
top:0px;
width:65px;
height:5px;
background:#333;
left:50%;
margin-left:-33px;
border-radius:0 0 6px 6px;
border:1px solid #474747;
border-top:0;
box-shadow:inset 0 0 1px black;
}
.screen{
position:absolute;
left:17px;
top:64px;
width:282px;
height:467px;
background:white;
}
.phone-infos{
width:100%;
height:17px;
background:#303030;
}
.phone-infos span{
float:right;
font-size:11px;
margin:2px 3px;
}
.phone-infos .battery{
width:8px;
height:10px;
background:#4196b7;
margin-top:2px;
position:relative;
margin-top:4px;
}
.phone-infos .battery:before{
width:4px;
height:2px;
position:absolute;
left:2px;
top:-2px;
background:#4196b7;
content:'';
}
.phone-infos .gsm{
position:relative;
height:12px;
margin-right:10px;
}
.phone-infos .gsm b{
float:left;
position:absolute;
bottom:0;
}
.phone-infos .gsm b:before{
position:absolute;
content:'';
top:-3px;
width:0;
height:0;
border-bottom:3px solid #4196b7;
border-left:3px solid transparent;
}
.phone-infos .gsm .signal1{
width:3px;
height:0px;
background:#4196b7;
left:-8px;
}
.phone-infos .gsm .signal2{
width:3px;
height:3px;
background:#4196b7;
left:-4px;
}
.phone-infos .gsm .signal3{
width:3px;
height:7px;
background:#4196b7;
}
.phone-infos .gsm .signal4{
width:3px;
height:11px;
background:#808184;
left:4px;
}
.phone-infos .gsm .signal4:before{
border-bottom:3px solid #808184;
border-left:3px solid transparent;
}
.phone-tabs{
border-bottom:1px solid #858383;
background:#303030;
height:50px;
}
.phone-tabs li{
float:left;
list-style:none;
-webkit-transition:all .05s ease-in;
-moz-transition:all .05s ease-in;
-o-transition:all .05s ease-in;
transition:all .05s ease-in;
}
.phone-tabs li a{
-webkit-transition:all .05s ease-in;
-moz-transition:all .05s ease-in;
-o-transition:all .05s ease-in;
transition:all .05s ease-in;
text-decoration:none;
background:#303030;
cursor:pointer;
height:40px;
width:94px;
display:block;
text-align:center;
position:relative;
padding-top:10px;
}
.phone-tabs li a:active{
background:rgba(104,208,249,.4);
}
.phone-tabs li a:before{
height:20px;
width:1px;
background:#858383;
position:absolute;
content:'';
left:0;
top:16px;
}
.phone-tabs li:first-child a:before{
display:none;
}
.phone-tabs li.current a:after{
position:absolute;
content:'';
left:0px;
bottom:0px;
width:100%;
height:5px;
background:#4196b7;
}
.phone-tab-contents{
width:100%;
height:365px;
position:relative;
overflow:hidden;
}
.phone-tab-contents .tab{
width:100%;
height:365px;
position:absolute;
background:#3f3f3f;
position:absolute;
-webkit-transition:all .25s ease-in;
-moz-transition:all .25s ease-in;
-o-transition:all .25s ease-in;
transition:all .25s ease-in;
}
.phone-tab-contents .tab.phone{
left:0;
background:#3f3f3f url(data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOO07anMSKLgQT2Z3nOggvCBECKwILIAmBBdAGQIABJuxH63EphJgAAAAB
JRU5ErkJggg==) repeat;
}
.phone-tab-contents .tab.clock{
left:282px;
}
.phone-tab-contents .tab.peoples{
left:564px;
}
.phone-tab-contents.getclock .tab.phone{
left:-282px;
}
.phone-tab-contents.getclock .tab.clock{
left:0px;
}
.phone-tab-contents.getclock .tab.peoples{
left:282px;
}
.phone-tab-contents.getpeoples .tab.phone{
left:-564px;
}
.phone-tab-contents.getpeoples .tab.clock{
left:-282px;
}
.phone-tab-contents.getpeoples .tab.peoples{
left:0px;
}
.phone-tab-contents .tab.clock p:first-child,
.phone-tab-contents .tab.peoples p:first-child{
margin-top:50px;
}
.phone-tab-contents .tab.peoples p,
.phone-tab-contents .tab.clock p{
width:90%;
padding:10px 5% 0;
text-align:center;
color:#bbb;
}
.phone-tab-contents .tab.peoples p a,
.phone-tab-contents .tab.clock p a{
color:#fff;
}
.main-btns{
width:100%;
height:34px;
background:#303030;
}
.main-btns li{
list-style:none;
float:left;
}
.main-btns li a{
width:30px;
display:block;
width:94px;
height:34px;
text-align:center;
}
.number-area{
color:#fff;
font-size:20px;
text-align:center;
padding:20px 0 20px;
width:100%;
overflow:hidden;
border-bottom:1px solid #333;
margin-bottom:10px;
}
.number-area .numbers{
width:230px;
float:left;
padding:0 10px;
height:14px;
}
.number-area .delete-btn{
float:right;
margin-right:10px;
cursor:pointer;
}
.numbers-container{
overflow:hidden;
}
.numbers-container span{
width:94px;
height:30px;
float:left;
font-size:30px;
text-indent:22px;
position:relative;
padding:15px 0;
cursor:pointer;
}
.numbers-container span:active{
background:rgba(104,208,249,.4);
}
.numbers-container span em{
font-size:12px;
color:#fff;
font-style:normal;
position:absolute;
left:22px;
bottom:15px;
padding-bottom:5px;
}
.numbers-container span em.brd:before{
position:absolute;
width:14px;
height:2px;
background:#fff;
content:'';
top:9px;
left:24px;
}
.numbers-container span em:after{
width:35px;
height:2px;
background:#4196b7;
content:'';
position:absolute;
top:16px;
left:22px;
}
.numbers-container span.fff{
color:#fff;
text-align:center;
}
.call-btn{
width:100%;
text-align:center;
border-top:1px solid #333;
padding-top:10px;
}
/* Icon Group */
.icon{
display:inline-block;
font-style:normal;
position:relative;
}
.icon.phone{
background:#fff;
width:5px;
height:26px;
-webkit-transform:rotate(145deg);
-moz-transform:rotate(145deg);
-o-transform:rotate(145deg);
transform:rotate(145deg);
border-radius:0 6px 6px 0;
margin-top:5px;
}
.icon.phone:before{
position:absolute;
content:'';
width:8px;
height:9px;
background:#fff;
left:-6px;
bottom:-1px;
border-radius:3px 6px 7px 3px;
}
.icon.phone:after{
position:absolute;
content:'';
width:8px;
height:9px;
background:#fff;
left:-6px;
top:-1px;
border-radius:3px 6px 7px 3px;
}
.icon.clock{
background:#303030;
width:22px;
height:22px;
border:2px solid #fff;
border-radius:22px;
margin-top:4px;
}
.icon.clock:before{
position:absolute;
content:'';
height:9px;
width:2px;
background:#fff;
top:2px;
left:10px;
}
.icon.clock:after{
position:absolute;
content:'';
height:9px;
width:2px;
background:#fff;
top:9px;
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
-moz-transform:rotate(120deg);
transform:rotate(120deg);
left:14px;
}
.icon.peoples{
background:#fff;
height:10px;
width:22px;
border-radius:12px 12px 0 0;
margin-top:20px;
}
.icon.peoples:after{
position:absolute;
content:'';
background:#fff;
width:14px;
height:14px;
border:2px solid #303030;
border-radius:18px;
top:-14px;
left:2px;
z-index:10;
}
.icon.peoples:before{
position:absolute;
content:'';
background:#303030;
width:10px;
height:5px;
left:6px;
top:-5px;
z-index:20;
border-radius:0 0 15px 15px;
}
.icon.close{
font-size:12px;
color:#303030;
background:#fff;
width:14px;
height:12px;
line-height:12px;
margin-top:5px;
}
.icon.close:before{
position:absolute;
content:'';
left:-8px;
width:0px;
height:0px;
border-style:solid;
border-width:6.5px 8px 6.5px 0;
border-color:transparent #ffffff transparent transparent;
}
.icon.home{
width:25px;
height:8px;
border:2px solid #bbbbbb;
border-top:0;
margin-top:15px;
}
.icon.home:after{
width:2px;
height:17px;
background:#bbbbbb;
position:absolute;
top:-12px;
left:5px;
content:'';
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
.icon.home:before{
width:2px;
height:17px;
background:#bbbbbb;
position:absolute;
top:-12px;
right:5px;
content:'';
-webkit-transform:rotate(110deg);
-moz-transform:rotate(110deg);
-o-transform:rotate(110deg);
transform:rotate(110deg);
}
.icon.windows{
width:20px;
height:8px;
border:2px solid #bbbbbb;
margin-top:13px;
}
.icon.windows:after{
width:2px;
height:14px;
background:#bbbbbb;
position:absolute;
content:'';
right:-6px;
top:-6px;
}
.icon.windows:before{
width:22px;
height:2px;
background:#bbbbbb;
position:absolute;
content:'';
right:-4px;
top:-6px;
}
.icon.back{
width:20px;
height:2px;
background:#bbb;
color:#bbb;
font-size:18px;
line-height:0px;
text-indent:-16px;
font-family:sans-serif;
margin-top:12px;
}
.icon.back:before{
width:7px;
height:11px;
background:#303030;
position:absolute;
content:'';
left:8px;
z-index:10;
top:2px;
}
.icon.back:after{
width:20px;
height:7px;
border:2px solid #bbb;
position:absolute;
content:'';
border-radius:10px;
}
</style>
</head>
<body>
<div class="nexus">
<div class="speaker"></div>
<div class="screen">
<div class="phone-infos">
<span>03.15</span>
<span class="battery"></span>
<span class="gsm">
<b class="signal1"></b>
<b class="signal2"></b>
<b class="signal3"></b>
<b class="signal4"></b>
</span>
</div>
<ul class="phone-tabs">
<li class="current"><a class="getphone"><i class="icon phone"></i></a></li>
<li><a class="getclock"><i class="icon clock"></i></a></li>
<li><a class="getpeoples"><i class="icon peoples"></i></a></li>
</ul>
<div class="phone-tab-contents">
<div class="tab phone current">
<div class="number-area">
<span class="numbers"></span>
<a class="delete-btn"><i class="icon close">x</i></a>
</div>
<div class="numbers-container">
<span class="pushed1">1<em class="brd">o o</em></span>
<span class="pushed2">2<em>ABC</em></span>
<span class="pushed3">3<em>DEF</em></span>
<span class="pushed4">4<em>GHI</em></span>
<span class="pushed5">5<em>JKL</em></span>
<span class="pushed6">6<em>MNO</em></span>
<span class="pushed7">7<em>PQRS</em></span>
<span class="pushed8">8<em>TUV</em></span>
<span class="pushed9">9<em>WXYZ</em></span>
<span class="pushedasterisk fff">*</span>
<span class="pushed0">0<em>+</em></span>
<span class="pushednumber fff">#</span>
</div>
<div class="call-btn">
<i class="icon phone"></i>
</div>
</div>
<div class="tab clock">
<p>Not Ready</p>
<p>Visit Nexus 4 Official Page</p>
<p><a href="/">/</a></p>
<p>Visit My Site</p>
<p><a href="/">/</a></p>
</div>
<div class="tab peoples">
<p>Not Ready</p>
<p>Visit Nexus 4 Official Page</p>
<p><a href="/">/</a></p>
<p>Visit My Site</p>
<p><a href="/">/</a></p>
</div>
</div>
<ul class="main-btns">
<li><a><i class="icon back"><</i></a></li>
<li><a><i class="icon home"></i></a></li>
<li><a><i class="icon windows"></i></a></li>
</ul>
</div>
</div>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AMJavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。
C和JavaScript：连接解释Apr 23, 2025 am 12:07 AMC 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。
从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AMJavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。
Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AMPython更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。
C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AMJavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
4 周前ByDDD
Atomfall指南：项目位置，任务指南和技巧
1 个月前ByDDD
热工具
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
Atom编辑器mac版下载
最流行的的开源编辑器
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
