您的位置：首页 > Web前端 > JQuery

Jquery结合div+css实现文字间断停顿向上滚动效果

2011-03-09 14:45 1381 查看
这篇文章的标题不知道怎么些才好，那就说一下它实现的功能以及长处吧。

1、使用Jquery操作对象

2、使用div+css控制样式

3、可以自定义停顿时间

4、滚动实现了动画效果，可以控制滚动速度

5、可以设置每次滚动的长度

6、鼠标悬停时停止滚动，鼠标移出后继续滚动

查看代码：

查看源代码

打印?

<html>
<head>
<title>垂直向上间断循环滚动文字</title>
<metaname=
"author"
content=
"bossma,bosma@yeah.net"
/>
<scripttype=
"text/javascript"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
></script>
<scripttype=
"text/javascript"
>
varinterval=3000;
//两次滚动之间的时间间隔
varstepsize=78;
//滚动一次的长度，必须是行高的倍数,这样滚动的时候才不会断行
varscrollspeed=
"normal"
;
//可选("slow","normal",or"fast")，或者滚动动画时长的毫秒数
varobjInterval=
null
;
$(document).ready(
function(){
//用上部的内容填充下部
$(
"#bottom"
).html($(
"#top"
).html());
//给显示的区域绑定鼠标事件
$(
"#content"
).bind(
"mouseover"
,function(){StopScroll();});
$(
"#content"
).bind(
"mouseout"
,function(){StartScroll();});
//启动定时器
StartScroll();
}
);
//启动定时器，开始滚动
functionStartScroll(){
objInterval=setInterval(
"verticalloop()"
,interval);
}
//清除定时器，停止滚动
functionStopScroll(){
window.clearInterval(objInterval);
}
//控制滚动
functionverticalloop(){
//判断是否上部内容全部移出显示区域
//如果是，从新开始;否则，继续向上移动
if
($(
"#content"
).scrollTop()>=$(
"#top"
).outerHeight()){
$(
"#content"
).scrollTop($(
"#content"
).scrollTop()-$(
"#top"
).outerHeight());
}
//使用jquery创建滚动时的动画效果
$(
"#content"
).animate({
"scrollTop"
:$(
"#content"
).scrollTop()+stepsize+
"px"
},scrollspeed,function(){
//这里用于显示滚动区域的scrollTop，实际应用中请删除
$(
"#foot"
).html(
"scrollTop:"
+$(
"#content"
).scrollTop());
});
}
</script>
<styletype=
"text/css"
>
.infolist{width:400px;matgin:0;}
.infolistul{margin:0;padding:0;}
.infolistulli{list-style:none;height:26px;line-height:26px;}
.infocontent{width:400px;height:130px;overflow:hidden;border:1pxsolid#666666;}
</style>
</head>
<body>
<divid=
"title"
style=
"width:100%;height:40px;"
>看看间断滚动文字</div>
<!--
//
使用overflow:hidden隐藏超出的部分。
//-->
<divid=
"content"
>
<divid=
"top"
>
<ul>
<li>全国政协首次公布去年会议花销共5900万1</li>
<li>全国政协首次公布去年会议花销共5900万2</li>
<li>全国政协首次公布去年会议花销共5900万3</li>
<li>全国政协首次公布去年会议花销共5900万4</li>
<li>全国政协首次公布去年会议花销共5900万5</li>
<li>全国政协首次公布去年会议花销共5900万6</li>
<li>全国政协首次公布去年会议花销共5900万7</li>
<li>全国政协首次公布去年会议花销共5900万8</li>
<li>全国政协首次公布去年会议花销共5900万9</li>
<li>全国政协首次公布去年会议花销共5900万10</li>
<li>全国政协首次公布去年会议花销共5900万11</li>
<li>全国政协首次公布去年会议花销共5900万12</li>
<li>全国政协首次公布去年会议花销共5900万13</li>
<li>全国政协首次公布去年会议花销共5900万14</li>
<li>全国政协首次公布去年会议花销共5900万15</li>
</ul>
</div>
<divid=
"bottom"
></div>
</div>
<divid=
"foot"
></div>
</body>
</html>
来源：http://blog.bossma.cn/javascript/jquery-div-css-words-up-pause-scroll/
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航