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

大家帮忙看看 JQ实现无缝间歇滚动栏 错在哪里,求指正!谢谢!!

大家帮忙看看 JQ实现无缝间歇滚动栏 错在哪里,求指正!谢谢!!

鸡肋2016 2016-09-19 11:13:24
<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">             <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>     </div> </div>*{ 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{ margin:0 auto; width:300px; list-style-type:none; font-size:10px; }#con1 li { height:25px; line-height:25px; }#con1 li a{ color:#000; text-decoration:none; }#con1 li span{ color:#999; float:right; }$(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 回答

?
qq_彦狐_0

TA贡献2条经验 获得超0个赞

$(function(){

var $area = $('#content');

var $con1 = $('#con1');

$area.scrollTop = 0;


 

    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);

});

var myScroll = setInterval(myAnimate,1000);

  

})

你的代码里面的东西改下就好了,以下是修改点:

  1. myAnimate需要在调用之前声明赋值;

  2. '$con1[0].scrollHeight()'这一段不需要引号,另外它也不是方法,是个属性,直接用就好了,不需要();

  3. 引用的是变量不需要引号,加了的话回变成字符串

查看完整回答
反对 回复 2016-09-22
?
鸡肋2016

TA贡献1条经验 获得超0个赞

麻烦大家帮忙看看!!小弟谢过啦啦啦~~!!!

查看完整回答
反对 回复 2016-09-19
  • 2 回答
  • 1 关注
  • 1539 浏览
慕课专栏
更多

添加回答

举报

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