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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
javascript代码实现简易计算器
Jan 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
php5.2.0内存管理改进
2007/01/22 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python机器学习之贝叶斯分类
2018/03/26 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
3分钟学会一个Python小技巧
2018/11/23 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
学校联谊活动方案
2014/02/15 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
Redis全局ID生成器的实现
2022/06/05 Redis
React自定义hook的方法
2022/06/25 Javascript