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 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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面向对象概念
2011/11/06 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
在校生党员自我评价
2013/09/25 职场文书
财务主管的岗位职责
2013/12/30 职场文书
社团文化节邀请函
2014/01/10 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
财务部会计岗位职责
2015/02/03 职场文书
教师个人自我评价
2015/03/04 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers