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);
}