jQuery 滚动特效代码2014-12-08 10:17:06

( 1人已投票,[高质量] )
分享:
31.3K

jQuery滚动动画特效代码,想要纯Js的,可参考另一篇文章:

Js图片无缝滚动效果


/*函数为滚动函数,是基于JQuery1.11.1写出来的
   由于本人不还不会写JQuery插件,所以用了函数的封装,希望有会写JQuery插件的指导一下
   本函数的页面布局格式为:<div class="obj">
                 <ul>
                   <li>内容</li>
                   <li>内容</li>
                   <li>内容</li>
                     ......
                 <ul>
               <div>
   本函数是直接调用传参就可以运行了,以下是参数说:
     第一个参数娄是对像:obj
     第二个参数是页面当显示的个数:num
     第三个参数是滚动的速度:spe
     第四个参数是滚动时间的定义:time
     第五个参数是滚动的类型,现只有两种:向上滚动为1,向左滚动为2
   */
   function gundong(obj,num,spe,time,type){
    var huiyuan=obj;
    var cloneobj= huiyuan.find("ul");
    var linum=cloneobj.find("li").length;
    if(type==1){
     var objheight=huiyuan.find("ul").height();
    }else if(type==2){
     var jisuanobj=cloneobj.find("li").eq(0);
     var jisuanwidth=(parseInt(jisuanobj.css("marginLeft"))+jisuanobj.width())*(linum+num);
     cloneobj.css({width:jisuanwidth+"px"})
     var objwidth=(parseInt(jisuanobj.css("marginLeft"))+jisuanobj.width())*linum;
    }
    //复制要重复的内容------------------------------------------------------------------------------
    for (var i = 0; i <num; i++) {
      cloneobj.append(cloneobj.find("li").eq(i).clone());
    };
    //动画-----------------------------------------
    var a=0;
    var total=0;
    if(type==1){
       var huiyuandong=setInterval(topfun,time);
       function topfun(){
           if(total>=objheight){ a=1};
            a++;
            total=a*spe;
            tops=-a*spe;
            cloneobj.css({top:tops+"px"});
       }
    }else if(type==2){
       var huiyuandong=setInterval(leftfun,time);
       function leftfun(){
           if(total>=objwidth){ a=1};
            a++;
            total=a*spe;
            tops=-a*spe;
            cloneobj.css({left:tops+"px"});
       }
    }
                                    
                                    
   }






头像

snowcoal
  • jQuery
  • 滚动动画

本文标签:

jQuery滚动动画

收藏到我的私密空间

标题:jQuery 滚动特效代码

作者:柳岸花明

你暂未登录,请登录后才可收藏至您的私密空间 确认取消
雪炭网

键盘操作 更便捷 -雪炭网雪中送炭-乐趣无限

如果本站的内容有幸帮助到了您,建议您了解一下当页的广告内容哦,我们的进步离不开您的支持,Thank you~