jquery单行文字向上滚动效果的实现代码
更新时间：2014年09月05日 09:56:41 投稿：whsnow
这篇文章主要介绍了jquery单行文字向上滚动效果的具体实现，此效果适应于很多场景，会的不会的都要学习下啊
<body> <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> <div id="content" class="infocontent"> <div id="top" class="infolist"> <ul> <li>央视315曝光: 华润深陷“海砂门”回应澄而未清</li> <li>吉野家被曝餐具不消毒 波司登等羊绒衫不含羊绒</li> <li>无锡警方公布“待产女警突发不幸”事发经过</li> <li>中国人一天：最后的轮渡 视界：在家“搞定”</li> </ul> </div> <div id="bottom" class="infolist"></div> </div> <div id="foot"></div> </body>
.infolist{width:400px;matgin:0;}
.infolist ul{margin:0;padding:0;}
.infolist ul li{list-style:none;height:26px;line-height:26px;}
.infocontent{width:400px;height:26px;overflow:hidden;border:1px solid #666666;}
var interval=1000;//两次滚动之间的时间间隔
var stepsize=26;//滚动一次的长度，必须是行高的倍数,这样滚动的时候才不会断行
var objInterval=null;
$(document).ready( function(){
//用上部的内容填充下部
$("#bottom").html($("#top").html());
//给显示的区域绑定鼠标事件
$("#content").bind("mouseover",function(){StopScroll();});
$("#content").bind("mouseout",function(){StartScroll();});
//启动定时器
StartScroll();
});
//启动定时器，开始滚动
function StartScroll(){
objInterval=setInterval("verticalloop()",interval);
}
//清除定时器，停止滚动
function StopScroll(){
window.clearInterval(objInterval);
}
//控制滚动
function verticalloop(){
//判断是否上部内容全部移出显示区域
//如果是，从新开始;否则，继续向上移动
if($("#content").scrollTop()>=$("#top").outerHeight()){
$("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight());
}
//使用jquery创建滚动时的动画效果
$("#content").animate(
{"scrollTop" : $("#content").scrollTop()+stepsize +"px"},600,function(){
//这里用于显示滚动区域的scrollTop，实际应用中请删除
// $("#foot").html("scrollTop:"+$("#content").scrollTop());
});
}
相关文章
这篇文章主要介绍了EditPlus中的正则表达式 实战(2)的相关资料,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了微信小程序按顺序同步执行的两种方式,本文通过实例代码给大家讲解，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
用media="print"的css来控制要打印的文件，media为print的样式，表示打印时该样式才起作用，下面为大家详细介绍下，感兴趣的朋友不要错过2014-01-01
这篇文章主要介绍了ES6 中可以提升幸福度的小功能,在量解构赋值的用途，函数的用处等方面给大家介绍，需要的朋友可以参考下2018-08-08
比较两个字符串中不同的字符2009-05-05
这篇文章的目的只是让你认识控制台，让你入门调试js，之后的路还得靠你们自己走2014-06-06
这篇文章主要介绍了JS Ajax请求如何防止重复提交的相关资料，通过覆盖掉$.ajax而达到防止重复提交的问题，实现代码简单，需要的朋友可以参考下2016-06-06
JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言，人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。2014-07-07
这篇文章主要介绍了JS简单生成由字母数字组合随机字符串,结合实例形式分析了javascript使用Math.random()生成随机字符串相关操作技巧,需要的朋友可以参考下2018-05-05
最新评论