jQuery手机拨号界面特效代码分享


Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery手机拨号界面特效。分享给大家供大家参考。具体如下:
这是一款基于jQuery实现的手机拨号界面特效源码,是一款个性的phone网页版手机拨号界面样式代码。点击界面上数字按键可实时显示手机拨号效果,点击底部拨号键可模拟拨号通话的效果。
运行效果图:                         -------------------查看效果 下载源码-------------------

jQuery手机拨号界面特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery手机拨号界面特效代码如下

<!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>jQuery手机拨号界面特效代码</title>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div class="nexus">
 <div class="speaker">
 <span class="circle"></span>
 <a>
  <span class="bo">拨号中·····</span>
  <span class="tong">通话中······</span>
  
 </a>
 <!-- <span class="numbers" style="font-size:12px; font-weight:normal; color:#989696;"></span> -->
 </div>
 <div class="screen">
 <div class="phone-infos">
  <button>视频</button>
  
 </div>
 
 <div class="phone-tab-contents">
 
  <div class="tab phone current">
  <div class="number-area">
   <span class="numbers"></span>
   <span class="phone-pic" ></span>
   <span class="re-phone">是否重播</span>
   <span class="over-phone">结束通话</span>
   
  </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>
  <p class="cover"></p>
  
  </div>
  
  
  
 </div>
 
 <ul class="main-btns">
  <li><a class="btn-people"></a></li>
  <li><a class="btn-btn"></a></li>
  <li class="yes-no"><span class="yes"></span><span class="no" onclick="show()"></span></li>
  <li><a class="btn-del delete-btn"></a></li>
 </ul>
 </div>
</div>
 
<div style="text-align:center;clear:both;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

</body>
</html>

以上就是为大家分享的jQuery手机拨号界面特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 #Javascript
javascript实现自动输出文本(打字特效)
Aug 27 #Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 #Javascript
javascript模拟C#格式化字符串
Aug 26 #Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 #Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 #Javascript
jQuery带时间的日期控件代码分享
Aug 26 #Javascript
You might like
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP编写RESTful接口
2016/02/23 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
深入理解Python中装饰器的用法
2016/06/28 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
详解【python】str与json类型转换
2019/04/29 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
详解python的super()的作用和原理
2020/10/29 Python
Jdbc数据访问技术面试题
2012/03/30 面试题
交通事故赔偿协议书
2014/04/15 职场文书
合作协议书格式
2014/08/19 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript