图片文字滚动插件jQuery,jQuery落成Infiniti往下滚动作效果应代码

图片文字滚动插件jQuery
Scrollbox附件中提供了八种图片、文字滚动样式,只需调用jquery库和jQuery
Scrollbox插件,然后再加一段轻巧的jquery代码就可以使用,包容性突出,争持的票房价值相当的低。
lovebet爱博体育 1

正文实例陈诉了jQuery达成Infiniti往下滚动作效果应的诀要。分享给咱们供大家参照他事他说加以考察,具体如下:

在线演示本地下载

那是模仿Tencent的分寸上的贰个职能。滚动条能够Infiniti的网下滚动并且无刷不断从数据库中获得新的数量。

<style type="text/css">
body{ font-family: "Trebuchet MS",verdana,arial;}
#loading{ display:none; font-weight:bold;color:#FF0000;}
p { padding:10px;}
</style>
<p id="loading">loading data... </p>
$(function(){
   var isOK=true;//记录上次访问是否已经结束,如果ajax也有线程就好了
   var scrollH=0;//判断是往上滚还是往下滚
   var intI=1;
  // loading层是固定在页脚的记录牌
   $(".loading").css({"right":"2","bottom":0});
   $(".loading")
   .ajaxStart(function(){
    isOK=false;//执行ajax的时候把isOK设置成false防止第一次没有执行完的情况下执行第二次易出错
    $("#loading2").show();
     })
   .ajaxStop(function(){
     isOK=true;
     $("#loading2").hide();
     })
  $(window).scroll(function(){
   //控制load层
   document.getElementByIdx_x_x("loading").style.top=document.documentElement.scrollTop+"px";
    //触法ajax条件 可以换算成百分比更好
  if($(document).height()-$(window).scrollTop()-document.documentElement.clientHeight<240){
   //当前位置比上次的小就是往上滚动不要执行ajax代码块
   if(scrollH>document.documentElement.scrollTopY)
   {
    $(".loading").append("<br/>向上滚不执行")
    scrollH=document.documentElement.scrollTop;//记录新位置
    return;
    }
   if(isOK)//如果是第一次或者上次执行完成了就执行本次
   {
     scrollH=document.documentElement.scrollTop;//记录新位置
     $(".loading").append("<br/>~~执行了ajax。。。。。<br/>")
     isOK=false;
   $.ajax({
     type:"POST",
     dataType: 'xml',
     url:"http://localhost:49302/MY100/2010/WebService1.asmx/getDS",
     error:function(e){
      $(".main").append('发生了错误:'+e)
      },
     success:function(data){
      try{
      $(data).find("Table").each(function(i){
         $(".main").append("结果:"+$(this).children('txtTitle').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('txtBody1').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('txtBody2').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('txtBody3').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('txtBody4').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('ID').text()+"<br/>");
         })//each
      }
      catch(e){
       $(".main").append("<p>"+e+"</p>")
      }
      }//success
     })//ajax
     }//if(isOK)
     else
     {
      $(".loading").append("<br/>~~你是向下滚了,但是上次还没有执行完毕,等等吧<br/>")
     }
   }// 触法ajax条件
   })//scroll
})//Jquery 结束处

越来越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery切换特效与手艺总结》、《jQuery拖拽特效与技巧计算》、《lovebet爱博体育,jQuery扩张技艺总括》、《jQuery常见卓绝特效汇总》、《jQuery动画与特效率法总括》、《jquery选拔器用法计算》及《jQuery常用插件及用法总结

盼望本文所述对大家jQuery程序设计有着协理。

您或然感兴趣的稿子: