JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
作者：休闲生活文化
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例,可以实现逼真模拟手机拨号盘界面并实现点击输入对应号码的功能,需要的朋友可以参考下
本文实例讲述了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"&
&meta http-equiv="Content-Type" content="text/ 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().
$('.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('#');
padding:0;
::selection{
background:
color:#4196b7;
font:normal 12px arial,sans-
height:600
border-radius:80px / 40
border-top:3px solid #222;
background:#6d6d6b;
background:-moz-linear-gradient(left, #6d6d6b 0%, #3b3b3c 1%, #%, #%, #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%,#%,#%,#2e2e2e 100%);
background:-o-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#%,#%,#2e2e2e 100%);
background:-ms-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#%,#%,#2e2e2e 100%);
background:linear-gradient(to right, #6d6d6b 0%,#3b3b3c 1%,#%,#%,#2e2e2e 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6b', endColorstr='#2e2e2e',GradientType=1 );
.nexus:before{
content:'';
z-index:-1;
background:#
border-radius:25% / 45%;
border-top:1px solid #444;
.nexus:after{
content:'';
z-index:-1;
background:#
border-radius:25% / 45%;
border-bottom:2px solid #555;
background:#333;
margin-left:-33
border-radius:0 0 6px 6
border:1px solid #474747;
border-top:0;
box-shadow:inset 0 0 1
height:467
background:
.phone-infos{
width:100%;
background:#303030;
.phone-infos span{
font-size:11
margin:2px 3
.phone-infos .battery{
background:#4196b7;
margin-top:2
margin-top:4
.phone-infos .battery:before{
background:#4196b7;
content:'';
.phone-infos .gsm{
margin-right:10
.phone-infos .gsm b{
.phone-infos .gsm b:before{
content:'';
border-bottom:3px solid #4196b7;
border-left:3
.phone-infos .gsm .signal1{
background:#4196b7;
.phone-infos .gsm .signal2{
background:#4196b7;
.phone-infos .gsm .signal3{
background:#4196b7;
.phone-infos .gsm .signal4{
background:#808184;
.phone-infos .gsm .signal4:before{
border-bottom:3px solid #808184;
border-left:3
.phone-tabs{
border-bottom:1px solid #858383;
background:#303030;
.phone-tabs li{
list-style:
-webkit-transition:all .05s ease-
-moz-transition:all .05s ease-
-o-transition:all .05s ease-
transition:all .05s ease-
.phone-tabs li a{
-webkit-transition:all .05s ease-
-moz-transition:all .05s ease-
-o-transition:all .05s ease-
transition:all .05s ease-
text-decoration:
background:#303030;
text-align:
padding-top:10
.phone-tabs li a:active{
background:rgba(104,208,249,.4);
.phone-tabs li a:before{
background:#858383;
content:'';
.phone-tabs li:first-child a:before{
.phone-tabs li.current a:after{
content:'';
width:100%;
background:#4196b7;
.phone-tab-contents{
width:100%;
height:365
.phone-tab-contents .tab{
width:100%;
height:365
background:#3f3f3f;
-webkit-transition:all .25s ease-
-moz-transition:all .25s ease-
-o-transition:all .25s ease-
transition:all .25s ease-
.phone-tab-contents .tab.phone{
background:#3f3f3f url(data:image/
base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOO07anMSKLgQT2Z3nOggvCBECKwILIAmBBdAGQIABJuxH63EphJgAAAAB
JRU5ErkJggg==)
.phone-tab-contents .tab.clock{
.phone-tab-contents .tab.peoples{
.phone-tab-contents.getclock .tab.phone{
.phone-tab-contents.getclock .tab.clock{
.phone-tab-contents.getclock .tab.peoples{
.phone-tab-contents.getpeoples .tab.phone{
.phone-tab-contents.getpeoples .tab.clock{
.phone-tab-contents.getpeoples .tab.peoples{
.phone-tab-contents .tab.clock p:first-child,
.phone-tab-contents .tab.peoples p:first-child{
margin-top:50
.phone-tab-contents .tab.peoples p,
.phone-tab-contents .tab.clock p{
width:90%;
padding:10px 5% 0;
text-align:
.phone-tab-contents .tab.peoples p a,
.phone-tab-contents .tab.clock p a{
.main-btns{
width:100%;
background:#303030;
.main-btns li{
list-style:
.main-btns li a{
text-align:
.number-area{
font-size:20
text-align:
padding:20px 0 20
width:100%;
border-bottom:1px solid #333;
margin-bottom:10
.number-area .numbers{
padding:0 10
.number-area .delete-btn{
margin-right:10
.numbers-container{
.numbers-container span{
font-size:30
text-indent:22
padding:15px 0;
.numbers-container span:active{
background:rgba(104,208,249,.4);
.numbers-container span em{
font-size:12
font-style:
padding-bottom:5
.numbers-container span em.brd:before{
background:#
content:'';
.numbers-container span em:after{
background:#4196b7;
content:'';
.numbers-container span.fff{
text-align:
.call-btn{
width:100%;
text-align:
border-top:1px solid #333;
padding-top:10
/* Icon Group */
display:inline-
font-style:
.icon.phone{
background:#
-webkit-transform:rotate(145deg);
-moz-transform:rotate(145deg);
-o-transform:rotate(145deg);
transform:rotate(145deg);
border-radius:0 6px 6px 0;
margin-top:5
.icon.phone:before{
content:'';
background:#
border-radius:3px 6px 7px 3
.icon.phone:after{
content:'';
background:#
border-radius:3px 6px 7px 3
.icon.clock{
background:#303030;
border:2px solid #
border-radius:22
margin-top:4
.icon.clock:before{
content:'';
background:#
.icon.clock:after{
content:'';
background:#
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
-moz-transform:rotate(120deg);
transform:rotate(120deg);
.icon.peoples{
background:#
border-radius:12px 12px 0 0;
margin-top:20
.icon.peoples:after{
content:'';
background:#
border:2px solid #303030;
border-radius:18
z-index:10;
.icon.peoples:before{
content:'';
background:#303030;
z-index:20;
border-radius:0 0 15px 15
.icon.close{
font-size:12
color:#303030;
background:#
line-height:12
margin-top:5
.icon.close:before{
content:'';
border-style:
border-width:6.5px 8px 6.5px 0;
border-color:transparent #ffffff tra
.icon.home{
border:2px solid #
border-top:0;
margin-top:15
.icon.home:after{
background:#
content:'';
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
.icon.home:before{
background:#
content:'';
-webkit-transform:rotate(110deg);
-moz-transform:rotate(110deg);
-o-transform:rotate(110deg);
transform:rotate(110deg);
.icon.windows{
border:2px solid #
margin-top:13
.icon.windows:after{
background:#
content:'';
.icon.windows:before{
background:#
content:'';
.icon.back{
background:#
font-size:18
line-height:0
text-indent:-16
font-family:sans-
margin-top:12
.icon.back:before{
background:#303030;
content:'';
z-index:10;
.icon.back:after{
border:2px solid #
content:'';
border-radius:10
&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&
&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&
&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 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 class="call-btn"&
&i class="icon phone"&&/i&
&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 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&
&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&
&div style="text-align:clear:"&
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在Android4.0中Contacts拨号盘界面剖析(源码)
已经说过拨号界面的分页是怎么实现的，下面我们分三次来分享拨号页面内的每一个页面的具体实现，我们先从拨号盘开始说起。
CallLogFragment mCallLogF
PhoneFavoriteFragment mPhoneFavoriteF
DialpadFragment
CallLogFragment
PhoneFavoriteFragment
DialpadFragment.java
&&&&&&&&&&&&&&&&&&&&&&&
&titleActionBartab
&tabtabsetIcon()DialtactsActivity.javasetupDialer()
DialpadFragment
FragmentFragment2
&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&
&onCreateViewonCreateView
View fragmentView = inflater.inflate(R.layout., container, false);
dialpad_fragment.xml
&LinearLayout
android:id="@+id/digits_container"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.200"
android:layout_marginTop="@dimen/dialpad_vertical_margin"
android:gravity="center"
android:background="@drawable/dialpad_background"
&com.android.contacts.dialpad.
&&&&&&&&&&&
android:id="@+id/digits"
&&&&&&&&&&&
android:layout_width="0dip"
&&&&&&&&&&&
android:layout_weight="1"
&&&&&&&&&&&
android:layout_height="match_parent"
&&&&&&&&&&&
android:layout_alignParentLeft="true"
&&&&&&&&&&&
android:gravity="center"
&&&&&&&&&&&
android:textAppearance="@style/DialtactsDigitsTextAppearance"
&&&&&&&&&&&
android:textColor="?android:attr/textColorPrimary"
&&&&&&&&&&&
android:nextFocusRight="@+id/overflow_menu"
&&&&&&&&&&&
android:background="@android:color/transparent"
&ImageButton
&&&&&&&&&&&
android:id="@+id/"
&&&&&&&&&&&
android:layout_width="48dip"
&&&&&&&&&&&
android:layout_height="match_parent"
&&&&&&&&&&&
android:layout_alignParentRight="true"
&&&&&&&&&&&
android:src="@drawable/ic_menu_overflow"
&&&&&&&&&&
android:contentDescription="@*android:string/action_menu_overflow_description"
&&&&&&&&&&&
android:nextFocusLeft="@id/digits"
&&&&&&&&&&&
android:background="?android:attr/selectableItemBackground"/&
&/LinearLayout&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
图3&输入框示意图&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
digits_containerdigitsoverflow_menu
EditTextDigitsEditText
DigitsEditText
overflow_menu
onCreateView
final View
overflowMenuButton =
fragmentView.findViewById(R.id.overflow_menu);
if (overflowMenuButton != null) {
if (ViewConfiguration.get(getActivity()).hasPermanentMenuKey())
&&&&&overflowMenuButton.setVisibility(View.GONE);
overflowMenuButton.setOnClickListener(this);
button should appear only when there's no hardware menu
dialpad.xml
&ImageButton android:id="@+id/one"
style="@style/DialtactsDialpadButtonStyle"
&&&&&&&&&&
&&&&&&&&&&&
android:contentDescription="@string/description_image_button_one"
ImageButtonid ,style
styleImageButton
name="DialtactsDialpadButtonStyle"&
name="android:layout_width"&0dip&/item&
name="android:layout_height"&match_parent&/item&
name="android:layout_weight"&1&/item&
name="android:background"&?android:attr/selectableItemBackground&/item&
name="android:soundEffectsEnabled"&false&/item&
android:background android:soundEffectsEnabled
android:backgroundImageButton
android:soundEffectsEnabled设置点击或触摸时是否有声音效果
回过来，我们再来看看ImageButton的前景
android:src="@drawable/dial_num_1"
很显然，这个一个图片嘛，有啥好看的？您不仅会这样想。
实际上这个是一个图片吗？不是，也是，更确切的说是一个图片组，下面我们来看看这个图片组到底有什么神秘的
xmlns:android="/apk/res/android"&
&!-- &item
android:state_pressed="true"
android:drawable="@drawable/dial_num_1"
&item android:state_focused="true"
android:drawable="@drawable/dial_num_1" /&
android:drawable="@drawable/dial_num_1_wht"
&/selector&
哈哈，原来是个selector，通过其中的条件可以添加点击，触摸等等效果，这个在我们平时开发的过程中还是比较常用的，朋友们一定要记住哦！
dialpad_additional_buttons.xml
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。