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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
JavaScript实现简单计算器
Mar 19 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python入门篇之字符串
2014/10/17 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
SQL Server面试题
2016/10/17 面试题
环境工程专业个人求职信
2013/12/05 职场文书
高中军训第一天感言
2014/03/06 职场文书
付款委托书范本
2014/04/04 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
安全教育观后感
2015/06/17 职场文书
同乡会致辞
2015/07/30 职场文书
初一军训感言
2015/08/01 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript
React自定义hook的方法
2022/06/25 Javascript