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 相关文章推荐
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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
javascript eval函数深入认识
2009/02/21 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python计算两个数的百分比方法
2018/06/29 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python计算无向图节点度的实例代码
2019/11/22 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
前台文员岗位职责
2013/12/28 职场文书
小学后勤管理制度
2014/01/14 职场文书
小学国庆节活动方案
2014/02/11 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
计算机实训报告总结
2014/11/05 职场文书
计划生育目标责任书
2015/05/09 职场文书
通用员工手册范本
2015/05/14 职场文书
活动费用申请报告
2015/05/15 职场文书
监守自盗观后感
2015/06/10 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL