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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
react实现移动端下拉菜单的示例代码
Jan 16 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读取文件内容后清空文件示例代码
2014/03/18 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python处理Excel文件实例代码
2017/06/20 Python
python的Tqdm模块的使用
2018/01/10 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python怎么判断模块安装完成
2020/06/19 Python
python连接mysql有哪些方法
2020/06/24 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Python实现随机爬山算法
2021/01/29 Python
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
勤俭节约主题班会
2015/08/13 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书