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 DOM学习第一章 W3C DOM简介
Feb 19 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
checkbox使用示例
Aug 23 Javascript
js动态切换图片的方法
Jan 20 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
JavaScript中的各种宽高属性的实现
May 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设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python3.x中自定义比较函数
2015/04/24 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
python判断正负数方式
2020/06/03 Python
python中Django文件上传方法详解
2020/08/05 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
大学自荐信
2013/12/12 职场文书
合作协议书范本
2014/04/17 职场文书
学生干部培训方案
2014/06/12 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
田径运动会广播稿
2015/08/19 职场文书