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


Posted in Javascript onMarch 19, 2015

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

运行效果图如下:

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

1. html主要部分如下:

<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>

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

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

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

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

Javascript 相关文章推荐
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 #Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 #Javascript
javascript实现简单的二级联动
Mar 19 #Javascript
jQuery实现360°全景拖动展示
Mar 18 #Javascript
自定义百度分享的分享按钮
Mar 18 #Javascript
javascript实现密码强度显示
Mar 18 #Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 #Javascript
You might like
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
mouse_on_title.js
2006/08/25 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Python os模块学习笔记
2015/06/21 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
网络安全类面试题
2015/08/01 面试题
六个一活动实施方案
2014/03/21 职场文书
个人买房协议书范本
2014/10/06 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
中班上学期个人总结
2015/02/12 职场文书
电影建党伟业观后感
2015/06/01 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
python实现Nao机器人的单目测距
2021/09/04 Python