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 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python深入学习之上下文管理器
2014/08/31 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
python字典与json转换的方法总结
2020/12/28 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
时尚圣经:The Fashion Bible
2019/03/03 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
在校生党员自我评价
2013/09/25 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
先进学校事迹材料
2014/12/30 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技