jquery做的比较简洁的一款软键盘特效

jquery做的比较简洁的一款软键盘特效
 点击预览  点击下载

使用步骤,代码非常简单:

引用

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

html

  1. <div id="container"> 
  2.     <textarea id="write" rows="6" cols="60"></textarea> 
  3.     <ul id="keyboard"> 
  4.         <li class="symbol"><span class="off">`</span><span class="on">~</span></li> 
  5.         <li class="symbol"><span class="off">1</span><span class="on">!</span></li> 
  6.         <li class="symbol"><span class="off">2</span><span class="on">@</span></li> 
  7.         <li class="symbol"><span class="off">3</span><span class="on">#</span></li> 
  8.         <li class="symbol"><span class="off">4</span><span class="on">$</span></li> 
  9.         <li class="symbol"><span class="off">5</span><span class="on">%</span></li> 
  10.         <li class="symbol"><span class="off">6</span><span class="on">^</span></li> 
  11.         <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li> 
  12.         <li class="symbol"><span class="off">8</span><span class="on">*</span></li> 
  13.         <li class="symbol"><span class="off">9</span><span class="on">(</span></li> 
  14.         <li class="symbol"><span class="off">0</span><span class="on">)</span></li> 
  15.         <li class="symbol"><span class="off">-</span><span class="on">_</span></li> 
  16.         <li class="symbol"><span class="off">=</span><span class="on">+</span></li> 
  17.         <li class="delete lastitem">delete</li> 
  18.         <li class="tab">tab</li> 
  19.         <li class="letter">q</li> 
  20.         <li class="letter">w</li> 
  21.         <li class="letter">e</li> 
  22.         <li class="letter">r</li> 
  23.         <li class="letter">t</li> 
  24.         <li class="letter">y</li> 
  25.         <li class="letter">u</li> 
  26.         <li class="letter">i</li> 
  27.         <li class="letter">o</li> 
  28.         <li class="letter">p</li> 
  29.         <li class="symbol"><span class="off">[</span><span class="on">{</span></li> 
  30.         <li class="symbol"><span class="off">]</span><span class="on">}</span></li> 
  31.         <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li> 
  32.         <li class="capslock">caps lock</li> 
  33.         <li class="letter">a</li> 
  34.         <li class="letter">s</li> 
  35.         <li class="letter">d</li> 
  36.         <li class="letter">f</li> 
  37.         <li class="letter">g</li> 
  38.         <li class="letter">h</li> 
  39.         <li class="letter">j</li> 
  40.         <li class="letter">k</li> 
  41.         <li class="letter">l</li> 
  42.         <li class="symbol"><span class="off">;</span><span class="on">:</span></li> 
  43.         <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li> 
  44.         <li class="return lastitem">return</li> 
  45.         <li class="left-shift">shift</li> 
  46.         <li class="letter">z</li> 
  47.         <li class="letter">x</li> 
  48.         <li class="letter">c</li> 
  49.         <li class="letter">v</li> 
  50.         <li class="letter">b</li> 
  51.         <li class="letter">n</li> 
  52.         <li class="letter">m</li> 
  53.         <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li> 
  54.         <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li> 
  55.         <li class="symbol"><span class="off">/</span><span class="on">?</span></li> 
  56.         <li class="right-shift lastitem">shift</li> 
  57.         <li class="space lastitem">&nbsp;</li> 
  58.     </ul> 
  59. </div> 

转载请注明:代码家园 » jquery做的比较简洁的一款软键盘特效

也许你会喜欢和关注与本文内容高度相关的文章:

CSS+jQuery实现软键盘特效

JS版软键盘密码输入器

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)