javascript实现菜单滑动（拖动）

最近因为项目需要，写了一个小插件jScroll，就是在固定宽度的容器中实现内容元素的滚动，知道滑动（拖动）的原理后，插件写起来就会非常顺手的。

原理：一个包装元素wrapper，position: relative，一个滑动元素scroller，position:relative|absolute，不过我更倾向于是relative，因absolute在wrapper没在固定高度时会出现内容显示不完全的问题。当scroller滑动（拖动）时，相应地设置scroller的left值，就OK拉。不过兼容性问题还是要花费一些时间解决的。

jScroll插件源码：

(function(){
    jScroll = function(el, options){
        var that = this;
        that.wrapper = $(el);
        that.scroller = that.wrapper.children(":first");
        that.wrapper.css({ overflow: "hidden"});
        that.options = {};
        $.extend(that.options, options || {});
        that._init();
    }
    jScroll.prototype = {
        newX: 0,
        min: 0,
        max: 0,
        ds: null,
        _init: function(){
            var that = this;
            var startX = 0, curX = 0, pos;
            var children = that.scroller.children();
            var scrollerW = 0;
            var start = function(e){
                e = e || window.event;        // 解决IE不兼容问题
                pos = that.scroller.position();
                that.min = that.wrapper.width() - that.scroller.width();
                startX = that._getX(e);
                that.ds.ontouchmove = that.ds.onmousemove = move;
                return false;
            };
            var move = function(e){
                e = e || window.event;
                curX = that._getX(e);
                that.newX = (curX - startX) + pos.left;
                that.scroller.css({ left: that.newX });
                that.ds.ontouchend = document.onmouseup = end;
                return false;
            };
            var end = function(e){
                e = e || window.event;    
                curX = that._getX(e);
                that.newX = (curX - startX) + pos.left;
                if(that.newX > that.max){
                    that.scroller.animate({ left: that.max}, "slow");
                } else if(that.newX < that.min) {
                    that.scroller.animate({ left: that.min}, "slow");
                }
                that.ds.ontouchmove = that.ds.onmousemove = that.ds.ontouchend = document.onmouseup = null;
                return false;
            };
            that.ds = that.scroller.get(0);      // 获取dom元素
            children.each(function(){
                scrollerW += $(this).outerWidth(true);
            });
            that.scroller.width(scrollerW);
            that.ds.onmousedown = that.ds.ontouchstart = start;
        },
        _getX: function(e){
            return (e && e.changedTouches) ? e.changedTouches[0].clientX : e.clientX;
        },
        // 公开方法
        refresh: function(){
            var that = this;
            that._init();
        },
        scrollTo: function(x){
            var that = this;
            that.newX = (x > that.max) ? that.max : (x < that.min) ? that.min : x;
            that.scroller.animate({ left: that.newX}, "slow");
        },
        // index从0开始
        scrollToElement: function(index){
            var that = this;
            var children = that.scroller.children();
            var count = (index < 0) ? 0 : (index >= children.length) ? (children.length - 1) : index;
            that.newX = 0;
            for(var i = 0; i < count; i++){
                that.newX -= children.eq(i).outerWidth(true);
            }
            that.scrollTo(that.newX);
        },
        destroy: function(){
            var that = this;
            that.ds.onmousedown = that.ds.ontouchstart = null;
        }
    }
    window.jScroll = jScroll;
})();

调用方式：

<script type="text/javascript">
(function(){
    var jscorll = new jScroll("#wrapper");
    //jscorll.scrollTo(-100);
    jscorll.scrollToElement(0);
})();
</script>

自测了iphone、android、ie、chrome、firefox，效果还不错。如有不足之处，望指正，谢谢！

PS：没有找到上传附件的按钮，若是哪位需要示例代码的，请把邮箱留下！

---end

作者：清流鱼

出处：http://www.cnblogs.com/qingliuyu/

新浪微博：http://weibo.com/qingliuyu

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。