JS CSS touch screen phone dial interface and function simulation

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Android Phone Dial screen keypad effects </title>
<script type= "Text/javascript" src= "/ajaxjs/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). The 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>
<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>
<div>http://www.999jiujiu.com/</div>
</body>

JS CSS touch screen phone dial interface and function simulation