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 相关文章推荐
js三种排序算法分享
Aug 16 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JavaScript数据类型详解
Apr 01 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python求列表交集的方法汇总
2014/11/10 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python中@property的理解和使用示例
2019/06/11 Python
python中对数据进行各种排序的方法
2019/07/02 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
2014春晚主持词
2014/03/25 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
未婚证明书模板
2014/10/08 职场文书
追悼会答谢词
2015/01/05 职场文书
演讲比赛主持词
2015/06/29 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android