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

2019-11-20 11:41:26

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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实现的数值范围range2dslider选取插件特效多款代码分享

下一篇：JS实现自动切换文字的导航效果代码