javascript 实现图片的飘动，就像广告那种

小弟初学JavaScript，求
javascript 实现图片的飘动，就像广告那种

解决方案 »

  1.   

    <script>
    window.setInterval("yuJ()",50);
    var i2 = "+";
    var x2 = 10;
    var y2 = 400;
    var op = 100;
    function yuJ(){
    var i_y = document.getElementById("YuJ");
    var v_w = document.body.clientWidth;
    if(x2 > v_w-200){ i_y.style.display = "none";}
    x2 = x2 + 4;
    y2 = y2 - 2;
    op = op - 0.5;
    i_y.style.left = x2;
    i_y.style.top = y2;
    i_y.style.filter = "alpha(opacity="+ op +")";
    }
    </script>
    <style>
    #YuJ{ position:absolute; left:10px; top:400px; border:0px;}
    </style>
    <img id="YuJ" src="img/index/yujing.gif" />
      

  2.   


    <script>
       function flwAd()
       {
     var L=0;
     var T=0;//L左边界，T上边界
     var R=document.body.offsetWidth-document.getElementById("flw").offsetWidth;
     var B= document.body.offsetHeight-document.getElementById("flw").offsetHeight;
     document.getElementById("flw").style.left=x+document.body.scrollLeft; //层显示的左边距 随着滚动条而滚动
     document.getElementById("flw").style.top=y+document.body.scrollTop; //层显示的上边距
     x=x + step *(xin?1:-1);//判断
     if(x<L)
     {
     xin=true; x=L;
     }
     if(x>R)
     {
     xin=false; x=R;
     }
     y=y+ step *(yin?1:-1);
     if(y<T)
     {
     yin=true; y=T;
     }
     if(y>B)
     {
     yin=false; y=B;
     } 
       }
        setInterval("flwAd()",10);//每隔10毫秒调用一次函数
       
    </script>
    <html>
      <body >
    <!--漂浮广告  换个图片就是了-->
    <DIV id="flw" style="position:absolute;z-index:3;">
    <IMG src="hx.JPG" width="76" height="75">
    </DIV>
    </body>
    </html>
      

  3.   


    <table border=0 width=100% height=181><tr>
    <td width=100% style="border:1 ridge:#00ffff"height=17>
    <p align=center>
    <span style="font-size:9pt">图片上下移动</span></p>
    </td>
    </tr>
    <tr>
    <td width=100% style="border:1 ridge:#00ffff" height=133 valign=bottom>
    <img border=0 id="picture" name="" src="http://hiphotos.baidu.com/创想个性t恤/pic/item/24a4275957bbb1fa9d8204a6.jpg" style="position:absolute;left:200;top:90" width=150 height=150>
    </td>
    </tr>
    </table>
    <script language="javascript">
    var step=0;
    var currentY;
    var beMoveObj=new Image();
    var window_height=document.body.offsetHeight;
    beMoveObj=document.images["picture"];
    var image_height=beMoveObj.height;
    var top=Math.round((window_height+500)/2);
    var bottom=Math.round((window_height-500)/2)-image_height;
    var currentY=top;
    var direction=1;
     function startmove()
    { 
     beMoveObj.style.top=currentY;
     currentY-=step*direction;
     if(currentY>=(top+bottom)/2){
       if(direction==1) step++;
       else step--;
      }
     else{
       if(direction==1) step--;
       else step++;
       }
     if(currentY<=bottom){
       currentY=bottom;
       direction=-1;}
     if(currentY>=top){
      currentY=top;
      direction=1;
    }
    setTimeout('startmove()',60);
    }startmove();
    </script>