DivName.style.pixelLeft
DivName.style.pixelTop通过改变上面的数值,如果要动态的效果用setTimeout或setInterval函数来分步改变它

解决方案 »

  1.   

    try<div id="dvHello" style="position:absolute;border:1 solid red; top:200;left:200">hello world</div><input type="button" value="move" onclick="moveDiv()"><script language="javascript">
    function moveDiv()
    {
       var w = document.body.clientWidth;
       var h = document.body.clientHeight;   var x = Math.ceil(Math.random()*w);
       var y =  Math.ceil(Math.random()*h);
      
      dvHello.style.posLeft = x;
      dvHello.style.posTop = y;}
    </script>
      

  2.   

    <html>
    <head>
    <title> New Document </title>
    <script>
    document.onselectstart=new Function("event.returnValue=false");function mout(obj){
    obj.style.borderColor="buttonface";
    event.cancelBubble=true;}
    function mover(obj){
    obj.style.borderLeftColor="white";
    obj.style.borderTopColor="white";
    obj.style.borderRightColor="gray";
    obj.style.borderBottomColor="gray";
    }
    function mdown(obj){
    obj.style.borderLeftColor="gray";
    obj.style.borderTopColor="gray";
    obj.style.borderRightColor="white";
    obj.style.borderBottomColor="white";
    event.cancelBubble=true;}
    function sup(){
    var obj = document.all.sbd;
    var t = obj.style.posTop + 20;
    if(t>0)t=0;
    obj.style.posTop =t;
    }function sdown(){
    var obj = document.all.sbd;
    obj.style.posTop -=20;
    }
    </script>
    </head>
    <body bgcolor=white style="cursor:default;">
    <div style="position:absolute;left:100;top:80;width:80;height:20;background-color:buttonface;overflow:hidden;text-align:center;font:9pt Webdings;border:1pt solid buttonface" onmouseover="mover(this)" onmouseout="mout(this)" onmousedown="mdown(this)" onmouseup="mover(this)" onclick="sup();event.cancelBubble=true;">5</div>
    <div style="position:absolute;left:100;top:100;width:80;height:80;padding:4pt;overflow:hidden;font:9pt宋体;background-color:buttonface;">
    <div id=sbd style="position:absolute;left:0;top:0;width:80;text-align:center;">
    第一行<br>第二行<br>第三行<br>第三行<br>第四行<br>第五行<br>第六行<br>第七行<br>第八行<br>第九行<br>第十行<br>第AA行<br>
    第1一行<br>第1二行<br>第1三行<br>第1三行<br>第1四行<br>第1五行<br>第1六行<br>第1七行<br>第1八行<br>第1九行<br>第1十行<br>第1AA行<br>
    </div>
    </div>
    <div style="position:absolute;left:100;top:180;width:80;height:20;background-color:buttonface;overflow:hidden;text-align:center;font:9pt Webdings;border:1pt solid buttonface" onmouseover="mover(this)" onmouseout="mout(this)" onmousedown="mdown(this)"  onmouseup="mover(this)"  onclick="sdown();event.cancelBubble=true;">6</div>
    </body>
    </html>