博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

roll.js 组件 pad上的滑屏效果

Posted on 2012-12-27 17:41  李存  阅读(371)  评论(0)    收藏  举报
View Code
$.extend('roll', function(target) {
    document.body.onselectstart = document.body.ondrag = function() { return false; }
    var ret = {};
    ret.target = target;
    ret.target.css({ overflow: 'hidden', position: 'absolute' });
    ret.oDiv = $($.html("<div style='width:1px; height:1px; clear:both;'></div>"));
    ret.target.append(ret.oDiv);

    //ret.height=ret.target.offsetHeight;
    ret.top = 0;
    ret.relativeTop = 0;
    ret.lastY = 0;
    ret.lastOffsetTop = ret.oDiv.offsetTop;
    ret.state = false;
    ret.height = ret.oDiv.offsetTop - ret.target.offsetHeight;
    ret.target.bind('mousedown', function() {
        ret.state = true;
        ret.lastY = $.window.y();
    });
    ret.target.bind('mouseup', function() {
        ret.state = false;
        ret.lastY = $.window.y();
        ret.top += ret.relativeTop;
        var state = false;

        if (ret.top > 0 || ret.height < 0) {
            state = true;
            if (ret.isDiv)
                ret.top = -15;
            else
                ret.top = 0;
            ret.target.first().css("marginTop", ret.top + "px");

        }

        if ((ret.height + ret.top) < 0 && !state && ret.height > 0) {
            ret.top = 0 - ret.height;
            ret.target.first().css("marginTop", ret.top + "px");

        }

        ret.lastOffsetTop = ret.oDiv.offsetTop;
    });

    ret.target.bind('mousemove', function() {
        if (ret.state) {
            ret.relativeTop = $.window.y() - ret.lastY;
            ret.target.first().css("marginTop", ret.top + ret.relativeTop + "px");
        }
    });

    ret.leftNow = false;
    ret.add = function(json, isTeam) {
        if (json.tagName && json.tagName == "DIV") {
            if (isTeam) {
                isTeam.append(json);
            } else {
                ret.oDiv.before(json);
                ret.isDiv = true;
            }
        } else {
            //{name:'',num:'',content:'',img:''}
            if (ret.leftNow) {

                ret.oDiv.before($.html("<div><div style='margin-left:0px;'>" + json.content + "</div><div style='clear:both;'></div></div>"));
                ret.leftNow = false;
            } else {
                ret.oDiv.before($.html("<div><div style='margin-left:100px;'>" + json.content + "</div><div style='clear:both;'></div></div>"));
                ret.leftNow = true;
            }
        }

        ret.height = ret.oDiv.offsetTop - ret.target.offsetHeight + Math.abs(ret.top);
        if (ret.oDiv.offsetTop - ret.target.offsetHeight > 0) {
            ret.top = 0 - ret.height;
            ret.target.first().css("marginTop", ret.top + "px");
        }

        if (json.tagName && json.tagName == "DIV") {
            if (isTeam) {
                ret.top = 0;
            } else {
                ret.top = -15;
            }
            ret.relativeTop = 0;
            ret.lastY = 0;
            ret.lastOffsetTop = 0;
            ret.state = false;
            ret.target.first().css("marginTop", ret.top + "px");
        }
    }

    return ret;
});


鼠标点击滑屏,不会出现滚动条