为了账号安全,请及时绑定邮箱和手机立即绑定

JQ 无缝滚动栏 一段代码(很短) 大家帮忙看看错哪里?谢谢!

JQ 无缝滚动栏 一段代码(很短) 大家帮忙看看错哪里?谢谢!

鸡肋2016 2016-09-19 11:53:03
$(function(){ var $area = $('#content'); var $con1 = $('#con1'); $area.scrollTop = 0; var myScroll = setInterval('myAnimate()',1000); function myAnimate(){           $area.animate({              scrollTop:'$con1[0].scrollHeight()'     }),'slow',function(){            if($area.scrollTop >= $con1[0].scrollHeight){       $area.scrollTop = 0;      }else{         $area.scrollTop++;         };      };                }; $area.hover(function(){  clearInterval(myScroll);  },function(){   myScroll = setInterval('myAnimate()',1000);   });    })
查看完整描述

2 回答

已采纳
?
OlderSkee

TA贡献123条经验 获得超103个赞

$(function () {
   var timer = null;
  timer =  setTimeout(auto,20)

   function auto(){
       clearTimeout(timer)
       $("#con1").css({"marginTop":"-=1px"})

       if(parseInt($("#con1").css("marginTop"))<-249){  //这里其实有一像素的偏差,修正一下
           $("#con1").css("marginTop",100);
       }
       setTimeout(auto,20)
   }
})

//无缝只需要加上这一句就可以了。

for(var i=0;i<4;i++){
   $("#con1").append($("#con1 li").eq(i).clone(true))
}

查看完整回答
1 反对 回复 2016-09-19
  • 鸡肋2016
    鸡肋2016
    非常感谢您的回答!!我之前一直用animate()、定时器、scrollTop在弄,您给了我新的思路,但是您的代码不能实现 无缝滚动呀 还是得克隆一个con2吧 但还是得感谢您 好人啊哈哈哈!
  • OlderSkee
    OlderSkee
    嗯是的呀, 深度克隆下就行了 用for循环4次,我改了下这个代码,你再看下就知道了~
  • 鸡肋2016
    鸡肋2016
    哈哈哈 太感谢你了 您的方法简单又好用,但你给的margin-top<-249和100是有一点出入的,我发现只要 第一个值(-249)和第二个值(100)只要相加等于-225(我有9个li,每个li高25,得225)就能无缝滚动 ,比如 (-225)和(0),太开心了!谢谢您!!谢谢!
点击展开后面2
?
OlderSkee

TA贡献123条经验 获得超103个赞

贴下你的布局,  

这么看连测试都测试不了啊。。

查看完整回答
3 反对 回复 2016-09-19
  • 鸡肋2016
    鸡肋2016
    好的 我黏贴一下 代码有点多 html css肯定没问题 js我也可以实现 就是JQ我不太会 麻烦您给看下 谢谢谢!!
  • 鸡肋2016
    鸡肋2016
    <div id="warp"> <div class="header"> <div class="header_one"> <h1 class="title">最新课程</h1> <a href="#">更多&gt;&gt;</a> </div> <div class="header_tip"></div> </div> <div id="content"> <ul id="con1"> <li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li> <li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li> <li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li> <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li> <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> </ul> <ul id="con2"></ul> </div> </div>
  • 鸡肋2016
    鸡肋2016
    *{ padding:0; margin:0; } #warp{ width:400px; height:200px; border:4px solid #ccc; margin:0 auto; } .header{ width:400px; height:60px; background:#C33; } .header_one{ width:400px; height:50px; color:#fff; float:left; } .header h1{ margin:10px 0 0 10px; display:inline-block; } .header a{ float:right; margin:30px 10px 0 0; color:#fff; text-decoration:none; } .header_tip{ width:400px; height:10px; float:left; background:#fff; } #content{ width:400px; height:110px; overflow:hidden; } #con1,#con2{ margin:0 auto; width:300px; list-style-type:none; font-size:10px; } #con1 li,#con2 li { height:25px; line-height:25px; } #con1 li a,#con2 li a{ color:#000; text-decoration:none; } #con1 li span,#con2 li span{ color:#999; float:right; }
点击展开后面1
  • 2 回答
  • 0 关注
  • 1352 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信