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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
node+multer实现图片上传的示例代码
Feb 18 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
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
十个Python程序员易犯的错误
2015/12/15 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python中实现词云图的示例
2020/12/19 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
残疾人创业典型事迹
2014/02/01 职场文书
八一演出活动方案
2014/02/03 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
元旦趣味活动方案
2014/08/22 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年店长工作总结
2014/11/17 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
员工升职自我评价
2019/03/26 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
python实现A*寻路算法
2021/06/13 Python
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
python代码实现备忘录案例讲解
2021/07/26 Python
MySql数据库 查询时间序列间隔
2022/05/11 MySQL