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 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
JS实现从对象获取对象中单个键值的方法示例
Jun 05 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php中memcache 基本操作实例
2015/05/17 PHP
PHP生成树的方法
2015/07/28 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
vue.js项目打包上线的图文教程
2017/11/16 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
Python入门篇之函数
2014/10/20 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
python使用psutil模块获取系统状态
2016/08/27 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
python代码实现猜拳小游戏
2020/11/30 Python
利用python爬取有道词典的方法
2020/12/08 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
物业保安员岗位职责
2014/03/14 职场文书
校园安全演讲稿
2014/05/09 职场文书
先进事迹演讲稿
2014/09/01 职场文书
反邪教观后感
2015/06/11 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python