纯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:0case 49: // M:1case 50: // M:2case 52: // M:4case 53: // M:5case 54: // M:6case 55: // M:7case 57: // M:9case 96: // B:0case 97: // B:1case 98: // B:2case 99: // B:3case 100: // B:4case 101: // B:5case 102: // B:6case 103: // B:7case 104: // B:8case 105: // B:9case 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();

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

转载于:https://www.cnblogs.com/pansly/p/3313556.html

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

纯CSS3做3D动画魔方
之前本来就做过一次,忘了记录了.最近在做抽奖程序的时候看到那个界面就又想再做一次,于是作为小白的掌柜就再次做了一个很简单的3D动画魔方.主要用到的知识点是相对定位(position: relativ ...
纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
css3-13 css3的3D动画如何实现
css3-13 css3的3D动画如何实现一.总结一句话总结:这里是transform+setInterval实现.transform属性里面的rotate属性值变成rotateX或rotateY ...
用纯CSS3实现闪闪发光的动画
用纯CSS3实现闪闪发光的动画,最终实现效果如下图所示以下展示实现该效果的代码: <!DOCTYPE HTML><html><head><title> ...
纯css3可爱仙人掌动画效果
下载地址纯css3可爱仙人掌动画效果,html+css代码,没有使用任何JavaScript代码实现的动画效果. dd:
纯CSS3冰川北极熊动画js特效
下载地址纯CSS3冰川北极熊动画特效是一款卡通可爱的北极熊站在冰面上漂浮动画场景特效. dd:
纯css3彩色3d雪糕
下载地址纯css3代码实现的彩色3d雪糕,带动画效果的css3冰淇淋代码. dd:
html纯css页面滑动效果,纯css3滑动按钮动画效果
android系统的滑动按钮相信大家都使用过.这款插件就是使用纯css3制作出类似android系统的滑动按钮效果. HTML html代码十分简单.使用一个大的div作为包裹容器,给它一个class ...

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

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

最新文章

热门文章