编程 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 相关文章推荐

使用JQuery进行跨域请求

Jan 25 Javascript

jquery easyui中treegrid用法的简单实例

Feb 18 Javascript

JavaScript使用setInterval()函数实现简单轮询操作的方法

Feb 02 Javascript

简介AngularJS的HTML DOM支持情况

Jun 17 Javascript

javascript使用 concat 方法对数组进行合并的方法

Sep 08 Javascript

AngularJS 过滤器（自带和自建）详解

Sep 19 Javascript

Vuex之理解Mutations的用法实例

Apr 19 Javascript

Bootstrap模态框插件使用详解

May 11 Javascript

VueJs 搭建Axios接口请求工具

Nov 20 Javascript

vue左右侧联动滚动的实现代码

Jun 06 Javascript

微信小程序开发技巧汇总

Jul 15 Javascript

Vue绑定用户接口实现代码示例

Nov 04 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