纯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:;border-bottom-left-radius:; padding:;}
.nav li.hassubnav a.current{ border-radius:15px; height:36px;}
.nav li.hassubnav:hover a.current{ height: 38px;border-bottom-right-radius:;border-bottom-left-radius:;}
.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:;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:;}
.nav ul li{ clear:both;padding-left:; background:#004574;width: 100px; text-align:center; border-top:1px solid #00629b;height:;overflow: hidden;padding:;-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:; font-size:14px; padding:;}
.nav li:hover > ul{ opacity:;*display:block;display:block\0;}
.nav li:hover > ul li{height: 36px;overflow: visible;padding:;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();
后续还有一些技术点会总结出来,欢迎批评指正,谢谢。
纯CSS3实现3D动画导航,html5 webRTC技术实现免费网页电话拨打的更多相关文章
- 纯css3实现的动画导航菜单
测试咯 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特 ...
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- 一款纯css3实现的动画加载导航
之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- 纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
- 纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wrap& ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 一款纯css3实现的环形导航菜单
之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览 ...
- 纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
随机推荐
- C# 代码重启windows服务
ServiceController service = new ServiceController("EnergyRecordService"); protected void b ...
- 第二十一章 数据访问(In .net4.5) 之 序列化
1. 概述 应用程序间传递数据,需要先将数据对象转化为字符流或字节流的形式,然后接收端收到后再转化回原始的数据对象.这就是序列化与反序列化. 本章介绍 .net中的序列化与反序列化.序列化器的种类 以 ...
- 008-python基础-数据类型
一.基本数据类型: 数字 int 字符串 str 布尔值 bool 真或假 1或0 列表 list 元组 tuple (不可变列表) 字典 dict (无序)
- highcharts 显示点值的效果
plotOptions: { line: { /* <s:if test='#request.rdflags=="point"'> <s:if test=&quo ...
- 菜鸟学习SSH——目录
菜鸟学习Struts--配置Struts环境 菜鸟学习Struts--简易计算器 菜鸟学习Struts--bean标签库 菜鸟学习Struts--Scope属性 菜鸟学习Struts--国际化 菜鸟学 ...
- js实现对身份证校验
var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古&quo ...
- oracle 11g 添加控制文件
OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...
- Android--PullToRefreshListView 的简单使用
原文: http://blog.csdn.net/lmj623565791/article/details/38238749; pull-to-refresh对ListView进行了封装,叫做:Pu ...
- linux 捕获信号处理中遇到的死锁
tag: 信号 signal sigchld 死锁 堆栈 我们的程序需要捕获信号自己处理,所以尝试对1-32的信号处理(后面33-64的信号不处理).但是在调试代码时,发现一个线程死锁的问题.程序 ...
- JS如何获取多个相同class标签并分别再输出各自的文本
function getClass(boo) { var span = $("span.w");//获取所有的span标签 <span class="w" ...