手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery比较简洁的软键盘特效实现方法
jquery比较简洁的软键盘特效实现方法
摘要:本文实例讲述了jquery比较简洁的软键盘特效实现方法。分享给大家供大家参考。具体实现方法如下:运行效果图如下:1.html主要部分如下:复...

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

运行效果图如下:

jquery比较简洁的软键盘特效实现方法1

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程序设计有所帮助。

【jquery比较简洁的软键盘特效实现方法】相关文章:

jquery滚动特效集锦

JS/Jquery判断对象为空的方法

jQuery判断一个元素是否可见的方法

js比较日期大小的方法

jquery实现图片左右切换的方法

jquery控制表单输入框显示默认值的方法

JQuery中上下文选择器实现方法

jQuery获得字体颜色16位码的方法

jQuery实现给页面换肤的方法

jQuery实现延迟跳转的方法

精品推荐
分类导航