純CSS3實現3D動畫導航，html5 webRTC技術實現免費網頁電話撥打

花了一週的時間完成了 說吧 （免費網頁電話） 的前端開發工做，先將技術點總結以下:

免費電話採用最新的html5 webRTC 技術 實現互聯網和電信MIS網互通實現網頁電話，目前只有 google chrome 支持，若是你想實現免費電話撥打，測試地址：

https://www.10086china.com/index.html?id=OTkxMzA3MjUwODM3MzE5OQ==  （長連接，順便賺點積分，目前只支持chrome瀏覽器哦，哈哈） 

一、  導航（主要採用純CSS3 實現） 

 DOM:

<ul class="nav">
      <li><a class="current" href="index.html">首頁</a></li>    
      <li><a class="" href="features.html">功能介紹</a></li>
      <li class="hassubnav"><a class="" href="jifenactive.html">活動<span class="navicon"></span></a>
       <ul>
	 <li><a href="###" class="messages">邀請達人</a></li>
	 <li><a href="###" class="signout">簽到達人</a></li>       
         <li><a href="###" class="signout">遊戲達人</a></li>       
        </ul>
      </li>
      <li class="hassubnav"><a href="userinfo.html">我的中心<span class="navicon"></span></a>
        <ul>
  	 <li><a href="###" class="documents">個人積分</a></li>
	 <li><a href="###" class="messages">積分兌換</a></li>
	 <li><a href="###" class="signout">邀請記錄</a></li>       
         <li><a href="###" class="signout">簽到獎勵</a></li>       
       </ul>     
     </li>
   <li><a href="###">免費線路圖</a></li>
</ul>

　CSS (主要採用CSS3動畫transition和僞類:after,:before)

.nav{ float:right; padding-top:53px;}
.nav li {float: left;line-height: 40px;padding-left: 20px;position: relative;}
.nav a {position: relative;color: #fff;font-size: 16px;height: 36px;line-height: 36px;display: inline-block;padding: 0 10px;border-radius: 15px;-moz-transition: 0.5s;-o-transition: 0.5s;- webkit-transition: 0.5s;transition: 0.5s;overflow: hidden;}
.nav a span {position: relative;display: inline-block;-webkit-transition: -webkit-transform 0.3s;-moz-transition: -moz-transform 0.3s;transition: transform 0.3s;}
.nav a span::before {position: absolute;top: 100%;content: attr(data-hover);-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.nav a:hover span, #header .nav a:focus span {-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);}
.nav li .navicon{ display:inline-block; width: 11px;height: 9px;background:url(../images/nav_icon_2.png) no-repeat left top; margin-left:5px; }
.nav li.hassubnav a{ width:100px; text-align:center; display: inline-block;height: 38px;border-bottom-right-radius:0;border-bottom-left-radius:0; padding:0;}
.nav li.hassubnav a.current{ border-radius:15px; height:36px;}
.nav li.hassubnav:hover  a.current{ height: 38px;border-bottom-right-radius:0;border-bottom-left-radius:0;}
.nav a.current, #header .nav a:hover, #header .nav li.hassubnav:hover a{ background-color:#004574;}
.nav li.hassubnav:hover ul a{ background:none;}
.nav ul {position: absolute;top: 40px;top: 38px\0;display: none\0;left: 20px;opacity: 0;background: #1f2024;-webkit-border-radius: 0 0 5px 5px;-moz-border-radius: 0 0 5px 5px;border-radius:  0 0 5px 5px;-webkit-transition: opacity .25s ease .1s;-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease  .1s;width: 100px;z-index: 2000;}
.nav ul li{ clear:both;padding-left: 0; background:#004574;width: 100px; text-align:center; border-top:1px solid #00629b;height: 0;overflow: hidden;padding: 0;-webkit-transition: height .25s ease .1s;-moz-transition: height .25s ease .1s;-o-transition: height .25s ease .1s;-ms-transition: height .25s ease .1s;transition: height .25s ease .1s;}
.nav ul li a{ background:none; border-radius:0; font-size:14px; padding:0;}
.nav li:hover > ul{ opacity: 1;*display:block;display:block\0;}
.nav li:hover > ul li{height: 36px;overflow: visible;padding: 0;line-height: 36px;}
.nav ul li:hover{ background:#0384e1;}
.nav ul li a:hover{ background:none;}

撥號盤功能：文本框只接受 數字，和手機號碼檢測，鍵盤按鍵和網頁鍵盤對應

<div class="usercallbox userboxcon">
   <div class="inpubox">
     <input id="dial_input" type="text" value="" />
     <span class="inputTips">輸入手機號當即撥打</span>
     <a href="javascript:void(0);" class="delvalulebtn"></a> <a href="javascript:void(0);" id="contactsbtn" class="contactsbtn"></a>           
     <div class="error_tips">請輸入正確的手機號碼！</div>
   </div>
   <div class="dialkey" id="dialkey"> 
    <a href="javascript:void(0);" class="key_97 key_49" data="1"><span class="one">1</span></a> 
    <a href="javascript:void(0);" class="key_98 key_50" data="2"><span class="two">2</span></a> 
    <a href="javascript:void(0);" class="key_99 key_51" data="3"><span class="three">3</span></a> 
    <a href="javascript:void(0);" class="key_100 key_52" data="4"><span class="four">4</span></a> 
    <a href="javascript:void(0);" class="key_101 key_53" data="5"><span class="five">5</span></a> 
    <a href="javascript:void(0);" class="key_102 key_54" data="6"><span class="six">6</span></a> 
    <a href="javascript:void(0);" class="key_103 key_55" data="7"><span class="seven">7</span></a> 
    <a href="javascript:void(0);" class="key_104 key_56" data="8"><span class="eight">8</span></a> 
    <a href="javascript:void(0);" class="key_105 key_57" data="9"><span class="nine">9</span></a> 
    <a href="javascript:void(0);" class="key_96 key_48" data="0"><span class="zero">0</span></a> 
   </div>
    <a href="javascript:void(0);" class="callbtn" id="callbtn"></a> 
</div>

　jquery插件

$.fn.keywork = function (options) {
	var defaults = {
	  keyTarget:$('#dialkey')
	},
	_this = $(this),
	deltag = _this.parent().find('.delvalulebtn'),
	tiptag = _this.parent().find('.inputTips'),
	params = $.extend(defaults, options || {}); 
	_this.unbind('keyup').bind('keyup', keyUphandle).unbind('keydown').bind('keydown', keyDownhandle).blur(function(){
	  if('' == _this.val()) {
		deltag.hide();
		tiptag.show();
	  }
	}).focus(function(){
	 // tiptag.hide();
	});	
	tiptag.click(function(){
		_this.focus();
	})
	deltag.click(function(){
	  var val =  _this.val();
	  _this.focus().val(val.slice(0, val.length-1))
	  if( val.length < 2) deltag.fadeOut();
	})
	function keyhandle(keyEvent, fun){
		var keycode = keyEvent.keyCode;
		switch (keycode) {
			case 48: // M:0
			case 49: // M:1
			case 50: // M:2
			case 52: // M:4
			case 53: // M:5
			case 54: // M:6
			case 55: // M:7
			case 57: // M:9
			case 96: // B:0
			case 97: // B:1
			case 98: // B:2
			case 99: // B:3
			case 100: // B:4
			case 101: // B:5
			case 102: // B:6
			case 103: // B:7
			case 104: // B:8
			case 105: // B:9
			case 51:  // M:3 
			case 56:  // M:8 
			  fun(keycode);
			  deltag.fadeIn();
			  tiptag.hide();
			  break
		}
	}
	function keyDownhandle(e) {
		var  e = e || window.event;
		$(this).find('a').addClass('current'); 
		keyhandle(e, function(Digit){
		  params.keyTarget.find('.key_'+Digit).addClass('current');
		})
	}	
	function keyUphandle(e) {
		var  e = e || window.event;
		var val = $(this).val();
		var keycode = e.keyCode;
		 params.keyTarget.find('.key_'+keycode).removeClass('current'); 
		$(this).val(val.replace(/\D/g,''));
		$('.error_tips').hide();
	}		
	params.keyTarget.find('a').click(function(){ 
		var digitV = $(this).attr('data');
		var val = _this.val();
		_this.focus().val(val + digitV);
		deltag.fadeIn()
		tiptag.hide();
		return false;
	});
}
$('#dial_input').keywork();

　　後續還有一些技術點會總結出來，歡迎批評指正，謝謝。