无聊写个背景效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <base href="http://imgqun.qq.com/cgi-bin/" />
    <style>
        ul,li{ margin:0; padding:0; list-style-type:none;font-family: Arial;font-size: 12px;}
        #sl li
        {
            background: url(img?uuid=202e5f624eae0ae0dd589c74ebb44d5696);
            margin-top: 2px;
            height: 30px;
            line-height: 30px;
            width: 200px;
        }
        #sl li a
        {
            color: #000066;
            text-indent: 40px;
            text-decoration: none;
            font: bold 12px/100% '黑体,arial';
            display: block;
            zoom: 1;
            height: 30px;
            line-height: 30px;
            border-right: 5px solid #000066;
            background: url(img?uuid=20c8036e8ac98e139954a5dd98a45a6804) no-repeat 200px 0px;
        }
        #sl li a:hover
        {
            color: #fff;
            font-size: 13px;
            border-right: none;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
<ul id="sl">
    <li><a href="" title="" bg_y="0">;мē;壞！</a></li>
    <li><a href="" title="" bg_y="-40">;мē;壞！</a></li>
    <li><a href="" title="" bg_y="-80">;мē;壞！</a></li>
    <li><a href="" title="" bg_y="-120">;мē;壞！</a></li>
    <li><a href="" title="" bg_y="-140">;мē;壞！</a></li>
    <li><a href="" title="" bg_y="-160">;мē;壞！</a></li>
    <li><a href="" title="" bg_y="-180">;мē;壞！</a></li>
</ul>
<script>
    var sl = {
        on: function(o, type, fn) { o.attachEvent ? o.attachEvent('on' + type, function() { fn.call(o) }) : o.addEventListener(type, fn, false); return this },
        $: function(o, tag) {
            if (tag != undefined)
                return (sl.$(o)).getElementsByTagName(tag);
            return document.getElementById(o);
        },
        fx: function(form, to, s) {
            var m = Math[form < to ? 'ceil' : 'floor'];
            return function() { return form += m((to - form) * (s || 0.1)) };
        },
        move: function(who, attr, val, s, fn) {
            var at = /backgroundPosition/i.test(attr);
            var ft = parseInt(sl.css(who, attr)) || 0;
            var fg = at ? (who.getAttribute("bg_y") || 0) + "px" : '';
            if (this.css(who, attr) == undefined && at) ft = 200;
            var fs = this.fx(ft, val,s);
            clearInterval(who["time" + attr]);
            who["time" + attr] = setInterval(function() {
                var fe = fs();
                who.style[attr] = fe + "px " + fg;
                if (val == fe) { clearInterval(who["time" + attr]); }
            }, 18);
            return this;
        },
        css: function(who, key) {
            if (who.style[key] != '') return who.style[key];
            if (!!window.ActiveXObject) return who.currentStyle[key];
            return document.defaultView.getComputedStyle(who, "")
.getPropertyValue(key.replace(/([A-Z])/g, "-$1").toLowerCase());
        }
    }
    sl.on(window, 'load', function() {
        var links = sl.$('sl', 'a');
        for (var i = 0; i < links.length; i++) {
            sl.on(links[i], 'mouseout', function() {
                sl.move(this, 'textIndent', 40, 0.01).move(this, 'backgroundPosition', 200, 0.2);
            }).on(links[i], 'mouseover', function() {
                sl.move(this, 'textIndent', 45, 0.01).move(this, 'backgroundPosition', 0, 0.2);
            });
        }
    });
</script>
</body>
</html>

解决方案 »

  1.   

    哥们，你这么上源码，style里定义的img都没有，不如整个sample看看
      

  2.   

    那你各个函数功能大致讲解一下可以不？
    尤其是move函数详细些，移动开始快后来慢什么的，移动的原理是什么这能详细些吗？...
    你的原创，你的讲解，期待...
      

  3.   

    但不知你们发现没有，虽然效果港港的，但CPU占用量也不小，用于内容少的页面还行，反之可能得不偿失。
      

  4.   

    有一点不明白 楼主下面的代码
    o.attachEvent('on' + type, function() { fn.call(o) })
    我感觉下面这样就可以了
     o.attachEvent('on' + type, fn) 
    但是试了下  我的出不来效果 想问问楼主 这里为什么要fn.call(o)一下???
      

  5.   

    为什么.addEventListener不用fn.call(o)还有楼主有博客吗？ 我想看一下
      

  6.   

    新人啊。  谁可以帮下我啊。  不知道怎么获取  在层 form标签 表格 中的 文本框value值    谁可以帮下我啊
      

  7.   

    因为attachEvent是有缺陷的，它会丢失this
      

  8.   

    这是mootools的addListener  这里为什么没用fn.call(this)啊？？？ 直接用的fn
    难道是mootools的bug??
    addListener: function(type, fn){
    if (type == 'unload'){
    var old = fn, self = this;
    fn = function(){
    self.removeListener('unload', fn);
    old();
    };
    } else {
    collected[this.uid] = this;
    }
    if (this.addEventListener) this.addEventListener(type, fn, false);
    else this.attachEvent('on' + type, fn);
    return this;
    }
      

  9.   

    楼主css 里的这句
    zoom: 1; 
    是多余的吧  虽然看到很多人加这句  但是去掉之后 效果是一样的
    这句有什么用吗？？
      

  10.   

    楼主上面这段代码
    who.style[attr] = fe + "px " + fg; 类似于
    alert(33+'px'+44+'px')//弹出33px44px本来应该是错的  但为什么效果是对的呢？？ 而且出去中间的+'px'反而会出错 
    真是不解  为什么啊～～