zoukankan      html  css  js  c++  java
  • js入门

    将简单的图片用面向对象方法实现上下左右移动

    View Code
    <html>
    <head>
    <style>
    #div1{
    800px;
    height:400px;
    border:1px solid blue;
    margin-left:5px;
    margin-top:5px;
    background-color:blue;
    }
    #imgid{
    80px;
    height:100px;
    position:absolute;
    }
    #div2{
    text-align:center;
    }
    </style>
    <script language="javascript">
    function zouteng(){
    this.x=0;
    this.y=0;
    this.move=function(direct)
    {
    switch(direct){
    case 0:
    var imgval=document.getElementById("imgid");
    var top=imgval.style.top;
    top=parseInt(top.substr(0,top.length-2));
    imgid.style.top=(top-10)+"px";
    break;
    case 1:
    var imgval=document.getElementById("imgid");
    var left=imgval.style.left;
    left=parseInt(left.substr(0,left.length-2));
    imgid.style.left=(left+10)+"px";
    break;
    case 2:
    var imgval=document.getElementById("imgid");
    var top=imgval.style.top;
    top=parseInt(top.substr(0,top.length-2));
    imgid.style.top=(top+10)+"px";
    break;
    case 3:
    var imgval=document.getElementById("imgid");
    var left=imgval.style.left;
    left=parseInt(left.substr(0,left.length-2));
    imgid.style.left=(left-10)+"px";
    break;
    }
    }
    }
    
    var zouteng =new zouteng();
    
    function ztmove(direct){
    switch(direct){
    case 0:
    zouteng.move(direct);
    break;
    case 1:
    zouteng.move(direct);
    break;
    case 2:
    zouteng.move(direct);
    break;
    case 3:
    zouteng.move(direct);
    break;
    }
    }
    </script>
    </head>
    <body>
    <div id="div1">
    <table id="table1">
    <tr>
    <img src=1.jpg id="imgid" style="top=10px ;left=15px"></img>
    </tr>
    </table>
    </div>
    <div id="div2">
    <table border=1px >
    <tr><td colspan=3>方向菜单</td></tr>
    <tr>
    <td></td>
    <td><input type="button" value="↑" onclick="ztmove(0);"/></td>
    <td></td>
    </tr>
    <tr>
    <td><input type="button" value="←" onclick="ztmove(3);"></td>
    <td></td>
    <td><input type="button" value="→" onclick="ztmove(1);"></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="button" value="↓" onclick="ztmove(2);"></td>
    <td></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
  • 相关阅读:
    圆周率的计算与进度条
    Python的使用方法
    Python科学计算库
    linux 命令总结[转]
    如何在 Windows 平台上下載 Android 的源码[转]
    装MSN报错问题解决 无法定位程序输入点except handler4 common 于动态链接库nsvcrt.dll【转】
    编写xorg.conf,简单三行解决ubuntu分辩率不可调的问题【转】
    谁说 Android 手机一定要 root 权限才能截屏?![转]
    给自己的忠告[转]
    lockdir加密bug[转]
  • 原文地址:https://www.cnblogs.com/zouteng/p/2737880.html
Copyright © 2011-2022 走看看