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代码
Sep 02 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 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 CKEditor 上传图片实现代码
2009/11/06 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
简述php环境搭建与配置
2016/12/05 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
理解Python中的类与实例
2015/04/27 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
委托书模板
2014/04/04 职场文书
医学专业大学生求职信
2014/07/12 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
盗窃案辩护词
2015/05/21 职场文书
暑假打工感想
2015/08/07 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python