推荐阅读
用javascript实现改变TEXTAREA滚动条和按钮的颜色，以及怎样让滚动条变得扁平
请问怎样才能改变TEXTAREA滚动条和按钮的颜色，以及怎样让滚动条变得扁平，而不是突出的 谢谢，分不多了，不好意思 1楼 <textarea style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-CO>>>详细阅读
地址：http://www.17bianji.com/kaifa2/JS/30581.html
1/2 1
javascript下用键盘控制层的移动的代码
作者： 来源：www.28hudong.com 2013-03-30 03:32:35 阅读次 我要评论
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>键盘控制层的移动</title> <style type="text/css"> <!-- #Div { position:absolute; width:238px; height:135px; left:expression((body.clientWidth - this.offsetWidth)/2); top:expression((body.clientHeight - this.offsetHeight)/2); z-index:1; text-align:center; background:#AFDBFF; border:#006699 1px solid; } #Txt{ font-size:9pt; position:absolute; width:200px; top:expression((Div.offsetHeight - this.offsetHeight)/2); left:expression((Div.offsetWidth - this.offsetWidth)/2); } #Txt p{ font-size:9pt; margin:8px; } #Txt font{ color:#FF0000; font-size:9pt; } #Layer1 { border:#006699 1px solid; padding:10px; font-size:9pt; color:#336699; position:absolute; top:expression((body.clientHeight - this.offsetHeight)/2); left:expression((body.clientWidth - this.offsetWidth)/2 + Div.offsetWidth); } #Layer1 Input { font-size:9pt; color:#336699; } #Int { text-align:right; } --> </style> </head> <body> <div id="Div"><span id="Txt"><p>请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>，</p><p> 试试看有什么效果？ </p></span></div> <span id="Layer1">控制键设置:<br> 向上移动: <input name="Up" type="text" value="↑" size="6"><br> 向下移动: <input name="Down" type="text" value="↓" size="6"><br> 向左移动: <input name="Left" type="text" value="←" size="6"><br> 向右移动: <input name="Right" type="text" value="→" size="6"><br> 每次移动 <input name="Int" type="text" id="Int" value="5" size="4" maxlength="3"> px;</span> </body> </html> <script language="javascript"> <!-- //alert(txt.style.top); var up,down,left,right; up = 38; down = 40; left = 37; right = 39; function document.onkeydown() { // alert(event.keyCode); //左：37 上：38 右：39 下：40 var int; int = parseInt(document.getElementById("Int").value); if(int == "NaN") int = 5; var str = "",press,evet; var div = document.getElementById("Div"); var txt = document.getElementById("Txt"); if(event.srcElement.tagName == "INPUT") { if(event.srcElement == document.getElementById("Int")) { if(event.keyCode == 13) document.body.focus(); if((event.keyCode < 96 || event.keyCode > 105) && event.keyCode != 8 && event.keyCode != 46 && !(event.keyCode >= 37 && event.keyCode <= 40) ) event.returnValue = false; return; } else { switch(event.keyCode) { case 37:{ event.srcElement.value = "←"; break; } case 38:{ event.srcElement.value = "↑"; break; } case 39:{ event.srcElement.value = "→"; break; } case 40:{ event.srcElement.value = "↓"; break; } } switch(event.srcElement) { case document.getElementById("Up"):{ up = event.keyCode; break; } case document.getElementById("Down"):{ down = event.keyCode; break; } case document.getElementById("Left"):{ left = event.keyCode; break; } case document.getElementById("Right"):{ right = event.keyCode; break; } } } } else { switch(event.keyCode) { case left:{ press = "<font> ← </font>"; evet = "<font>向 <b>左</b> 移动</font>" + " " + int + " px 。"; div.style.left = (parseInt(div.currentStyle.left) - int) + "px"; if(parseInt(div.style.left) <= 0) { evet = "已经到了 <font>最左边</font> ，无法再 <font>向左</font> 移动。"; div.style.left = "0px"; break ; } break; } case up:{ press = "<font> ↑ </font>"; evet = "<font>向 <b>上</b> 移动</font>" + " " + int + " px 。"; div.style.top = (parseInt(div.currentStyle.top) - int) + "px"; if(parseInt(div.style.top) <= 0) { evet = "已经到了 <font>最上边</font> ，无法再 <font>向上</font> 移动。"; div.style.top = "0px"; break ; } break; } case right:{ press = "<font> → </font>"; evet = "<font>向 <b>右</b> 移动</font>" + " " + int + " px 。"; div.style.left = (parseInt(div.currentStyle.left) + int) + "px"; if(parseInt(div.style.left) >= (parseInt(document.body.clientWidth) - parseInt(div.offsetWidth))) { div.style.left = parseInt(document.body.clientWidth) - parseInt(div.offsetWidth); evet = "已经到了 <font>最右边</font> ，无法再 <font>向右</font> 移动。"; break ; } break; } case down:{ press = "<font> ↓ </font>"; evet = "<font>向 <b>下</b> 移动</font>" + " " + int + " px 。"; div.style.top = (parseInt(div.currentStyle.top) + int) + "px"; if(parseInt(div.style.top) >= (parseInt(document.body.clientHeight) - parseInt(div.offsetHeight))) { div.style.top = parseInt(document.body.clientHeight) - parseInt(div.offsetHeight); evet = "已经到了 <font>最下边</font> ，无法再 <font>向下</font> 移动。"; break ; } break; } default: { return; } } str = "<p>您按下了" + press + "键，</p>"; str += "<p>该图层" + evet; txt.innerHTML = str; } } //--> </script>
键盘控制层的移动
请分别按下 ↑、↓、←、→，
试试看有什么效果？
控制键设置:
向上移动:
向下移动:
向左移动:
向右移动:
每次移动
px;
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
关键词： 探索发现
乐购科技部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与乐购科技进行文章共享合作。
网友点评
精彩导读
科技快报
品牌展示© 2013-2016 IT技术 京ICP备11016124号-4
京公网安备 11011202000261号