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 判断函数类型完美解决方案
Sep 02 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
python实现员工管理系统
2018/01/11 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
创业计划书六个要素
2013/12/26 职场文书
《学会合作》教学反思
2014/04/12 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
电影地道战观后感
2015/06/04 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python