本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
