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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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的无限分类实现想法~
2007/01/02 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python选课系统开发程序
2016/09/02 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python导入模块交叉引用的方法
2019/01/19 Python
python网络应用开发知识点浅析
2019/05/28 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
文秘专业自荐信
2013/10/14 职场文书
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
邮政员工辞职信
2014/01/16 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
护理目标管理责任书
2014/07/25 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL