js或jq怎么实现滚轮控制页面上下滑动

JavaScript013

js或jq怎么实现滚轮控制页面上下滑动,第1张

jQuery监听鼠标滚轮(滚动)事件

第一步：下载jquery-mousewheel插件

第二步：复制以下代码做测试，打开日志看效果

jQuery(function($) {

$('#nav')

.bind('mousewheel', function(event, delta) {

var dir = delta >0 ? 'Up' : 'Down'

if (dir == 'Up') {

console.log(“向上滚动， www.imiansha.com”)

} else {

console.log(“向下滚动， http: //blog.csdn.net/u011627980”)

}

return false

})

})

}

首先设定屏幕的宽和高

var height = device.height//设定高度值=设备高度

var width = device.width//设定宽度值=设备宽度

setScreenMetrics(width, height)//设置脚本坐标点击所适合的屏幕宽高。如果脚本运行时，屏幕宽度不一致会自动放缩坐标。

然后下面的代码是上划

swipe(width / 2, height - 500, width / 2, 0, 500)

语句解析：

swipe（起点横坐标，起点纵坐标，终点横坐标，终点纵坐标，使用时间）

代码解析：

width / 2是宽度二分之一处。也就是屏幕宽度的中间位置。

height - 500是高度减500像素，屏幕顶部为0。

0是屏幕顶端。

500是手指从起点移动到终点所需时间，单位是毫秒。

这样讲，应该很明白了。

如果需要下滑，那么将起点坐标设置到屏幕下方，终点坐标设置到屏幕顶端即可。

zepto.js有的需要自己引用touch.js额外js文件才支持触摸事件,touch.js可以到zepto的gihub上下载

如果只是写简单的效果,直接给页面上的body绑定一个swipeup事件swipedown事件来自己写动画切换(如果需要zepto.js支持jquery类似的动画效果需要继续添加额外的fx.js)