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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
如何编写jquery插件
Mar 29 jQuery
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python线程创建和终止实例代码
2018/01/20 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
六一节目主持词
2014/04/01 职场文书
求职自我推荐信
2014/06/25 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
《山中访友》教学反思
2016/02/24 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电