JQuery页面随滚动条动态加载效果实现

有一个AJAX scollLoad效果很 不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户 体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝 试……

我试着用jquery来实现这个功能。先要得到滚动条的总长属性值:scrollHeight,还有滚动条当前位置属性 值:scrollTop。然后通过计算,若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为<div id=”mypage”></div>,该元素overflow样式为scroll,也就是元素中的内容溢出元素指定高度时启用滚动 条。利用jquery的load方法为元素加载一个已经存在的文件,我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据 表。

<script type=”text/javascript” src=”jquery.js“>// 加载jquery库</script>
<script type=”text/javascript”>

var hght=0;//初始化滚动条总长
var top=0;//初始化滚动条的当前位置
$(document).ready(function() {//DOM的onload事件
$(”#mypage”).load(”table.html”);//table.html的内容被加载到 mypage元素

$(”#mypage”).scroll( function() {//定义滚动条位置改变时触发的事件。
hght=this.scrollHeight;//得到滚动条总长,赋给hght变量
top=this.scrollTop;//得到滚动条当前值,赋给top变量
});
});

setInterval(”cando();”,2000);//每隔2秒钟调用一次cando函数来判断当前滚动条位置。

function cando(){
if(top>parseInt(hght/3)*2)//判断滚动条当前位置是否超过总长的2 /3,parseInt为取整函数
show();//如果是,调用show函数加载内容。
}

function show(){
$.get(”table.html”, function(data){//利用jquery的get方法得到table.html内容
$(”#mypage”).append(data);//用append方法追加内容到mypage元素。
hght=0;//恢复滚动条总长,因为$(”#mypage”).scroll事件一触发,又会得到新值,不恢复的话可能会造成判断错误而再次加载……
top=0;//原因同上。
});
}

</script>
<div id=”mypage”></div>

为 什么要隔2秒钟调用一次判断呢?因为只要$(”#mypage”).scroll事件一被触发,就会影hght和top值,这个值可能总是满足cando 函数的判断,也就是top值总是位于hght的三分之二。因此可能会多次加载造成服务器负担加重。而每加载一次后把hght和top值赋0,也是这个原 因。

这段代码的效果就是只要元素mypage的滚动条位置位于滚动条总长的三分之二时,追加table.html的内容到元素mypage 中去。当然这样运行是无休止地加载下去。在真正的AJAX运用中,table.html可以换成asp或php脚本,接收get或post参数来进行处 理,然后返回有意义的数据。jquery的get方法可以设置get方式的参数数据,比如:

$.get(”test.php”, { name: “boho”, id: “1″ } );

相当于http://hostlocal/test.php?name=boho&id=1这种形式的http访问。然后通过get方法的 回调函数来获取test.php输出的内容:

$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});

转载于:https://my.oschina.net/zyt1978/blog/709114

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 jQuery 的 `mousewheel` 插件来实现鼠标滚轮控制横向滚动条的滚动。 首先,需要在页面中引入 `jquery.mousewheel.js` 文件: ```html <script src="/path/to/jquery.mousewheel.js"></script> ``` 然后,可以通过以下方式来使用 `mousewheel` 插件: ```javascript $(selector).mousewheel(function(event, delta, deltaX, deltaY) { // 处理滚轮事件 }); ``` 其中,`selector` 是要绑定滚轮事件的元素的选择器,`deltaX` 变量表示横向滚动的距离,当鼠标滚轮向左滚动时,`deltaX` 为负数;当鼠标滚轮向右滚动时,`deltaX` 为正数。 例如,下面的代码可以使用鼠标滚轮向左或向右滚动一个横向滚动条: ```javascript $('#scrollbar').mousewheel(function(event, delta, deltaX, deltaY) { // 将滚动条向左或向右滚动一段距离 $('#scrollbar').scrollLeft($('#scrollbar').scrollLeft() - deltaX); }); ``` 希望这能帮到你! ### 回答2: 要实现jquery中使用鼠标滚轮滚动横向滚动条,首先需要引入jquery库文件。接下来,通过jquery选择器选中需要添加横向滚动条的元素。然后,使用jquery的scrollLeft()方法获取当前元素的水平滚动位置。 接着,使用jquery的on()方法监听鼠标滚轮事件。在事件处理程序中,调用event对象的preventDefault()方法阻止默认的滚轮行为,然后判断滚轮滚动的方向。如果向上滚动,则将scrollLeft属性减去一个固定值,使元素向左滚动;如果向下滚动,则将scrollLeft属性加上一个固定值,使元素向右滚动。 最后,使用jquery的animate()方法实现平滑的滚动效果。在滚动处理程序中,使用animate()方法将scrollLeft属性过渡到新的值,并设置过渡时间和缓动效果。 示例代码如下: ```javascript // 引入jquery库文件 // 选中需要添加横向滚动条的元素 var element = $('.scrollable-element'); // 获取当前水平滚动位置 var scrollPosition = element.scrollLeft(); // 监听鼠标滚轮事件 element.on('mousewheel DOMMouseScroll', function(event) { // 阻止默认的滚轮行为 event.preventDefault(); // 判断滚轮滚动方向 var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; if (delta > 0) { // 向上滚动 scrollPosition -= 50; // 固定值,调整滚动速度 } else { // 向下滚动 scrollPosition += 50; // 固定值,调整滚动速度 } // 平滑滚动效果 element.stop().animate({ scrollLeft: scrollPosition }, 500); // 过渡时间和缓动效果,可根据需要调整 }); ``` 以上就是使用jquery实现横向滚动条使用鼠标滚轮滚动的方法。根据实际需求,可以调整滚动速度和过渡效果。 ### 回答3: jQuery可以使用插件来实现横向滚动条使用鼠标滚轮滚动的功能。常用的插件有mCustomScrollbar和perfect-scrollbar等。 使用mCustomScrollbar插件,首先需要引入jQuery和mCustomScrollbar的相关文件。然后,在需要加入横向滚动条的元素上添加一个class,比如"scrollbar"。接着,使用以下代码来初始化滚动条: $(".scrollbar").mCustomScrollbar({ horizontalScroll: true, // 启用横向滚动 axis: "x", // 指定滚动轴为水平方向 mouseWheel: { // 鼠标滚轮参数设置 enable: true, // 启用鼠标滚轮滚动 axis: "x" // 指定滚动轴为水平方向 } }); 这样,当鼠标滚轮滚动时,横向滚动条就会相应地进行滑动。 对于perfect-scrollbar插件,使用方法类似。首先引入jQuery和perfect-scrollbar的相关文件,然后在需要加入横向滚动条的元素上添加一个class,比如"scrollbar"。接着,使用以下代码来初始化滚动条: $(".scrollbar").perfectScrollbar({ wheelSpeed: 0.5, // 设置滚动速度,数值越大滚动速度越快 wheelPropagation: true, // 是否允许滚动条滚动时冒泡到父元素 horizontal: true // 启用横向滚动 }); 这样,鼠标滚轮滚动时,横向滚动条就会相应地进行滑动。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值