jquery比較簡(jiǎn)潔的軟鍵盤(pán)特效實(shí)現(xiàn)方法
更新時(shí)間：2015年03月19日 09:24:00 作者：代碼家園
這篇文章主要介紹了jquery比較簡(jiǎn)潔的軟鍵盤(pán)特效實(shí)現(xiàn)方法,實(shí)例分析了jQuery實(shí)現(xiàn)軟鍵盤(pán)特效的具體方法與功能效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jquery比較簡(jiǎn)潔的軟鍵盤(pán)特效實(shí)現(xiàn)方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
運(yùn)行效果圖如下：
1. html主要部分如下：
復(fù)制代碼 代碼如下:
<div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
<li class="symbol"><span class="off">7</span><span class="on">&</span></li>
<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
<li class="delete lastitem">delete</li>
<li class="tab">tab</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
<li class="symbol"><span class="off">'</span><span class="on">"</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li class="symbol"><span class="off">,</span><span class="on"><</span></li>
<li class="symbol"><span class="off">.</span><span class="on">></span></li>
<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem"> </li>
</ul>
</div>
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
<li class="symbol"><span class="off">7</span><span class="on">&</span></li>
<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
<li class="delete lastitem">delete</li>
<li class="tab">tab</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
<li class="symbol"><span class="off">'</span><span class="on">"</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li class="symbol"><span class="off">,</span><span class="on"><</span></li>
<li class="symbol"><span class="off">.</span><span class="on">></span></li>
<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem"> </li>
</ul>
</div>
2. jQuery代碼部分需要引入兩個(gè)文件，具體如下：
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/keyboard.js"></script>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
利用jQuery的deferred對(duì)象實(shí)現(xiàn)異步按順序加載JS文件
如果你現(xiàn)在對(duì)jQuery中的deferred還不了解,jQuery的deferred對(duì)象詳解一文接下來(lái)介紹deferred對(duì)象如何實(shí)現(xiàn)異步順序加載JS文件，感興趣的你可以參考下哈2013-03-03
本文給大家總結(jié)了關(guān)于jquery中頁(yè)面返回頂部的方法小結(jié)，以及各個(gè)方法的優(yōu)缺點(diǎn)介紹，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12
幻燈片效果通常用于展示相冊(cè)圖片或特色推薦內(nèi)容。一個(gè)漂亮的幻燈片更能吸引訪客的注意力。本文里面，收集了15款jquery幻燈片插件，讓你的圖片展示更漂亮，讓你的特色內(nèi)容更吸引人。2011-04-04
jquery觸發(fā)a標(biāo)簽跳轉(zhuǎn)事件示例代碼
本文為大家詳細(xì)介紹下如何使用jquery觸發(fā)a標(biāo)簽的跳轉(zhuǎn)事件，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
基于jQuery制作小圖標(biāo)上下滑動(dòng)特效
一個(gè)小圖標(biāo)特效，非常有趣的，下面給大家分享基于jquery制作的小圖標(biāo)上下滑動(dòng)特效，代碼簡(jiǎn)單易懂，需要的朋友參考下2017-01-01
jQuery 1.5最新版本的改進(jìn)細(xì)節(jié)分析
jQuery 1.5 beta1出來(lái)了，從學(xué)習(xí)跟進(jìn)上來(lái)說(shuō)，這一次已經(jīng)比較晚了（我竟然不知道1.5什么時(shí)候出的alpha，就這么beta了）。2011-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery綁定事件的幾種實(shí)現(xiàn)方式，感興趣的小伙伴們可以參考一下2016-05-05
基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
點(diǎn)擊后可以輸入排序的數(shù)字編號(hào)，移開(kāi)后自動(dòng)更新數(shù)據(jù)庫(kù)。2010-02-02
capacityFixed 基于jquery的類(lèi)似于新浪微博新消息提示的定位框
公司項(xiàng)目需求中有一個(gè)類(lèi)似于新浪微博新消息提示的定位框的效果，需要的朋友可以參考下。2011-05-05