<div id="warp"> <div class="header"> <div class="header_one"> <h1 class="title">最新课程</h1> <a href="#">更多>></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);
})
你的代码里面的东西改下就好了,以下是修改点:
myAnimate需要在调用之前声明赋值;
'$con1[0].scrollHeight()'这一段不需要引号,另外它也不是方法,是个属性,直接用就好了,不需要();
引用的是变量不需要引号,加了的话回变成字符串
- 2 回答
- 1 关注
- 1539 浏览
添加回答
举报
0/150
提交
取消