请问用js怎样实现碰壁反弹效果？有示例代码吗？谢谢

js碰壁反弹效果

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 图片漂浮碰壁反弹</title>
    <link rel="stylesheet" type="text/css" href="css/text.css" />
    <style type="text/css">
    *{margin:0;padding:0;}
    #f{height:50px;width:50px;background:#ccc;border:4px solid red;position:absolute;}
    </style>
    </head>
    <body>
     <div id="f"> </div>
    <script type="text/javascript">
    var tops=lefts=true;
    function move(){
       var f=document.getElementById("f");
       var a=f.offsetLeft,b=f.offsetTop;
     var aw=document.body.clientWidth-f.offsetWidth;
     var ah=document.documentElement.clientHeight-f.offsetHeight;
     lefts?(a<aw?(a++,f.style.left=a+"px"):lefts=false):(a>0?(--a,f.style.left=a+"px"):lefts=true)
     tops?(b<ah?(b++,f.style.top=b+"px"):tops=false):(b>0?(--b,f.style.top=b+"px"):tops=true)
     var timer=setTimeout("move()",20); 
     f.onmouseover=function() {clearTimeout(timer)};
     f.onmouseout=function() {timer=setTimeout("move()",10)};
    }
    window.onload=function(){move();}
    </script>
    </body>
    </html> 
      

  2.   

    <div id="uchomemoverdiv" style="position:absolute;">
    <a href="/ucenter/index.php" target="_blank">
    <img src="themes/default/images/uchomepiaofu.png" border="0">
    </a>
    </div>
    <script> 
    var uchomeMover=document.getElementById("uchomemoverdiv") ;
    var uchomeMoverx = 50,uchomeMovery = 60 ;
    var uchomeMoverxin = true, uchomeMoveryin = true ;
    var uchomeMoverstep = 1 ;
    var uchomeMoverdelay = 10 ;
    function uchomeMoverfloat() {
    var L=T=0;
    var R= document.body.clientWidth-uchomeMover.offsetWidth;
    var B = document.body.clientHeight-uchomeMover.offsetHeight;
    uchomeMover.style.left = uchomeMoverx + document.body.scrollLeft;
    uchomeMover.style.top = uchomeMovery + document.body.scrollTop;
    uchomeMoverx = uchomeMoverx + uchomeMoverstep*(uchomeMoverxin?1:-1);
    if (uchomeMoverx < L) {uchomeMoverxin = true; uchomeMoverx = L;} 
    if (uchomeMoverx > R){uchomeMoverxin = false; uchomeMoverx = R;} 
    uchomeMovery = uchomeMovery + uchomeMoverstep*(uchomeMoveryin?1:-1) ;
    if (uchomeMovery < T) {uchomeMoveryin = true; uchomeMovery = T;} 
    if (uchomeMovery > B) {uchomeMoveryin = false; uchomeMovery = B;} 
    } 
    var uchomeMoveritl= setInterval("uchomeMoverfloat()", uchomeMoverdelay);
    uchomeMover.onmouseover=function(){clearInterval(uchomeMoveritl);} 
    uchomeMover.onmouseout=function(){uchomeMoveritl=setInterval("uchomeMoverfloat()", uchomeMoverdelay);} 
    </script>
    <div id="pickspal1" style="display:none;position:absolute; width:484px; height:100%; left:0px; top:320px; z-index:100">
    <div onclick="document.getElementById('pickspal1').style.display='none';">关闭</div>
    <a href="/pickspal/hjtx_pikspal8.php" target="_blank"><img src="themes/default/images/youjiangjingcai.png" width="484" height="302" align="right" /></a>
    </div>
    <script> 
    var movepickpaltopdis=220;
    var movepickpaltopdis2=220;
    function movepickpal()
    {
     document.getElementById("pickspal1").style.pixelTop=movepickpaltopdis2+document.documentElement.scrollTop;
    }
    function closeadv()
    {
     document.getElementById("pickspal1").style.display="none";
    }
    function openadv()
    {
     document.getElementById("pickspal1").style.display="block";
    }
    window.onscroll=movepickpal;
    </script>
    这段代码的不足就是不支持ff，在ie下可触壁反弹