ホームページ > 記事 > ウェブフロントエンド > jQuery モバイル ダイヤル インターフェイスの特殊効果コード Sharing_jquery
jQuery モバイル ダイヤル インターフェイスの特殊効果コード Sharing_jquery
- WBOYオリジナル
- 2016-05-16 15:42:261645ブラウズ
この記事の例では、jQuery 携帯電話ダイヤル インターフェイスの特殊効果について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、jQuery に基づいた携帯電話ダイヤル インターフェイスの特殊効果ソース コードであり、携帯電話ダイヤル インターフェイス スタイル コードのパーソナライズされた電話 Web バージョンです。インターフェイス上の数字ボタンをクリックすると、携帯電話のダイヤル効果がリアルタイムで表示され、下部のダイヤル ボタンをクリックすると、通話のダイヤル効果をシミュレートできます。
运行效果图： -------------------查看效果 下載源网---------- --------
ヒント: ブラウザが正常に動作しない場合は、閲覧モードを切り替えてみてください。
あなたと共有される 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 モバイル ダイヤル インターフェイスの特殊効果コードです。気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。