图片在网页中的移动问题

本帖最后由 come4520 于 2009-06-23 20:17:49 编辑

解决方案 »

  1.   

    乒乓球一样的吧？
    思路其实不难，就是定时不断的重新设置一个包含图片的div的位置。
    利用数学里的直线方程和反弹角度计算新位置。
      

  2.   

    摘自网上
    <div id="img" style="position:absolute;">
    <img src="image.gif">
    </div>
    <script type="text/javascript">
    var xPos = 20;
    var yPos = document.body.clientHeight;
    var step = 1;
    var delay = 30;
    var height = 0;
    var Hoffset = 0;
    var Woffset = 0;
    var yon = 0;
    var xon = 0;
    var pause = true;
    var interval;
    img.style.top = yPos;
    function changePos(){
    width = document.body.clientWidth;
    height = document.body.clientHeight;
    Hoffset = img.offsetHeight;
    Woffset = img.offsetWidth;
    img.style.left = xPos + document.body.scrollLeft;
    img.style.top = yPos + document.body.scrollTop;
    if (yon) {
    yPos = yPos + step;
    } else {
    yPos = yPos - step;
    }
    if (yPos <
    0) {
    yon = 1;
    yPos = 0;
    }
    if (yPos >= (height - Hoffset)) {
    yon = 0;
    yPos = (height - Hoffset);
    }
    if (xon) {
    xPos = xPos + step;
    } else {
    xPos = xPos - step;
    }
    if (xPos <
    0) {
    xon = 1;
    xPos = 0;
    }
    if (xPos >= (width - Woffset)) {
    xon = 0;
    xPos = (width - Woffset);
    }
    }

    function start(){
    img.visibility = "visible";
    interval = setInterval('changePos()', delay);
    }

    start();
    </script>
      

  3.   

    完全没问题啊，IE、FF下都好的
      

  4.   

    看看这个咋样
    做过参考的
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE></TITLE>
     </HEAD> <BODY onLoad="movings()"> <DIV id="float" style="position:absolute;z-index:3;" onclick="close1('float')"><IMG src="float.gif" width="80" height="52"></DIV>
    <script language="javascript">
    var x = 0;//x坐标
    var y = 0;//y坐标
    var xMove = 0; //x移动方向
    var yMove = 0; //y移动方向
    var image = document.getElementById("float");//层ID
    function movings(){
    var width = document.body.clientWidth;//浏览器宽度
    var height = document.body.clientHeight;//浏览器高度
    var widthImg = image.offsetWidth;//图片宽度
    var heightImg = image.offsetHeight;//图片高度
    image.style.left = x + document.body.scrollLeft;//图片在浏览器左侧位置
    image.style.top = y + document.body.scrollTop;//图片在浏览器顶端位置
    if(yMove==0){
    y = y + 1;//y方向向下移动
    }else{
    y = y - 1;//向上移动
    }
    if(y<0){
    yMove = 0;
    y = 0;
    }
    if(y >= (height - heightImg)){
    yMove = 1;
    y = (height - heightImg);
    }
    if(xMove==0){
    x = x + 1;//x方向向下移动
    }else{
    x = x - 1;//向上移动
    }
    if(x<0){
    xMove = 0;
    x = 0;
    }
    if(x >= (width - widthImg)){
    xMove = 1;
    x = (width - widthImg);
    }
    setTimeout('movings()' , 30);
    }

    </script>
     </BODY>
    </HTML>