JavaScript实现图片移动

JavaScript代码:

JavaScript代码
<script type="text/javascript" defer>
var marquee_spd = 25; // 滚动速度，数值越小越快
var repeat = null;
var obj_marquee = document.getElementById("ImgList");//本例中的<div id=ImgList>
function marquee_init()
{
    var obj_unit = obj_marquee.firstChild;
    var marquee_high = parseInt(obj_marquee.style.height);
    var marquee_wide = parseInt(obj_marquee.style.width);
    var unit_high = obj_unit.offsetHeight;
    var unit_wide = obj_unit.offsetWidth;
    var m = 0, n = 0, i = 0;
    var tmp = null;

    m = Math.ceil(marquee_wide / unit_wide);
    n = Math.ceil(marquee_high / unit_high);

    obj_unit.style.width = marquee_wide * (m + 1);
    obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width;

    for(i = 0; i < m; i++) {
        tmp = obj_unit.rows[0].insertCell(-1);
        tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML;
        tmp.style.width = marquee_wide;
        tmp = null;
    }

    for(i = 0; i < n; i++) {
        obj_marquee.appendChild(obj_unit.cloneNode(true));
    }

    return;
}

function marquee_show(direction)
{
    switch(direction) {
        case "up":
            if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) {
                obj_marquee.scrollTop -= obj_marquee.firstChild.offsetHeight;
            } else {
                obj_marquee.scrollTop++;
            }
            break;
        case "down":
            if(obj_marquee.scrollTop <= 0) {
                obj_marquee.scrollTop += obj_marquee.firstChild.offsetHeight;
            } else {
                obj_marquee.scrollTop--;
            }
            break;
        case "left":
            if(obj_marquee.scrollLeft >= obj_marquee.firstChild.rows[0].cells[0].offsetWidth) {
                obj_marquee.scrollLeft -= obj_marquee.firstChild.rows[0].cells[0].offsetWidth;
            } else {
                obj_marquee.scrollLeft++;
            }
            break;
        case "right":
            if(obj_marquee.scrollLeft <= 0) {
                obj_marquee.scrollLeft += obj_marquee.firstChild.rows[0].cells[0].offsetWidth;
            } else {
                obj_marquee.scrollLeft--;
            }
            break;
        default:
            break;
    }
    return;
}

function marquee_doit()
{
    var direction = "";
    direction = obj_marquee.getAttribute("direction");
    if(direction != null) marquee_show(direction);
    direction = obj_marquee.getAttribute("direction2");
    if(direction != null) marquee_show(direction);
    return;
}

function startMove()
{
marquee_init();
repeat = setInterval("marquee_doit()", marquee_spd);

obj_marquee.onmouseover = function() { clearInterval(repeat); }
obj_marquee.onmouseout = function() { repeat = setInterval("marquee_doit()", marquee_spd); }
}

startMove();
</script>

DIV代码:

图片列表
<div id="ImgList" direction="left" style="overflow:hidden;height:100px;width:700px"> 
    <table width="1728" border="0" cellspacing="0" cellpadding="0" ID="Table1">
        <tr>
        <td>
            <table cellspacing=0 cellpadding=0 border=0 align="center" ID="Table2">
            <tbody> 
            <tr>  
                
                <td bordercolor=#ffffff width="102" height="108"> 
                <div align="center"><a href="#" target="_blank"><img src="1.jpg" width=86 border="0" hspace=8></a><br>
                    <img src="space.gif" width="3" height="3"><br>
                    <font color="#0000CC" >图片1</font></div>
                </td>
                
                
                <td bordercolor=#ffffff width="102" height="108"> 
                <div align="center"><a href="#" target="_blank"><img src="2.jpg" width=86 border="0" hspace=8></a><br>
                    <img src="space.gif" width="3" height="3"><br>
                    <font color="#0000CC" >图片2</font></div>
                </td>
                </tr>
            </tbody> 
            </table>
        </td>
        </tr>
    </table>
 </div>

 

---------20091113------------

原JS代码不兼容FF，我做了下修改。

 

<script type="text/javascript" defer>
    var marquee_spd = 25; // 滚动速度，数值越小越快
    var repeat = null;
    var obj_marquee = document.getElementById("ImgList"); //本例中的<div id=ImgList>
    function marquee_init() {
        var obj_unit = frist(obj_marquee); //obj_marquee.childNodes[1];
        var marquee_high = parseInt(obj_marquee.style.height);
        var marquee_wide = parseInt(obj_marquee.style.width);
        var unit_high = obj_unit.offsetHeight;
        var unit_wide = obj_unit.offsetWidth;
        var m = 0, n = 0, i = 0;
        var tmp = null;

        m = Math.ceil(marquee_wide / unit_wide);
        n = Math.ceil(marquee_high / unit_high);
        obj_unit.style.width = marquee_wide * (m + 1);
        obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width;

        for (i = 0; i < m; i++) {
            tmp = obj_unit.rows[0].insertCell(-1);
            tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML;
            tmp.style.width = marquee_wide;
            tmp = null;
        }

        for (i = 0; i < n; i++) {
            obj_marquee.appendChild(obj_unit.cloneNode(true));
        }

        return;
    }

    function marquee_show(direction) {
        switch (direction) {
            case "up":
                if (obj_marquee.scrollTop >= frist(obj_marquee).offsetTop) {
                    obj_marquee.scrollTop -= frist(obj_marquee).offsetHeight;
                } else {
                    obj_marquee.scrollTop++;
                }
                break;
            case "down":
                if (obj_marquee.scrollTop <= 0) {
                    obj_marquee.scrollTop += frist(obj_marquee).offsetHeight;
                } else {
                    obj_marquee.scrollTop--;
                }
                break;
            case "left":
                if (obj_marquee.scrollLeft >= frist(obj_marquee).rows[0].cells[0].offsetWidth) {
                    obj_marquee.scrollLeft -= frist(obj_marquee).rows[0].cells[0].offsetWidth;
                } else {
                    obj_marquee.scrollLeft++;
                }
                break;
            case "right":
                if (obj_marquee.scrollLeft <= 0) {
                    obj_marquee.scrollLeft += frist(obj_marquee).rows[0].cells[0].offsetWidth;
                } else {
                    obj_marquee.scrollLeft--;
                }
                break;
            default:
                break;
        }
        return;
    }

    function marquee_doit() {
        var direction = "";
        direction = obj_marquee.getAttribute("direction");
        if (direction != null) marquee_show(direction);
        direction = obj_marquee.getAttribute("direction2");
        if (direction != null) marquee_show(direction);
        return;
    }

    function startMove() {
        marquee_init();
        repeat = setInterval("marquee_doit()", marquee_spd);

        obj_marquee.onmouseover = function() { clearInterval(repeat); }
        obj_marquee.onmouseout = function() { repeat = setInterval("marquee_doit()", marquee_spd); }
    }
    function frist(obj) {
        if (browser().ie) return obj.childNodes[0];
        if (browser().firefox) return obj.childNodes[1];
    }
    function browser() {
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
        return Sys;
    }
    startMove();
</script>