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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
js实现淘宝首页的banner栏效果
Nov 26 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
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
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
Python struct.unpack
2008/09/06 Python
Python中super关键字用法实例分析
2015/05/28 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
临床医师个人自我评价
2014/04/06 职场文书
干部考察材料范文
2014/12/24 职场文书
离婚案件被告代理词
2015/05/23 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
关于vue-router-link选择样式设置
2022/04/30 Vue.js