:

jQuery 鼠标滚轮插件 mousewheel使用示例

song100e 发布于:2015-5-20 16:56 分类:JavaScript  有 954 人浏览,获得评论 0 条 标签: mousewheel 

关于 jQuery 的鼠标滚动,有 jQuery 的 scroll() 方法,以及比较流行的瀑布流解决方案,这里介绍使用一款 jQuery 的插件mousewheel,这里仅仅说明一种处理思路。使用之前记得加载到页面中来,它几个参数:通过参数 delta 可以获取鼠标滚轮的方向和速度。如果 delta 的值是负的,那么滚轮就是向下滚动,正的就是向上。deltaX, deltaY分别是滚轮滚动的坐标值,event 是滚轮的事件,是滚动还是点击等。


下面是我在一个项目中使用到的案例,已进行简化处理。


<script>
var show_more = true;
$(function(){
	var html, pageH, scrollT, rate;
	var winH = $(window).height(); // 页面可视区域高度
	$('#content').bind('mousewheel',function(event, delta, deltaX, deltaY){
		if(!showmore){
			return;
		}// 是否接受此次处理请求
		
		if(delta == '-1'){							// 只处理向下滚动
			pageH = $(document.body).height();
			scrollT = $(window).scrollTop();		// 滚动条top
			rate = (pageH - winH - scrollT) / winH; // 是否滚动到底部
			if(rate < 0.1){
				show_more = false;					// 本次未处理完之前不允许新的事件处理
				$.post('url.php'), {id:id}, function(data){
					if(data.status == 200){			// 正常数据返回
						html = '';					// 初始化为空
						$.each(data.result, function(index, item){
							html += '<p>我是新添加的姓名:'+ item.name +'</p>';
						});
						$("#content").append(html); // 填充到页面
						show_more = true;           // 设置接受处理标志位
					}
				}
			}
		}
	});
});
</script>


赞助我,共同学习进步!