⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 5.html

📁 《CSS完全使用详解》 源文件下载 书籍源码
💻 HTML
字号:
🔍 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//En" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>CSS Demo</title>
<style>
body { background-color: #FFFFFF; color: #000000; }
</style>
<script language="javascript">
//<![CDATA[
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
    if (ns4) block = document.blockDiv
    if (ie4) block = blockDiv.style
    block.xpos = parseInt(block.left)
    block.ypos = parseInt(block.top)
    block.activeleft = false
    block.activeright = false
    block.activeup = false
    block.activedown = false

    document.onkeydown = keyDown
    document.onkeyup = keyUp
    if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
}

function keyDown(e) {
    if (ns4) {var nKey=e.which; var ieKey=0}
    if (ie4) {var ieKey=event.keyCode; var nKey=0}
    if ((nKey==52 || ieKey==100) && !block.activeleft) { // 4 向左
        block.activeleft = true
        block.activeright = false
        slideleft()
    }
    if ((nKey==54 || ieKey==102) && !block.activeright) { // 6 向右
        block.activeright = true
        block.activeleft = false
        slideright()
    }
    if ((nKey==56 || ieKey==104) && !block.activeup) { // 8 向上
        block.activeup = true
        block.activedown = false
        slideup()         
    }
    if ((nKey==50 || ieKey==98) && !block.activedown) { // 2 向下
        block.activedown = true
        block.activeup = false
        slidedown()
    }
}

function keyUp(e) {
    if (ns4) {var nKey=e.which; var ieKey=0}
    if (ie4) {var ieKey=event.keyCode; var nKey=0}
    if (nKey==52 || ieKey==100) block.activeleft = false
    if (nKey==54 || ieKey==102) block.activeright = false
    if (nKey==56 || ieKey==104) block.activeup = false
    if (nKey==50 || ieKey==98) block.activedown = false
}

function slideleft() {
    if (block.activeleft) {
        block.xpos -= 5
        block.left = block.xpos
        status = "x:" + block.xpos + " y:" + block.ypos // 在状态栏上显示当前位置
        setTimeout("slideleft()",20)
    }
}

function slideright() {
    if (block.activeright) {
        block.xpos += 5
        block.left = block.xpos
        status = "x:" + block.xpos + " y:" + block.ypos
        setTimeout("slideright()",20)
    }
}

function slideup() {
    if (block.activeup) {
        block.ypos -= 5
        block.top = block.ypos
        status = "x:" + block.xpos + " y:" + block.ypos
        setTimeout("slideup()",20)
    }
}

function slidedown() {
    if (block.activedown) {
        block.ypos += 5
        block.top = block.ypos
        status = "x:" + block.xpos + " y:" + block.ypos
        setTimeout("slidedown()",20)
    }
}
//]]>
</script>
</head>

<body onload="init()">
<p>单击小键盘上的键控制小方块运动
<br>2 = 向下, 4 = 向左, 6 = 向右, 8 = 向上</p>
<div id="blockDiv" style="position: absolute; left: 50px; top: 75px; width: 40px; height: 40px; background-color: #FF0000; border: solid 1px #000000;"></div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -