纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打

花了一周的时间完成了 说吧 （免费网页电话） 的前端开发工作，先将技术点总结如下:

免费电话采用最新的html5 webRTC 技术 实现互联网和电信MIS网互通实现网页电话，目前只有 google chrome 支持，如果你想实现免费电话拨打，测试地址：

https://www.10086china.com/index.html?id=OTkxMzA3MjUwODM3MzE5OQ==  （长链接，顺便赚点积分，目前只支持chrome浏览器哦，哈哈） 

1、  导航（主要采用纯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();

　　后续还有一些技术点会总结出来，欢迎批评指正，谢谢。