JavaScript_翻转器

现在随便那个 JavaScript 框架实现像翻转器这样的功能都再容易不过，它们的基础都是 JavaScript，但框架只会让你变得 stupid。知其然，而不知道其所以然。要是用 jQuery 实现一个两状态翻转，几行就行了。

$(document).ready(function() {
    $('img').each(function() {
        $(this).mouseout(function() {
            $(this).attr('src', 'images/' + $(this).attr('id') + '_off.gif');
        });
        $(this).mouseover(function() {
            $(this).attr('src', 'images/' + $(this).attr('id') + '_on.gif');
        });
    });
});

但仅仅会用框架不利于一个程序员的成长。花点时间，把基础打好。

下面用 JavaScript 实现的与用 jQuery 相比，你看到了：

• 如何向一个已有的对象添加新的对象和属性，如 outImage、overImage。
• 如何创建一个标记，如 new Image()。
• 如何预加载页面的资源。
• 如何向一个对象添加事件，以匿名函数方式添加事件。

 

本文内容

• 两状态翻转器
• 三状态翻转器
• 链接触发翻转器

 

两状态翻转器

鼠标停留或离开时显示的图像不同，产生动画效果。页面 HTML 标记如下：

<a href="next1.html">
        <img src="images/button1_off.gif" alt="button1" id="button1" /></a>&nbsp;&nbsp;
    <a href="next2.html">
        <img src="images/button2_off.gif" alt="button2" id="button2" /></a>

JavaScript 代码：

window.onload = rolloverInit;

function rolloverInit() {
    for (var i = 0; i < document.images.length; i++) {
        if (document.images[i].parentNode.tagName == "A") {
            setupRollover(document.images[i]);
        }
    }
}

function setupRollover(currentImage) {
    currentImage.outImage = new Image();
    currentImage.outImage.src = currentImage.src;
    currentImage.onmouseout = function() {
        this.src = this.outImage.src;
    }

    currentImage.overImage = new Image();
    currentImage.overImage.src = "images/" + currentImage.id + "_on.gif";
    currentImage.onmouseover = function() {
        this.src = this.overImage.src;
    }
}

运行界面：

图1 两状态翻转器：鼠标停留在 Button2 后该图改变

说明：

1，第 1 行，页面加载完成后，执行 rolloverInit；

2，第 3 ～9 行，设置界面的 <img> 的翻转功能；

3，第 14 ～ 16 行和第 20 ～ 21 行，为 currentImage 添加 onmouseout 和 onmouseover 事件。currentImage 是页面 <img> 标记作为一个对象传给函数 setupRollover；

4，第 12 ～ 13 行和第 18 ～ 19 行，为 currentImage 新建两个对象 outImage 和 overImage，用来缓存翻转时用到的图片。这点比较重要，产生动画效果，需要确保替换的图像立刻出现，而不能从服务器现获得，从而造成延迟。

 

三状态翻转器

在两状态翻转器基础上，还可以让鼠标点击后的图像也不同，从而实现三状态翻转器。页面 HTML 标记如下：

<div>
    <img src="images/button1_off.gif" alt="button1" id="button1" /></div>
&nbsp;&nbsp;
<div>
    <img src="images/button2_off.gif" alt="button2" id="button2" /></div>

JavaScript 代码：

window.onload = rolloverInit;

function rolloverInit() {
    for (var i = 0; i < document.images.length; i++) {
        if (document.images[i].parentNode.tagName == "DIV") {
            setupRollover(document.images[i]);
        }
    }
}

function setupRollover(currentImage) {
    currentImage.outImage = new Image();
    currentImage.outImage.src = currentImage.src;
    currentImage.onmouseout = function() {
        this.src = this.outImage.src;
    }

    currentImage.clickImage = new Image();
    currentImage.clickImage.src = "images/" + currentImage.id + "_click.gif";
    currentImage.onclick = function() {
        this.src = this.clickImage.src;
    }

    currentImage.overImage = new Image();
    currentImage.overImage.src = "images/" + currentImage.id + "_on.gif";
    currentImage.onmouseover = function() {
        this.src = this.overImage.src;
    }
}

运行界面：

图2 三状态翻转器：鼠标点击 Button1 后该图改变

说明：

1，缓存三个图片；

2，添加 onmouseout、onmouseover 和 onclick 三个事件。

 

链接触发翻转器

也可以由一个标记来触发翻转器，如 <a>。页面 HTML 标记如下：

<h1>
        <a href="next.html" id="arrow">Next page</a></h1>
    <img src="images/arrow_off.gif" id="arrowImg" alt="arrow" />

JavaScript 代码如下：

window.onload = rolloverInit;

function rolloverInit() {
    for (var i = 0; i < document.links.length; i++) {
        var linkObj = document.links[i];
        if (linkObj.id) { // a tag id="arrow"
            var imgObj = document.getElementById(linkObj.id + "Img"); // img tag id="arrowImg"
            if (imgObj) {
                setupRollover(linkObj, imgObj);
            }
        }
    }
}

function setupRollover(thisLink, thisImage) {
    thisLink.imgToChange = thisImage;
    thisLink.onmouseout = function() {
        this.imgToChange.src = this.outImage.src;
    }
    thisLink.onmouseover = function() {
        this.imgToChange.src = this.overImage.src;
    }

    thisLink.outImage = new Image();
    thisLink.outImage.src = thisImage.src;

    thisLink.overImage = new Image();
    thisLink.overImage.src = "images/" + thisLink.id + "_on.gif";
}

运行界面：

图3 链接触发翻转器：鼠标停留在 Next page 后改变

 

下载 Demo