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

前端技术 2023/09/09 JavaScript

本文实例讲述了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手机拨号界面特效代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/23598

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案