Hello, Willko

如果你觉得昨天很有成就，那么表示你今天还不够努力。

google首页按钮效果收藏

之前韩国首页首先推出这个导航就引起了讨论。
实际上，这种效果非常简单，只是我们缺乏思维而已。

先看演示吧..http://www.willko.cn/js/hellobutton/demo.html

实际上只是一张图片http://www.willko.cn/js/hellobutton/button.gif

用setTimeout和backgroundPosition就可以实现动画了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Untitled Document</title>

span {

width: 52px;

height: 37px;

display: block;

background: url(button.gif) no-repeat 0px 0px;

}

</style>

function dsp(n, playing){

if (n <= 6 && n >= 0) {

var button = document.getElementById("button");

var width = 52;

var offsetWidth = -width * n;

button.style.backgroundPosition = offsetWidth + "px 0px";

n = playing ? n + 1 : n - 1;

setTimeout("dsp(" + n + "," + playing + ")", 45);

}

</script>

</head>

<body>

</body>

</html>

为什么要使用这种方法？
因为，这样可以减少HTTP链接，加快浏览速度，减少服务器负担。
所以对于，GOOGLE这种级别的访问，是非常有用的，不是为了酷..

2008-12-28 添加 jQuery版

/**
 * jQuery wko.DynImg
 *
 * version 0.1 (2008/8/15)
 *
 * @author Willko Cheng <willko@foxmail.com>
 *
 */
(function($){
    $.fn.extend({
        DynImg: function(options){
            options = $.extend({
                step: 0,
                width: 0,
                timeout: 60
            }, options);
            
            return this.each(function(){
                var over, out;
                var overHandler = function(e, me){
                    var me = me || $(this);
                    clearTimeout(out);
                    var position = me.css("backgroundPosition").split(' ');
                    var x = parseInt(position[0]);
                    var y = parseInt(position[1]);
                    
                    if (x >= -options.step * options.width) {
                        me.css({
                            backgroundPosition: x + -options.width + "px " + y + "px"
                        });
                        over = setTimeout(function(){
                            overHandler(e, me)
                        }, options.timeout);
                    }
                };
                
                var outHandler = function(e, me){
                    var me = me || $(this);
                    clearTimeout(over);
                    var position = me.css("backgroundPosition").split(' ');
                    var x = parseInt(position[0]);
                    var y = parseInt(position[1]);
                    if (x <= -options.width) {
                        me.css({
                            backgroundPosition: x + options.width + "px " + y + "px"
                        });
                        out = setTimeout(function(){
                            outHandler(e, me)
                        }, options.timeout);
                    }
                };
                $(this).hover(overHandler, outHandler);
            });
        }
    });
})(jQuery);

用法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/>
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery.pack.js">
        </script>
        <script type="text/javascript" src="wko.DynImg.js">
        </script>
        <style type="text/css">
            .toolbar {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            .toolbar a{
                display: block;
                height: 37px;
                width: 50px;
                background: url(toolbar_animation_20080807.png) no-repeat;
            }
        </style>
    </head>
    <body>
        <ul class="toolbar">
            <li><a href="" style="background-position: 0px -35px"></a></li>
        </ul>
        <script type="text/javascript">
        $(function(){
            $(".toolbar a").DynImg({step: 3, width: 52});
        });
        </script>
    </body>
</html>

参数step为动画长度，width为图片相隔长度