html做键盘,用html+js+css做一个模拟键盘

1 //移动键盘

2 functiondragMing(idORclass1, idORclass2) {3 var obj = this; //这里的this是指dragMing对象么

4 this.idORclass1 = idORclass1; //给dragMing的idORclass1赋值

5 this.idORclass2 = idORclass2; //给dragMing的idORclass2赋值

6 this.deltaX = 0;7 this.deltaY = 0;8

9 functiondragStart(dragEvent) {10 obj.deltaX = dragEvent.clientX -$(obj.idORclass2).offset().left;11 obj.deltaY = dragEvent.clientY -$(obj.idORclass2).offset().top;12 $(document).bind("mousemove", dragMove);13 $(document).bind("mouseup", dragStop);14 dragEvent.preventDefault();15

16 }17 functiondragMove(dragEvent) {18 $(obj.idORclass2).css({19 "left": (dragEvent.clientX - obj.deltaX) + "px",20 "top": (dragEvent.clientY - obj.deltaY) + "px"

21 })22 dragEvent.preventDefault();23

24 }25 functiondragStop() {26 $(document).unbind("mousemove", dragMove);27 $(document).unbind("mouseup", dragStop);28

29 }30

31 $(document).ready(function() {32 $(obj.idORclass1).bind("mousedown", dragStart);33

34 })35 }36

37

38

39 //绘制键盘

40 functiondrawKeyboard(type) {41 $("#keyboardNum").empty();42 $("#keyboardLetterQ").empty();43 $("#keyboardLetterA").empty();44 $("#keyboardLetterZ").empty();45 $("#keyboardSpaceBar").empty();46

47 if (type == "lower") {48 var keyboardNum = { "192": "`", "49": "1", "50": "2", "51": "3", "52": "4", "53": "5", "54": "6", "55": "7", "56": "8", "57": "9", "48": "0", "189": "-", "187": "=", "8": "Backspace"};49 var keyboardLetterQ = { "81": "q", "87": "w", "69": "e", "82": "r", "84": "t", "89": "y", "85": "u", "73": "i", "79": "o", "80": "p", "219": "[", "221": "]"};50 var keyboardLetterA = { "20": "Caps Lock", "65"