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()); 
}); 
}
Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
Vue数据双向绑定底层实现原理
Nov 22 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
一起深入理解js中的事件对象
Feb 06 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
You might like
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
基于jquery的拖动布局插件
2011/11/25 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python中Yield的基本用法
2020/10/18 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
中学生期中自我鉴定
2014/04/20 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
前端JavaScript大管家 package.json
2021/11/02 Javascript
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python