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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
Jquery倒计时源码分享
May 16 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
Vue.use源码分析
Apr 22 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
vue远程加载sfc组件思路详解
Dec 25 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网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
《观舞记》教学反思
2014/04/16 职场文书
校庆活动策划方案
2014/06/05 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle