This paper illustrates the method of Js+css to realize the interface and function simulation of touch screen mobile phone dial. Share to everyone for your reference. Specifically as follows:
First, let's look at the running effect chart:
The specific implementation code is as follows:
| <! 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> imitation android mobile phone dialing interface key effects </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 = $ ('. Numbe R-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 () {$ ('. Numb Er-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-g Radient (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:d XImageTransform.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 : 100%; height:17px; Background: #303030; }. Phone-infos span{float:right; font-size:11px margin:2px 3px; Phone-infos battery{; width:8px und: #4196b7; margin-top:2px; position:relative; margin-top:4px; Phone-infos. battery:before{width:4px; height:2px; position:absolute; left:2px; top:-2px: #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:3p X height:3px; Background: #4196b7; left:-4px; Phone-infos. GSM. signal3{width:3px height:7px background: #4196b7; Phone-infos. gsm. signal4{width:3px; height:1 1px; Background: #808184; left:4px; Phone-infos. GSM. signal4:before{border-bottom:3px Solid #808184 border-left:3px solid transparent;. phone-tabs{Bo rder-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 : #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: '; lef t:0px; bottom:0px; width:100%; height:5px; Background: #4196b7; }. phone-tab-contents{width:100%; height:365px position:relative; overflow:hidden; phone-tab-contents : 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: #3f3f3fURL (data:image/png; base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnbyblaaaakeleqvqiw2nkqaoo07anmskl Gqt2z3noggvcbeckwiliambbdagqiabjuxh63ephjgaaaab 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 Or: #bbb; Phone-tab-contents. Tab.peoples p A,. phone-tab-contents. Tab.clock p a{color: #fff; main-btns{width:100%; height:3 4px; Background: #303030; } .Main-btns li{list-style:none; float:left; Main-btns Li a{width:30px; display:block; width:94px; height:34px Gn: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-containerSpan 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; widt h: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; Hei ght: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;ight: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;} & lt;/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 "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> |
I hope this article will help you with your jquery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
