js实现左右移动的图片


左右移动的图片[修改图片名称即可][共2步]

====1、将以下代码加入到HEML的之间:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script LANGUAGE="JavaScript">
<!--
step = 0;
obj = new Image();

function anim(xp, xk, smer//smer = direction
{
    obj.style.left = x;
    x += step * smer;
    if (x >= (xk + xp) / 2) {
        if (smer == 1)
            step--;
        else
            step++;
    } else {
        if (smer == 1)
            step++;
        else
            step--;
    }
    if (x >= xk) {
        x = xk;
        smer = -1;
    }
    if (x <= xp) {
        x = xp;
        smer = 1;
    }
    // if (smer > 2) smer = 3;
    setTimeout('anim(' + xp + ',' + xk + ',' + smer + ')'50);
}

function moveLR(objID, movingarea_width, c) {
    if (navigator.appName == "Netscape")
        window_width = window.innerWidth;
    else
        window_width = document.body.offsetWidth;
    obj = document.images[objID];
    image_width = obj.width;
    x1 = obj.style.left;
    x = Number(x1.substring(0, x1.length - 2)); // 30px -> 30
    if (c == 0) {
        if (movingarea_width == 0) {
            right_margin = window_width - image_width;
            anim(x, right_margin, 1);
        } else {
            right_margin = x + movingarea_width - image_width;
            if (movingarea_width < x + image_width)
                window.alert("No space for moving!");
            else
                anim(x, right_margin, 1);
        }
    } else {
        if (movingarea_width == 0)
            right_margin = window_width - image_width;
        else {
            x = Math.round((window_width - movingarea_width) / 2);
            right_margin = Math.round((window_width + movingarea_width) / 2) - image_width;
        }
        anim(x, right_margin, 1);
    }
}
//-->
</script>

====2、将以下代码加入到HEML的之间: