jQuery html5模拟笔记本键盘打字输入文本效果代码



82 325 109



特效描述:jQueryhtml5 模拟笔记本键盘 打字输入文本效果,这是一款基于jQuery的模拟键盘事件的应用,键盘上除了功能键,其他键都可以用这款插件来模拟。当你敲击键盘上的键时,这款应用会帮助你获取到这个键的事件,并在页面上的模拟键盘中以动画的形式展现出来,相当实用。

代码结构

1. 引入JS

<script src="js/prefixfree.min.js"></script>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>

2. HTML代码

  <div class='switch'>
  <div class='switcher'></div>
</div>
<div class='wrapper'>
  <ul>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
    <li>
      <div class='text'></div>
      <div class='finger'></div>
    </li>
  </ul>
</div>
<input placeholder='Type Something Creative ;)'>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 背景切换 大图切换 键盘 切换按钮

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到