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动态创建标签示例代码
Jun 09 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
Vue+Element自定义纵向表格表头教程
Oct 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python lxml中etree的简单应用
2019/05/10 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
办公自动化毕业生求职信
2014/03/09 职场文书
个人培训自我鉴定
2014/03/28 职场文书
演讲稿的写法
2014/05/19 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2014年班级工作总结
2014/11/14 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
情感电台广播稿
2015/08/18 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers