Widget中使用js实现页面的滑动效果

1.为什么要使用滑动？
对于触摸屏的用户，直接用触摸笔滑动页面或者直接用手指滑动页面，可以由更好的用户体验

2.滑动效果设计
通过改变阅读页面的y坐标的位置，来实现页面的上下滑动，xFace引擎提供一个记录页面y坐标的属性pageYOffset和滚动相对高度的方法scrollBy()。通过pageYOffset来记住鼠标拖动之前页面的y坐标oldY，当鼠标停止滑动时候通过pageYOffset记录此时y坐标的位置newY，然后他们滑动的高度为hight=newY-oldY。在调用scrollBy(hight)来实现页面的滚动。

3.滑动功能代码实现
鼠标拖动事件的方法代码如下：

/**
*阅读页面的鼠标滑动事件的定义
*/
function initFrameEvent(){
        var oldy;//用于记录当前鼠标所在页面的y坐标
        mainTextFrame.document.body.onmousedown = function(event){
                oldy = event.clientY;//将当前Y坐标付给oldY变量
                event.preventDefault();
        }       
        mainTextFrame.document.body.onmousemove = function(event){
                if((event.clientY-oldy) > STEPHEIGHT){
                    // STEPHEIGHT用于我们自己定义的移动的距离
                    readInfo.toUp();//当两次y坐标之差为正数时，调用页面定义的类的向上滑动的方法
                }else if((event.clientY-oldy) < -STEPHEIGHT){
                    readInfo.toDown();//当两次y坐标之差为负数数时，调用页面定义的类的向下滑动的方法
                }
        }
}

/**
*定义上下滑动的toUp和toDown方法
*/
ReadInfo.prototype.toUp = function(){
        mainTextFrame.scrollBy(-STEPHEIGHT);
}
ReadInfo.prototype.toDown = function(){
        mainTextFrame.scrollBy(STEPHEIGHT);
}