代码改变世界

javascript仿QQ滑动菜单

2010-07-03 18:42  BlueDream  阅读(8409)  评论(5)  编辑  收藏  举报
Slider

     程序源码

    var QQ = function() {
            // 公用函数
        function T$(id) { return document.getElementById(id); }
            function T$$(root, tag) { return (root || document).getElementsByTagName(tag); }
            function $extend(des, src) { for(var p in src) { des[p] = src[p]; } return des; }
            function $each(arr, callback, thisp) {
                if (arr.forEach) {arr.forEach(callback, thisp);} 
                else { for (var i = 0, len = arr.length; i < len; i++) callback.call(thisp, arr[i], i, arr);}
        }
            function currentStyle(elem, style) {
                return elem.currentStyle || document.defaultView.getComputedStyle(elem, null);
        }
            // 缓动类
        var Tween = {
            Quart: {
                easeOut:     function(t,b,c,d){
                        return -c * ((t=t/d-1)*t*t*t - 1) + b;
                }
            },
            Back: {
                easeOut:     function(t,b,c,d,s){
                        if (s == undefined) s = 1.70158;
                        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
                }
            },
            Bounce: {
                easeOut:     function(t,b,c,d){
                        if ((t/=d) < (1/2.75)) {
                            return c*(7.5625*t*t) + b;
                    }     else if (t < (2/2.75)) {
                        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
                    } else if (t < (2.5/2.75)) {
                        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
                    } else {
                            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
                    }
                }
            }
        }

            // 主类构造函数
        var scrollTrans = function(cid, sid, count, config) {
                var self = this;
                if (!(self instanceof scrollTrans)) {
                    return new scrollTrans(cid, sid, count, config);
            } 
            self.container     = T$(cid);
            self.scroller     = T$(sid);
                if (!(self.container || self.scroller)) { 
                    return;
            } 
            self.config     = $extend(defaultConfig, config || {});
            self.index     = 0;
            self.timer     = null;
            self.count     = count;
            self.step     = self.scroller.offsetWidth / count;
        };
        
            // 默认配置
        var defaultConfig = {
            trigger:     1, // 触发方式1:click other: mouseover
            auto: true, // 是否自动切换
            tween: Tween.Quart.easeOut, // 默认缓动类
            Time: 10, // 滑动延时
            duration: 50,    // 切换时间
            pause: 3000, // 停顿时间
            start: function() {}, // 切换开始执行函数
            end: function() {} // 切换结束执行函数
        };

        scrollTrans.prototype     = {
            constructor: scrollTrans,
            transform:     function(index) {
                    var self = this;
                index     == undefined && (index = self.index);
                index     < 0 && (index = self.count - 1) || index >= self.count && (index = 0);            
                self.time     = 0;
                self.target     = -Math.abs(self.step) * (self.index = index);
                self.begin     = parseInt(currentStyle(self.scroller)['left']);
                self.change     = self.target - self.begin;
                self.duration     = self.config.duration;
                self.start();
                self.run();
            },

            run:     function() {
                    var self = this;
                clearTimeout(self.timer);
                    if (self.change && self.time < self.duration) {
                    self.moveTo(Math.round(self.config.tween(self.time    ++, self.begin, self.change, self.duration)));
                    self.timer     = setTimeout(function() {self.run()}, self.config.Time);
                }     else {
                    self.moveTo(self.target);
                    self.config.auto     && (self.timer = setTimeout(function() {self.next()}, self.config.pause));
                }
            },

            moveTo:     function(i) {
                    this.scroller.style.left = i + 'px';
            },

            next:     function() {
                    this.transform(++this.index);
            }
        };

            return {
            scroll:     function(cid, sid, count, config) {
                    window.onload     = function() {
                            var frag = document.createDocumentFragment(),
                            nums     = [];
                            for (var i = 0; i < count; i++) {
                                var li = document.createElement('li');
                            (nums[i]     = frag.appendChild(document.createElement('li'))).innerHTML = i + 1;
                        }
                        T$(    'c_page').appendChild(frag);

                            // 调用主类
                        var st = scrollTrans(cid, sid, count, config);
                        $each(nums,     function(o, i) {
                            o[st.config.trigger     == 1 ? 'onclick' : 'onmouseover'] = function() { o.className = 'on'; st.transform(i); }
                            o.onmouseout     = function() { o.className = ''; st.transform();}
                        });
                        st.start     = function() {
                            $each(nums,     function(o, i) {
                                o.className     = st.index == i ? 'on' : '';
                            });    
                        };
                        st.transform();
                    }
            }
        }
    }();
        
    QQ.scroll(    'c_container' /*外部容器ID*/, 'scroller'/*滑动容器ID*/, 5/*切换图片数目*/, {trigger: 0} /*默认配置*/);

    源码下载

     Slide