jQuery手机拨号界面特效代码分享

更新时间：2015年08月27日 09:22:38 投稿：lijiao

这篇文章主要介绍了jQuery手机拨号界面特效，整体特效非常逼真自然，推荐给大家，有需要的小伙伴可以参考下。

本文实例讲述了jQuery手机拨号界面特效。分享给大家供大家参考。具体如下：
这是一款基于jQuery实现的手机拨号界面特效源码，是一款个性的phone网页版手机拨号界面样式代码。点击界面上数字按键可实时显示手机拨号效果，点击底部拨号键可模拟拨号通话的效果。
运行效果图： -------------------查看效果下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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手机拨号界面特效代码，希望大家可以喜欢。

您可能感兴趣的文章:

jQuery v3.3.1的BUG以及解决办法(附解决方案)
这篇文章描述了我们 FineUIPro 产品更新中遇到的一个问题，最终将问题定位到 jQuery.position() 函数，虽然jQuery的做法是依照HTML规范来的，但是 jQuery.offsetParent() 和 jQuery.position() 两个函数有冲突，并且会导致之前的jQuery插件出错，应该算是一个BUG吧
2023-03-03
jQuery获取选中单选按钮radio的值
本文给大家分享两段实例代码给大家讲解jquery获取选中单选按钮radio的值，非常不错，具有参考借鉴价值，一起看看吧
2016-12-12
Jquery实现搜索框提示功能示例代码
数据量很大的情况下使用Ajax去实现真的不合适，于是想采用Jquery来实现方法，具体的示例代码如下，有需求的朋友可以参考下希望对大家有所帮助
2013-08-08
jQuery Selectors(选择器)的使用(七、子元素篇)
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！
2009-12-12
jQuery实现开关灯效果
这篇文章主要为大家详细介绍了jQuery实现开关灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
Jquery 自定义动画概述及示例
animate用于创建自定义动画的函数，这个函数的关键在于指定动画形式及结果样式属性对象，接下来为大家介绍下它的使用方法，感兴趣的朋友可以参考下哈
2013-03-03
jquery ajax 局部刷新小案例
这篇文章主要是对jquery ajax 局部刷新的小案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
jquery.blockUI.js上传滚动等待效果实现思路及代码
上传滚动等待效果想必大家在很多场合都有见过吧，本文将介绍jquery.blockUI.js实现上传滚动等待效果，感兴趣的你可不要错过了哈，希望可以帮助到你
2013-03-03
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
这篇文章主要介绍了JQuery+Bootstrap 自定义全屏Loading插件，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-07-07
快速学习jQuery插件 Form表单插件使用方法
快速学习jQuery插件中的Form表单插件使用方法，可以非常容易地、无侵入地升级HTML表单以支持Ajax，感兴趣的小伙伴们可以参考一下
2015-12-12

jQuery手机拨号界面特效代码分享

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具