这篇文章主要介绍了jquery比较简洁的软键盘特效实现方法,实例分析了jQuery实现软键盘特效的具体方法与功能效果,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jquery比较简洁的软键盘特效实现方法。分享给大家供大家参考。具体实现方法如下：
运行效果图如下：
1. html主要部分如下：
复制代码 代码如下:
<div>
<textarea rows="6" cols="60"></textarea>
<ul>
<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="https://www.jb51.net/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/keyboard.js"></script>
完整实例代码点击此处本站下载。
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章: