编程 Javascript

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手机拨号界面特效代码，希望大家可以喜欢。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 类与静态类的实现(续)

Apr 02 Javascript

jQuery的实现原理的模拟代码 -2 数据部分

Aug 01 Javascript

javascript实现TreeView 无刷新展开的实例代码

Jul 13 Javascript

jquery下拉select控件操作方法分享(jquery操作select)

Mar 25 Javascript

jQuery操作表格（table）的常用方法、技巧汇总

Apr 12 Javascript

使用Math.max,Math.min获取数组中的最值实例

Apr 25 Javascript

node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

Apr 26 Javascript

vue路由嵌套的SPA实现步骤

Nov 06 Javascript

使用DataTable插件实现异步加载数据

Nov 19 Javascript

vue项目打包后打开页面空白解决办法

Jun 29 Javascript

Vuex模块化应用实践示例

Feb 03 Javascript

vue使用过滤器格式化日期

Jan 20 Vue.js

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