本文实例讲述了jquery比较简洁的软键盘特效实现方法。分享给大家供大家参考。具体实现方法如下：

运行效果图如下：

1. html主要部分如下：

复制代码 代码如下:<div id="container">

<textarea id="write" rows="6" cols="60"></textarea>

<ul id="keyboard">

<li><span>`</span><span>~</span></li>

<li><span>1</span><span>!</span></li>

<li><span>2</span><span>@</span></li>

<li><span>3</span><span>#</span></li>

<li><span>4</span><span>$</span></li>

<li><span>5</span><span>%</span></li>

<li><span>6</span><span>^</span></li>

<li><span>7</span><span>&</span></li>

<li><span>8</span><span>*</span></li>

<li><span>9</span><span>(</span></li>

<li><span>0</span><span>)</span></li>

<li><span>-</span><span>_</span></li>

<li><span>=</span><span>+</span></li>

<li>delete</li>

<li>tab</li>

<li>q</li>

<li>w</li>

<li>e</li>

<li>r</li>

<li>t</li>

<li>y</li>

<li>u</li>

<li>i</li>

<li>o</li>

<li>p</li>

<li><span>[</span><span>{</span></li>

<li><span>]</span><span>}</span></li>

<li><span></span><span>|</span></li>

<li>caps lock</li>

<li>a</li>

<li>s</li>

<li>d</li>

<li>f</li>

<li>g</li>

<li>h</li>

<li>j</li>

<li>k</li>

<li>l</li>

<li><span>;</span><span>:</span></li>

<li><span>'</span><span>"</span></li>

<li>return</li>

<li>shift</li>

<li>z</li>

<li>x</li>

<li>c</li>

<li>v</li>

<li>b</li>

<li>n</li>

<li>m</li>

<li><span>,</span><span><</span></li>

<li><span>.</span><span>></span></li>

<li><span>/</span><span>?</span></li>

<li>shift</li>

<li></li>

</ul>

</div>

2. jQuery代码部分需要引入两个文件，具体如下：

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/keyboard.js"></script>

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。