jquery单行文字向上滚动效果的实现代码


Posted in Javascript onSeptember 05, 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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
JS链式调用的实现方法
Mar 07 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 #Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 #Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 #Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 #Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 #Javascript
window.location的重写及判断location是否被重写
Sep 04 #Javascript
js怎么覆盖原有方法实现重写
Sep 04 #Javascript
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
深入解析php中的foreach问题
2013/06/30 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery进行组件开发完整实例
2015/12/15 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
React diff算法的实现示例
2018/04/20 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
python中的多线程实例教程
2014/08/27 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
分享6个隐藏的python功能
2017/12/07 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
django框架创建应用操作示例
2019/09/26 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
工艺工程师岗位职责
2014/03/04 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
PHP解决高并发问题
2021/04/01 PHP
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python