编程 Javascript

jquery单行文字向上滚动效果示例

Posted in Javascript onMarch 06, 2014

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

jquery单行文字向上滚动效果示例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

IE/FireFox具备兼容性的拖动代码

Aug 13 Javascript

JavaScript修改css样式style

Apr 15 Javascript

Javascript Request获取请求参数如何实现

Nov 28 Javascript

JS随机生成不重复数据的实例方法

Jul 17 Javascript

jquery下拉select控件操作方法分享(jquery操作select)

Mar 25 Javascript

js老生常谈之this,constructor ,prototype全面解析

Apr 05 Javascript

AngularJS延迟加载html template

Jul 27 Javascript

jQuery插件zTree实现清空选中第一个节点所有子节点的方法

Mar 08 Javascript

Bootstrap下拉菜单更改为悬停(hover)触发的方法

May 24 Javascript

微信小程序自定义底部弹出框

Nov 16 Javascript

javascript闭包的使用之按钮切换功能

Aug 30 Javascript

JS将指定的某个字符全部转换为其他字符实例代码

Oct 13 Javascript

Javscript删除数组中指定元素并返回新数组

Mar 06 #Javascript

在Firefox下js select标签点击无法弹出

Mar 06 #Javascript

jquery选择器大全全面详解jquery选择器

Mar 06 #Javascript

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

Mar 06 #Javascript

Jquery easyUI 更新行示例

Mar 06 #Javascript

js toFixed()方法的重写实现精度的统一

Mar 06 #Javascript

button没写type=button会导致点击时提交

Mar 06 #Javascript