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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JQuery教学之性能优化
May 14 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
基于postman获取动态数据过程详解
Sep 08 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+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
javascript读取xml
2006/11/04 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
进一步了解Python中的XML 工具
2015/04/13 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python处理写入数据代码讲解
2020/10/22 Python
基于python实现坦克大战游戏
2020/10/27 Python
flask项目集成swagger的方法
2020/12/09 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
大型活动组织方案
2014/05/10 职场文书
广告宣传策划方案
2014/05/21 职场文书
街道务虚会发言材料
2014/10/20 职场文书