java设置拨号界面_JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下:
首先来看一下运行效果图:
具体实现代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
仿安卓手机拨号界面按键特效
$(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('#');
});
});
*{
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;
}
03.15
x
1o o
2ABC
3DEF
4GHI
5JKL
6MNO
7PQRS
8TUV
9WXYZ
*
0+
#
Not Ready
Visit Nexus 4 Official Page
/
Visit My Site
/
Not Ready
Visit Nexus 4 Official Page
/
Visit My Site
/
- <
希望本文所述对大家的jQuery程序设计有所帮助。
java设置拨号界面_JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例相关推荐
- HTML5响应式手机模板:电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 h ...
- HTML5响应式手机模板:电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 h ...
- QT实现滑动切换界面,ARM/Linux触屏滑动切换界面,切换Qwidget
QT实现滑动切换界面,触屏滑动切换界面 实现思想 实现过程 完整代码 实现思想 项目中要用到ARM,要求手势滑动能够切屏,首先我们想到使用 QGestureEvent,但使用起来比较麻烦,并且个人了解 ...
- 仿果壳网手机登陆界面源代码
这是效果 代码如下所示: <head><title>仿果壳网html5手机登陆界面源代码模板-懒人模板[http://www.lanrenmb.com/zt/]</tit ...
- 仿iphone触屏手机界面
介绍: jquery框架与coffeescript结合制作iphone苹果手机的IOS手机界面主触屏手指划过屏幕整个界面图片左右滑动的触摸效果 网盘下载地址: http://kekewl.net/cH ...
- 微信小程序 --- CSS实现仿网易云音乐播放界面效果(黑胶唱片与唱针纯CSS实现)
下面代码的效果是网易云音乐唱针和黑胶唱片的CSS效果实现方式,播放等并没贴出来 实现效果的范围 动态图效果预览: stylusW,panW是获取系统宽度计算后的参数 wxml部分: <!-- 黑 ...
- 仿腾讯手机管家快捷中心功能的实现方案
背景 想必用过Android腾讯手机管家或者做过相关研发的童鞋都会发现腾讯做了一个类似于iOS系统下的Panel功能,如下图一. 即从屏幕的底部或者侧部用手势划出快捷中心控制面板,如下图二. 有别于以 ...
- 索爱S60 java,谈谈索爱S60 触屏强机U5i的功能怎么样
索尼爱立信前一段时间上市的拍照牛机U1还没有褪去新机的光环,另一款名为U5i的手机已经露出了庐山真面目,从型号上看似乎U5i比U1要更强大,可是实际上U5i更像是U1的简化版,无论从外形大小还是硬件配 ...
- 使用css动画实现网易云音乐播放界面波浪动画效果
通过实现CSS实现仿网易云音乐播放界面动画效果,最终的效果如下 界面布局 图片也是实现滚动效果的,使用四个div,来标识每一帧波动的效果. <div class="container- ...
- 小马哥--高仿红米 note t208刷机 移植测试完美版中文触屏rec 界面图面观
高仿红米note t208机型 移植测试的miui界面中文触屏版rec, 修改挂载外置卡.修改系统分区.此机有两个版本 移动版与联通版,测试都ok.刷入后按住音量上与开机键进入中文触屏版rec ...
最新文章
- java 读取 excel poi_java poi怎么获取excel单元格的内容?
- 揭开SAP Fiori编程模型规范里注解的神秘面纱 - @OData.publish工作原理解析
- CSS中的px与物理像素、逻辑像素、1px边框问题
- 查看函数库.a函数符号信息
- URI 和 URL 的区别
- 【转】博客美化(5)为博客或系统添加一个强大的评论系统
- 你可以做一个更好的Coder为了自己的将来
- 联想教育应用使用说明(7.6版本)——第2章 联想教育应用的首次部署
- windows服务封装程序srvany和nssm的区别
- 【修改源码】hadoop 3.3.1 failed with status code 401 Response message: Authentication required
- 用photoShop简单提取他人的签名
- 加州房价模型(住房价格中位数)
- 初学Android,图形图像之使用Canvas,Paint绘图(二十五)
- R语言 Hurst指数计算
- spring开发常用的
- unity小球酷跑项目
- 徐荣谦《养好脾和肺 宝宝不积食不咳嗽长大个》【01】小儿常见病
- ListView 单条item刷新
- python中怎么赋值一个数为负无穷_python里面正无穷和负无穷问题?
- 安装WebSphere Application Server
热门文章
- 【中级软考—软件设计师】2操作系统2.6段页式存储【**】:2.6.1页式存储
- 交互设计师谈颠覆式创新 | Think different
- 北京理工计算机科学与应用,沈蒙_北京理工大学计算机学院
- win7 mysql 管理员权限,win7管理员权限问题 TrustInstaller 获取权限
- 【有机】镍催化非活化烯烃的不对称氢烷基化构建全烷基取代的饱和三级碳手性中心...
- 利用akshare读取50EFF期权2
- C讲坛之猜数字游戏的实现
- CentOS 7拨号上网(ADSL PPPoE)
- 向App Store提交二进制文件时报错ERROR ITMS-90096
- 论文笔记-Monocular Depth Estimation as Regression of Classification using Piled Residual Networks